.elementor-63 .elementor-element.elementor-element-a6dbdd4{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items: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-63 .elementor-element.elementor-element-a6dbdd4:not(.elementor-motion-effects-element-type-background), .elementor-63 .elementor-element.elementor-element-a6dbdd4 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-63 .elementor-element.elementor-element-e4f1dab{--display:flex;--min-height:41px;--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:center;--align-items:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:8px;--padding-bottom:0px;--padding-left:20px;--padding-right:20px;}.elementor-63 .elementor-element.elementor-element-e4f1dab:not(.elementor-motion-effects-element-type-background), .elementor-63 .elementor-element.elementor-element-e4f1dab > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F199B0;}.elementor-63 .elementor-element.elementor-element-1b00ee1{text-align:center;font-family:"Plus Jakarta Sans", Sans-serif;font-size:17px;font-weight:700;text-transform:uppercase;color:#FFFFFF;}.elementor-63 .elementor-element.elementor-element-98ecfd5{--display:flex;--min-height:96px;--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:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--flex-wrap:nowrap;border-style:solid;--border-style:solid;border-width:0px 0px 1px 0px;--border-top-width:0px;--border-right-width:0px;--border-bottom-width:1px;--border-left-width:0px;border-color:#EEEEEE;--border-color:#EEEEEE;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:36px;--padding-right:36px;}.elementor-63 .elementor-element.elementor-element-98ecfd5:not(.elementor-motion-effects-element-type-background), .elementor-63 .elementor-element.elementor-element-98ecfd5 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-63 .elementor-element.elementor-element-3c551fb{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:flex-start;--align-items:center;}.elementor-63 .elementor-element.elementor-element-1c6a9e6 .elementor-menu-toggle{margin:0 auto;}.elementor-63 .elementor-element.elementor-element-1c6a9e6 .elementor-nav-menu .elementor-item{font-family:"Plus Jakarta Sans", Sans-serif;font-size:18px;font-weight:400;}.elementor-63 .elementor-element.elementor-element-1c6a9e6 .elementor-nav-menu--main .elementor-item{color:#606060;fill:#606060;}.elementor-63 .elementor-element.elementor-element-1c6a9e6 .elementor-nav-menu--main .elementor-item:hover, .elementor-63 .elementor-element.elementor-element-1c6a9e6 .elementor-nav-menu--main .elementor-item.elementor-item-active, .elementor-63 .elementor-element.elementor-element-1c6a9e6 .elementor-nav-menu--main .elementor-item.highlighted, .elementor-63 .elementor-element.elementor-element-1c6a9e6 .elementor-nav-menu--main .elementor-item:focus{color:#111111;fill:#111111;}.elementor-63 .elementor-element.elementor-element-1c6a9e6 .elementor-nav-menu--main .elementor-item.elementor-item-active{color:#111111;}.elementor-63 .elementor-element.elementor-element-1c6a9e6{--e-nav-menu-horizontal-menu-item-margin:calc( 1px / 2 );}.elementor-63 .elementor-element.elementor-element-1c6a9e6 .elementor-nav-menu--main:not(.elementor-nav-menu--layout-horizontal) .elementor-nav-menu > li:not(:last-child){margin-bottom:1px;}.elementor-63 .elementor-element.elementor-element-ad0f8f8{--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:center;--align-items:center;--gap:24px 24px;--row-gap:24px;--column-gap:24px;--flex-wrap:nowrap;}.elementor-63 .elementor-element.elementor-element-45d7ae4 img{width:250px;}.elementor-63 .elementor-element.elementor-element-e147076{--divider-border-style:solid;--divider-color:#C6C6C6;--divider-border-width:1px;}.elementor-63 .elementor-element.elementor-element-e147076 .elementor-divider-separator{width:1px;}.elementor-63 .elementor-element.elementor-element-e147076 .elementor-divider{padding-block-start:20px;padding-block-end:20px;}.elementor-63 .elementor-element.elementor-element-c292d15 img{width:250px;}.elementor-63 .elementor-element.elementor-element-bf1f9ac{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:flex-end;--align-items:center;--gap:12px 12px;--row-gap:12px;--column-gap:12px;--flex-wrap:nowrap;}.elementor-63 .elementor-element.elementor-element-54804f9{--display:flex;--min-height:60px;--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:center;--align-items:center;border-style:solid;--border-style:solid;border-width:1px 1px 1px 1px;--border-top-width:1px;--border-right-width:1px;--border-bottom-width:1px;--border-left-width:1px;border-color:#E5E5E5;--border-color:#E5E5E5;--border-radius:999px 999px 999px 999px;}.elementor-63 .elementor-element.elementor-element-54804f9:not(.elementor-motion-effects-element-type-background), .elementor-63 .elementor-element.elementor-element-54804f9 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-5747b36 );}.elementor-63 .elementor-element.elementor-element-0eecb75{--display:flex;--min-height:60px;--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:center;--align-items:center;border-style:solid;--border-style:solid;border-width:1px 1px 1px 1px;--border-top-width:1px;--border-right-width:1px;--border-bottom-width:1px;--border-left-width:1px;border-color:#E5E5E5;--border-color:#E5E5E5;--border-radius:999px 999px 999px 999px;}.elementor-63 .elementor-element.elementor-element-0eecb75:not(.elementor-motion-effects-element-type-background), .elementor-63 .elementor-element.elementor-element-0eecb75 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-5747b36 );}.elementor-63 .elementor-element.elementor-element-7802bd6 .elementor-icon-wrapper{text-align:center;}.elementor-63 .elementor-element.elementor-element-7802bd6.elementor-view-stacked .elementor-icon{background-color:#111111;}.elementor-63 .elementor-element.elementor-element-7802bd6.elementor-view-framed .elementor-icon, .elementor-63 .elementor-element.elementor-element-7802bd6.elementor-view-default .elementor-icon{color:#111111;border-color:#111111;}.elementor-63 .elementor-element.elementor-element-7802bd6.elementor-view-framed .elementor-icon, .elementor-63 .elementor-element.elementor-element-7802bd6.elementor-view-default .elementor-icon svg{fill:#111111;}.elementor-63 .elementor-element.elementor-element-7802bd6 .elementor-icon{font-size:23px;}.elementor-63 .elementor-element.elementor-element-7802bd6 .elementor-icon svg{height:23px;}.elementor-63 .elementor-element.elementor-element-d3e1230{--display:flex;--min-height:60px;--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:center;--align-items:center;border-style:solid;--border-style:solid;border-width:1px 1px 1px 1px;--border-top-width:1px;--border-right-width:1px;--border-bottom-width:1px;--border-left-width:1px;border-color:#E5E5E5;--border-color:#E5E5E5;--border-radius:999px 999px 999px 999px;}.elementor-63 .elementor-element.elementor-element-d3e1230:not(.elementor-motion-effects-element-type-background), .elementor-63 .elementor-element.elementor-element-d3e1230 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-5747b36 );}.elementor-63 .elementor-element.elementor-element-8a47858{border-style:none;--divider-style:solid;--subtotal-divider-style:solid;--elementor-remove-from-cart-button:none;--remove-from-cart-button:block;--cart-border-style:none;--cart-footer-layout:1fr 1fr;--products-max-height-sidecart:calc(100vh - 240px);--products-max-height-minicart:calc(100vh - 385px);}.elementor-63 .elementor-element.elementor-element-8a47858 .widget_shopping_cart_content{--subtotal-divider-left-width:0;--subtotal-divider-right-width:0;}.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}@media(min-width:768px){.elementor-63 .elementor-element.elementor-element-3c551fb{--width:33.33%;}.elementor-63 .elementor-element.elementor-element-ad0f8f8{--width:33.33%;}.elementor-63 .elementor-element.elementor-element-bf1f9ac{--width:33.33%;}.elementor-63 .elementor-element.elementor-element-54804f9{--width:60px;}.elementor-63 .elementor-element.elementor-element-0eecb75{--width:60px;}.elementor-63 .elementor-element.elementor-element-d3e1230{--width:60px;}}@media(max-width:1024px){.elementor-63 .elementor-element.elementor-element-1b00ee1{font-size:13px;}.elementor-63 .elementor-element.elementor-element-3c551fb{--justify-content:flex-start;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-63 .elementor-element.elementor-element-1c6a9e6 .elementor-nav-menu .elementor-item{font-size:15px;}}@media(max-width:767px){.elementor-63 .elementor-element.elementor-element-e4f1dab{--min-height:26px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:5px;--padding-bottom:0px;--padding-left:8px;--padding-right:8px;}.elementor-63 .elementor-element.elementor-element-1b00ee1{font-size:10px;}}/* Start custom CSS for container, class: .elementor-element-e4f1dab *//* ========================================================= HERAMINO / HISAMINO ANNOUNCEMENT BAR ========================================================= */ .elementor-63 .elementor-element.elementor-element-e4f1dab { width: 100%; min-height: 0; height: auto; margin: 0; padding: 7px 16px; display: flex; align-items: center; justify-content: center; box-sizing: border-box; /* Default = HerAmino */ background: #ef94ad; transition: background-color 0.2s ease; } /* ========================================================= BRAND SWITCH COLORS ========================================================= */ /* HerAmino */ body.ha-brand-heramino .elementor-63 .elementor-element.elementor-element-e4f1dab { background: #ef94ad !important; } /* HisAmino */ body.ha-brand-hisamino .elementor-63 .elementor-element.elementor-element-e4f1dab { background: #1687d9 !important; } /* ========================================================= TEXT EDITOR WIDGET WRAPPER ========================================================= */ .elementor-63 .elementor-element.elementor-element-e4f1dab .elementor-widget-text-editor { width: 100%; margin: 0; padding: 0; } /* ========================================================= INNER ELEMENTOR WRAPPER ========================================================= */ .elementor-63 .elementor-element.elementor-element-e4f1dab .elementor-widget-text-editor .elementor-widget-container { margin: 0; padding: 0; } /* ========================================================= REMOVE PARAGRAPH DEFAULT SPACING ========================================================= */ .elementor-63 .elementor-element.elementor-element-e4f1dab .elementor-widget-text-editor p { margin: 0; padding: 0; color: #ffffff; font-family: inherit; font-size: 15px; font-weight: 700; line-height: 1.15; text-align: center; } /* ========================================================= WIDE DESKTOP ========================================================= */ @media (min-width: 1440px) { .elementor-63 .elementor-element.elementor-element-e4f1dab { padding-top: 7px; padding-bottom: 7px; } .elementor-63 .elementor-element.elementor-element-e4f1dab .elementor-widget-text-editor p { font-size: 15px; } } /* ========================================================= LAPTOP ========================================================= */ @media (min-width: 1025px) and (max-width: 1439px) { .elementor-63 .elementor-element.elementor-element-e4f1dab { padding-top: 6px; padding-bottom: 6px; } .elementor-63 .elementor-element.elementor-element-e4f1dab .elementor-widget-text-editor p { font-size: 14px; } } /* ========================================================= TABLET ========================================================= */ @media (min-width: 768px) and (max-width: 1024px) { .elementor-63 .elementor-element.elementor-element-e4f1dab { padding: 6px 14px; } .elementor-63 .elementor-element.elementor-element-e4f1dab .elementor-widget-text-editor p { font-size: 12px; line-height: 1.15; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .elementor-63 .elementor-element.elementor-element-e4f1dab { padding: 6px 10px; } .elementor-63 .elementor-element.elementor-element-e4f1dab .elementor-widget-text-editor p { font-size: 10px; line-height: 1.15; } } /* ========================================================= SMALL IPHONE / ANDROID ========================================================= */ @media (max-width: 390px) { .elementor-63 .elementor-element.elementor-element-e4f1dab { padding: 5px 8px; } .elementor-63 .elementor-element.elementor-element-e4f1dab .elementor-widget-text-editor p { font-size: 9px; line-height: 1.15; } }/* End custom CSS */ /* Start custom CSS for woocommerce-menu-cart, class: .elementor-element-8a47858 *//* ========================================================== HERAMINO / HISAMINO MENU CART LOVEABLE-STYLE DRAWER FIXED: - Proper mobile viewport height - Mobile drawer fully usable - Products scroll independently - Checkout/footer stays accessible - Better iPhone / Android touch scrolling - Larger mobile close touch target - Prevents drawer content being cut off - HerAmino / HisAmino colors preserved - Responsive cart icon sizing - Cart remains more prominent on mobile ========================================================== */ .elementor-63 .elementor-element.elementor-element-8a47858 { --cart-brand: #EF94AD; --cart-brand-dark: #C93F68; --cart-soft: #FFF1F5; --cart-soft-2: #FFE0E9; --cart-border: #F3B6C7; --cart-text: #111111; --cart-muted: #666666; --cart-line: #E7E7E7; --cart-black: #080808; } /* ========================================================== HISAMINO ========================================================== */ body.ha-brand-hisamino .elementor-63 .elementor-element.elementor-element-8a47858 { --cart-brand: #5AAEF5; --cart-brand-dark: #1687D9; --cart-soft: #EFF8FF; --cart-soft-2: #DDEFFF; --cart-border: #9ED3FB; } /* ========================================================== CART ICON ========================================================== */ .elementor-63 .elementor-element.elementor-element-8a47858 .elementor-menu-cart__toggle, .elementor-63 .elementor-element.elementor-element-8a47858 .elementor-menu-cart__toggle_wrapper, .elementor-63 .elementor-element.elementor-element-8a47858 .elementor-menu-cart__toggle_button, .elementor-63 .elementor-element.elementor-element-8a47858 .elementor-menu-cart__toggle .elementor-button { position: relative !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; outline: 0 !important; box-shadow: none !important; overflow: visible !important; cursor: pointer !important; touch-action: manipulation !important; } /* Base / desktop cart icon */ .elementor-63 .elementor-element.elementor-element-8a47858 .elementor-menu-cart__toggle_button svg, .elementor-63 .elementor-element.elementor-element-8a47858 .elementor-menu-cart__toggle_button i, .elementor-63 .elementor-element.elementor-element-8a47858 .elementor-menu-cart__toggle .elementor-button svg, .elementor-63 .elementor-element.elementor-element-8a47858 .elementor-menu-cart__toggle .elementor-button i { position: relative !important; z-index: 1 !important; width: 17px !important; height: 17px !important; font-size: 17px !important; color: #111111 !important; } /* ========================================================== CART COUNTER ========================================================== */ .elementor-63 .elementor-element.elementor-element-8a47858 .elementor-button-icon-qty { position: absolute !important; top: -7px !important; right: -8px !important; z-index: 5 !important; display: flex !important; align-items: center !important; justify-content: center !important; min-width: 17px !important; height: 17px !important; margin: 0 !important; padding: 0 4px !important; background: var(--cart-brand-dark) !important; color: #ffffff !important; border: 2px solid #ffffff !important; border-radius: 999px !important; font-size: 8px !important; font-weight: 700 !important; line-height: 13px !important; box-shadow: 0 2px 5px rgba(0,0,0,.12) !important; pointer-events: none !important; } /* ========================================================== DRAWER CONTAINER / OVERLAY ========================================================== */ .elementor-63 .elementor-element.elementor-element-8a47858 .elementor-menu-cart__container { position: fixed !important; inset: 0 !important; z-index: 999999 !important; width: 100% !important; height: 100vh !important; height: 100dvh !important; max-height: 100dvh !important; overscroll-behavior: contain !important; } /* Overlay */ .elementor-63 .elementor-element.elementor-element-8a47858 .elementor-menu-cart__container::before { background: rgba(0,0,0,.30) !important; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); } /* ========================================================== DRAWER MAIN ========================================================== */ .elementor-63 .elementor-element.elementor-element-8a47858 .elementor-menu-cart__main { position: absolute !important; top: 0 !important; right: 0 !important; bottom: 0 !important; display: flex !important; flex-direction: column !important; width: 430px !important; max-width: 92vw !important; height: 100vh !important; height: 100dvh !important; max-height: 100dvh !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; background: #ffffff !important; border-left: 1px solid #e9e9e9 !important; box-shadow: -18px 0 45px rgba(0,0,0,.14) !important; overscroll-behavior: contain !important; } /* ========================================================== CART HEADER ========================================================== */ .elementor-63 .elementor-element.elementor-element-8a47858 .elementor-menu-cart__main::before { content: "YOUR CART"; display: block !important; flex: 0 0 78px !important; width: 100% !important; min-height: 78px !important; height: 78px !important; margin: 0 !important; padding: 27px 70px 22px 68px !important; box-sizing: border-box !important; color: var(--cart-text) !important; font-family: inherit !important; font-size: 19px !important; font-weight: 700 !important; line-height: 1 !important; letter-spacing: 3px !important; border-bottom: 1px solid var(--cart-line) !important; } /* Small bag icon before title */ .elementor-63 .elementor-element.elementor-element-8a47858 .elementor-menu-cart__main::after { content: "▢"; position: absolute !important; top: 25px !important; left: 34px !important; z-index: 15 !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 22px !important; height: 22px !important; color: #111111 !important; font-size: 19px !important; line-height: 1 !important; pointer-events: none !important; } /* ========================================================== CLOSE BUTTON FORCE A REAL, VISIBLE X WITHOUT CHANGING DRAWER FUNCTION ========================================================== */ .elementor-63 .elementor-element.elementor-element-8a47858 .elementor-menu-cart__close-button, .elementor-63 .elementor-element.elementor-element-8a47858 .elementor-menu-cart__close-button-custom { position: absolute !important; top: 21px !important; right: 22px !important; z-index: 1000 !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 36px !important; height: 36px !important; min-width: 36px !important; min-height: 36px !important; margin: 0 !important; padding: 0 !important; background: transparent !important; color: #111111 !important; border: 0 !important; outline: 0 !important; border-radius: 50% !important; box-shadow: none !important; cursor: pointer !important; touch-action: manipulation !important; visibility: visible !important; opacity: 1 !important; overflow: visible !important; } /* Elementor versions can render their own close icon differently. Hide only the visual icon inside the existing clickable button, then draw a consistent X with CSS. */ .elementor-63 .elementor-element.elementor-element-8a47858 .elementor-menu-cart__close-button > *, .elementor-63 .elementor-element.elementor-element-8a47858 .elementor-menu-cart__close-button-custom > * { visibility: hidden !important; opacity: 0 !important; } /* Draw the X */ .elementor-63 .elementor-element.elementor-element-8a47858 .elementor-menu-cart__close-button::before, .elementor-63 .elementor-element.elementor-element-8a47858 .elementor-menu-cart__close-button::after, .elementor-63 .elementor-element.elementor-element-8a47858 .elementor-menu-cart__close-button-custom::before, .elementor-63 .elementor-element.elementor-element-8a47858 .elementor-menu-cart__close-button-custom::after { content: "" !important; position: absolute !important; top: 50% !important; left: 50% !important; display: block !important; width: 18px !important; height: 2px !important; margin: 0 !important; padding: 0 !important; background: currentColor !important; border: 0 !important; border-radius: 999px !important; transform-origin: center !important; pointer-events: none !important; } .elementor-63 .elementor-element.elementor-element-8a47858 .elementor-menu-cart__close-button::before, .elementor-63 .elementor-element.elementor-element-8a47858 .elementor-menu-cart__close-button-custom::before { transform: translate(-50%, -50%) rotate(45deg) !important; } .elementor-63 .elementor-element.elementor-element-8a47858 .elementor-menu-cart__close-button::after, .elementor-63 .elementor-element.elementor-element-8a47858 .elementor-menu-cart__close-button-custom::after { transform: translate(-50%, -50%) rotate(-45deg) !important; } .elementor-63 .elementor-element.elementor-element-8a47858 .elementor-menu-cart__close-button:hover, .elementor-63 .elementor-element.elementor-element-8a47858 .elementor-menu-cart__close-button:focus, .elementor-63 .elementor-element.elementor-element-8a47858 .elementor-menu-cart__close-button-custom:hover, .elementor-63 .elementor-element.elementor-element-8a47858 .elementor-menu-cart__close-button-custom:focus { color: var(--cart-brand-dark) !important; background: var(--cart-soft) !important; outline: 0 !important; } /* ========================================================== SHOPPING CART CONTENT /* ========================================================== SHOPPING CART CONTENT IMPORTANT: This is what fixes mobile scrolling. ========================================================== */ .elementor-63 .elementor-element.elementor-element-8a47858 .widget_shopping_cart_content { position: relative !important; display: flex !important; flex-direction: column !important; flex: 1 1 auto !important; width: 100% !important; min-width: 0 !important; min-height: 0 !important; height: auto !important; max-height: none !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; } /* ========================================================== PRODUCTS SCROLL AREA This is the ONLY section that should vertically scroll when the cart contains many items. ========================================================== */ .elementor-63 .elementor-element.elementor-element-8a47858 .elementor-menu-cart__products { position: relative !important; flex: 1 1 auto !important; min-width: 0 !important; min-height: 0 !important; width: 100% !important; height: auto !important; max-height: none !important; margin: 0 !important; padding: 14px 30px 8px !important; overflow-x: hidden !important; overflow-y: auto !important; overscroll-behavior: contain !important; -webkit-overflow-scrolling: touch !important; touch-action: pan-y !important; scrollbar-width: thin; scrollbar-color: #d8d8d8 transparent; } /* ========================================================== PRODUCT ROW ========================================================== */ .elementor-63 .elementor-element.elementor-element-8a47858 .elementor-menu-cart__product { position: relative !important; display: grid !important; grid-template-columns: 76px minmax(0,1fr) 30px !important; gap: 12px !important; align-items: start !important; width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 15px 0 !important; border-bottom: 1px solid var(--cart-line) !important; } /* ========================================================== PRODUCT IMAGE ========================================================== */ .elementor-63 .elementor-element.elementor-element-8a47858 .elementor-menu-cart__product-image { width: 76px !important; height: 76px !important; min-width: 76px !important; } .elementor-63 .elementor-element.elementor-element-8a47858 .elementor-menu-cart__product-image img { display: block !important; width: 76px !important; height: 76px !important; max-width: none !important; object-fit: cover !important; object-position: center !important; border: 1px solid #eeeeee !important; border-radius: 12px !important; } /* ========================================================== PRODUCT NAME ========================================================== */ .elementor-63 .elementor-element.elementor-element-8a47858 .elementor-menu-cart__product-name { min-width: 0 !important; margin: 3px 0 6px !important; color: var(--cart-text) !important; font-family: inherit !important; font-size: 14px !important; font-weight: 700 !important; line-height: 1.25 !important; overflow-wrap: anywhere !important; } .elementor-63 .elementor-element.elementor-element-8a47858 .elementor-menu-cart__product-name a { color: inherit !important; text-decoration: none !important; } .elementor-63 .elementor-element.elementor-element-8a47858 .elementor-menu-cart__product-name a:hover { color: var(--cart-brand-dark) !important; } /* ========================================================== PRODUCT PRICE ========================================================== */ .elementor-63 .elementor-element.elementor-element-8a47858 .elementor-menu-cart__product-price, .elementor-63 .elementor-element.elementor-element-8a47858 .elementor-menu-cart__product-price .quantity { color: var(--cart-muted) !important; font-size: 12px !important; font-weight: 500 !important; line-height: 1.4 !important; } /* ========================================================== REMOVE PRODUCT ========================================================== */ .elementor-63 .elementor-element.elementor-element-8a47858 .elementor-menu-cart__product-remove { display: flex !important; align-items: center !important; justify-content: center !important; width: 28px !important; height: 28px !important; min-width: 28px !important; min-height: 28px !important; margin: 0 !important; padding: 0 !important; background: #ffffff !important; color: #777777 !important; border: 1px solid #e5e5e5 !important; border-radius: 50% !important; cursor: pointer !important; touch-action: manipulation !important; } .elementor-63 .elementor-element.elementor-element-8a47858 .elementor-menu-cart__product-remove:hover { color: var(--cart-brand-dark) !important; background: var(--cart-soft) !important; border-color: var(--cart-brand) !important; } /* ========================================================== UPSELL STYLE ========================================================== */ .elementor-63 .elementor-element.elementor-element-8a47858 .ha-cart-upsell, .elementor-63 .elementor-element.elementor-element-8a47858 .mini-cart-upsell, .elementor-63 .elementor-element.elementor-element-8a47858 .cart-upsell { flex: 0 0 auto !important; display: grid !important; grid-template-columns: 54px minmax(0,1fr) auto !important; gap: 14px !important; align-items: center !important; margin: 18px 30px !important; padding: 20px 22px !important; background: var(--cart-soft) !important; border: 1px solid var(--cart-brand) !important; border-radius: 22px !important; } .elementor-63 .elementor-element.elementor-element-8a47858 .ha-cart-upsell button, .elementor-63 .elementor-element.elementor-element-8a47858 .mini-cart-upsell button, .elementor-63 .elementor-element.elementor-element-8a47858 .cart-upsell button { min-height: 42px !important; padding: 10px 20px !important; background: var(--cart-black) !important; color: #ffffff !important; border: 0 !important; border-radius: 999px !important; font-size: 12px !important; font-weight: 700 !important; touch-action: manipulation !important; } /* ========================================================== COUPON AREA ========================================================== */ .elementor-63 .elementor-element.elementor-element-8a47858 .woocommerce-form-coupon, .elementor-63 .elementor-element.elementor-element-8a47858 .elementor-menu-cart__coupon, .elementor-63 .elementor-element.elementor-element-8a47858 .mini-cart-coupon { flex: 0 0 auto !important; display: grid !important; grid-template-columns: minmax(0,1fr) 98px !important; gap: 10px !important; margin: 18px 30px 8px !important; } .elementor-63 .elementor-element.elementor-element-8a47858 .woocommerce-form-coupon input, .elementor-63 .elementor-element.elementor-element-8a47858 .elementor-menu-cart__coupon input, .elementor-63 .elementor-element.elementor-element-8a47858 .mini-cart-coupon input { width: 100% !important; min-width: 0 !important; height: 48px !important; padding: 0 18px !important; background: #ffffff !important; border: 1px solid #dddddd !important; border-radius: 16px !important; font-family: inherit !important; font-size: 14px !important; outline: 0 !important; box-shadow: none !important; } .elementor-63 .elementor-element.elementor-element-8a47858 .woocommerce-form-coupon button, .elementor-63 .elementor-element.elementor-element-8a47858 .elementor-menu-cart__coupon button, .elementor-63 .elementor-element.elementor-element-8a47858 .mini-cart-coupon button { height: 48px !important; padding: 0 18px !important; background: #8d8d8d !important; color: #ffffff !important; border: 0 !important; border-radius: 16px !important; font-size: 13px !important; font-weight: 700 !important; cursor: pointer !important; touch-action: manipulation !important; } /* ========================================================== SUBTOTAL ========================================================== */ .elementor-63 .elementor-element.elementor-element-8a47858 .elementor-menu-cart__subtotal { flex: 0 0 auto !important; display: flex !important; align-items: center !important; justify-content: space-between !important; width: auto !important; margin: 0 30px !important; padding: 16px 0 !important; background: #ffffff !important; color: var(--cart-muted) !important; border-top: 1px solid var(--cart-line) !important; font-family: inherit !important; font-size: 14px !important; font-weight: 400 !important; } .elementor-63 .elementor-element.elementor-element-8a47858 .elementor-menu-cart__subtotal strong { font-weight: 500 !important; } .elementor-63 .elementor-element.elementor-element-8a47858 .elementor-menu-cart__subtotal .woocommerce-Price-amount { color: var(--cart-text) !important; font-size: 14px !important; font-weight: 500 !important; } /* ========================================================== FOOTER BUTTONS ========================================================== */ .elementor-63 .elementor-element.elementor-element-8a47858 .elementor-menu-cart__footer-buttons { flex: 0 0 auto !important; display: block !important; width: 100% !important; margin: 0 !important; padding: 16px 30px 28px !important; background: #ffffff !important; } /* Hide View Cart button */ .elementor-63 .elementor-element.elementor-element-8a47858 .elementor-menu-cart__footer-buttons .elementor-button--view-cart { display: none !important; } /* Checkout */ .elementor-63 .elementor-element.elementor-element-8a47858 .elementor-menu-cart__footer-buttons .elementor-button--checkout { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; min-height: 58px !important; margin: 0 !important; padding: 14px 20px !important; background: var(--cart-black) !important; color: #ffffff !important; border: 0 !important; border-radius: 999px !important; font-family: inherit !important; font-size: 15px !important; font-weight: 700 !important; line-height: 1 !important; text-transform: none !important; letter-spacing: 0 !important; box-shadow: none !important; cursor: pointer !important; touch-action: manipulation !important; transition: transform .18s ease, background .18s ease !important; } .elementor-63 .elementor-element.elementor-element-8a47858 .elementor-menu-cart__footer-buttons .elementor-button--checkout:hover { background: #1d1d1d !important; transform: translateY(-1px) !important; } /* ========================================================== EMPTY CART ========================================================== */ .elementor-63 .elementor-element.elementor-element-8a47858 .woocommerce-mini-cart__empty-message { flex: 1 1 auto !important; margin: 0 !important; padding: 80px 30px !important; color: var(--cart-muted) !important; font-size: 14px !important; font-weight: 500 !important; text-align: center !important; } .elementor-63 .elementor-element.elementor-element-8a47858 .woocommerce-mini-cart__empty-message::before { content: "Your cart is empty"; display: block !important; margin-bottom: 9px !important; color: var(--cart-text) !important; font-size: 21px !important; font-weight: 700 !important; } /* ========================================================== SCROLLBAR ========================================================== */ .elementor-63 .elementor-element.elementor-element-8a47858 .elementor-menu-cart__products::-webkit-scrollbar { width: 5px; } .elementor-63 .elementor-element.elementor-element-8a47858 .elementor-menu-cart__products::-webkit-scrollbar-thumb { background: #d8d8d8; border-radius: 999px; } /* ========================================================== TABLET ========================================================== */ @media (max-width: 1024px) { .elementor-63 .elementor-element.elementor-element-8a47858 .elementor-menu-cart__main { width: 410px !important; max-width: 92vw !important; height: 100dvh !important; max-height: 100dvh !important; } .elementor-63 .elementor-element.elementor-element-8a47858 .elementor-menu-cart__products { padding-left: 24px !important; padding-right: 24px !important; } .elementor-63 .elementor-element.elementor-element-8a47858 .elementor-menu-cart__subtotal { margin-left: 24px !important; margin-right: 24px !important; } .elementor-63 .elementor-element.elementor-element-8a47858 .elementor-menu-cart__footer-buttons { padding-left: 24px !important; padding-right: 24px !important; } .elementor-63 .elementor-element.elementor-element-8a47858 .ha-cart-upsell, .elementor-63 .elementor-element.elementor-element-8a47858 .mini-cart-upsell, .elementor-63 .elementor-element.elementor-element-8a47858 .cart-upsell { margin-left: 24px !important; margin-right: 24px !important; } .elementor-63 .elementor-element.elementor-element-8a47858 .woocommerce-form-coupon, .elementor-63 .elementor-element.elementor-element-8a47858 .elementor-menu-cart__coupon, .elementor-63 .elementor-element.elementor-element-8a47858 .mini-cart-coupon { margin-left: 24px !important; margin-right: 24px !important; } } /* ========================================================== TABLET CART ICON ========================================================== */ @media (min-width: 768px) and (max-width: 1024px) { .elementor-63 .elementor-element.elementor-element-8a47858 .elementor-menu-cart__toggle_button svg, .elementor-63 .elementor-element.elementor-element-8a47858 .elementor-menu-cart__toggle_button i, .elementor-63 .elementor-element.elementor-element-8a47858 .elementor-menu-cart__toggle .elementor-button svg, .elementor-63 .elementor-element.elementor-element-8a47858 .elementor-menu-cart__toggle .elementor-button i { width: 17px !important; height: 17px !important; font-size: 17px !important; } .elementor-63 .elementor-element.elementor-element-8a47858 .elementor-button-icon-qty { top: -6px !important; right: -7px !important; min-width: 16px !important; height: 16px !important; padding: 0 3px !important; font-size: 8px !important; line-height: 12px !important; } } /* ========================================================== MOBILE ========================================================== */ @media (max-width: 767px) { /* ------------------------------------------------------ MOBILE HEADER CART ICON Larger than search/account in main header ------------------------------------------------------ */ .elementor-63 .elementor-element.elementor-element-8a47858 .elementor-menu-cart__toggle_button svg, .elementor-63 .elementor-element.elementor-element-8a47858 .elementor-menu-cart__toggle_button i, .elementor-63 .elementor-element.elementor-element-8a47858 .elementor-menu-cart__toggle .elementor-button svg, .elementor-63 .elementor-element.elementor-element-8a47858 .elementor-menu-cart__toggle .elementor-button i { width: 20px !important; height: 20px !important; font-size: 20px !important; } .elementor-63 .elementor-element.elementor-element-8a47858 .elementor-button-icon-qty { top: -5px !important; right: -6px !important; min-width: 16px !important; height: 16px !important; padding: 0 3px !important; font-size: 8px !important; line-height: 12px !important; } /* ------------------------------------------------------ FULL USABLE MOBILE DRAWER ------------------------------------------------------ */ .elementor-63 .elementor-element.elementor-element-8a47858 .elementor-menu-cart__container { height: 100vh !important; height: 100dvh !important; max-height: 100dvh !important; overflow: hidden !important; } .elementor-63 .elementor-element.elementor-element-8a47858 .elementor-menu-cart__main { top: 0 !important; right: 0 !important; bottom: 0 !important; width: min(94vw, 430px) !important; max-width: 94vw !important; height: 100vh !important; height: 100dvh !important; min-height: 0 !important; max-height: 100dvh !important; overflow: hidden !important; } /* ------------------------------------------------------ MOBILE HEADER ------------------------------------------------------ */ .elementor-63 .elementor-element.elementor-element-8a47858 .elementor-menu-cart__main::before { flex: 0 0 66px !important; min-height: 66px !important; height: 66px !important; padding: 23px 58px 18px 54px !important; font-size: 16px !important; letter-spacing: 2.1px !important; } .elementor-63 .elementor-element.elementor-element-8a47858 .elementor-menu-cart__main::after { top: 20px !important; left: 20px !important; width: 21px !important; height: 21px !important; font-size: 18px !important; } /* Large enough to tap comfortably */ .elementor-63 .elementor-element.elementor-element-8a47858 .elementor-menu-cart__close-button, .elementor-63 .elementor-element.elementor-element-8a47858 .elementor-menu-cart__close-button-custom { top: 12px !important; right: 12px !important; width: 42px !important; height: 42px !important; min-width: 42px !important; min-height: 42px !important; } /* ------------------------------------------------------ MOBILE CONTENT ------------------------------------------------------ */ .elementor-63 .elementor-element.elementor-element-8a47858 .widget_shopping_cart_content { flex: 1 1 auto !important; min-height: 0 !important; height: auto !important; max-height: none !important; overflow: hidden !important; } /* ------------------------------------------------------ MOBILE PRODUCT SCROLL AREA ------------------------------------------------------ */ .elementor-63 .elementor-element.elementor-element-8a47858 .elementor-menu-cart__products { flex: 1 1 auto !important; min-height: 0 !important; height: auto !important; max-height: none !important; padding: 8px 14px 5px !important; overflow-y: auto !important; overflow-x: hidden !important; -webkit-overflow-scrolling: touch !important; overscroll-behavior: contain !important; touch-action: pan-y !important; } /* ------------------------------------------------------ MOBILE PRODUCT ROW ------------------------------------------------------ */ .elementor-63 .elementor-element.elementor-element-8a47858 .elementor-menu-cart__product { grid-template-columns: 68px minmax(0,1fr) 32px !important; gap: 10px !important; padding: 11px 0 !important; } .elementor-63 .elementor-element.elementor-element-8a47858 .elementor-menu-cart__product-image { width: 68px !important; height: 68px !important; min-width: 68px !important; } .elementor-63 .elementor-element.elementor-element-8a47858 .elementor-menu-cart__product-image img { width: 68px !important; height: 68px !important; border-radius: 10px !important; } .elementor-63 .elementor-element.elementor-element-8a47858 .elementor-menu-cart__product-name { margin-top: 2px !important; margin-bottom: 5px !important; font-size: 13px !important; line-height: 1.23 !important; } .elementor-63 .elementor-element.elementor-element-8a47858 .elementor-menu-cart__product-price, .elementor-63 .elementor-element.elementor-element-8a47858 .elementor-menu-cart__product-price .quantity { font-size: 11px !important; } .elementor-63 .elementor-element.elementor-element-8a47858 .elementor-menu-cart__product-remove { width: 32px !important; height: 32px !important; min-width: 32px !important; min-height: 32px !important; } /* ------------------------------------------------------ MOBILE UPSELL ------------------------------------------------------ */ .elementor-63 .elementor-element.elementor-element-8a47858 .ha-cart-upsell, .elementor-63 .elementor-element.elementor-element-8a47858 .mini-cart-upsell, .elementor-63 .elementor-element.elementor-element-8a47858 .cart-upsell { grid-template-columns: 48px minmax(0,1fr) auto !important; gap: 10px !important; margin: 10px 14px !important; padding: 13px !important; border-radius: 15px !important; } /* ------------------------------------------------------ MOBILE COUPON ------------------------------------------------------ */ .elementor-63 .elementor-element.elementor-element-8a47858 .woocommerce-form-coupon, .elementor-63 .elementor-element.elementor-element-8a47858 .elementor-menu-cart__coupon, .elementor-63 .elementor-element.elementor-element-8a47858 .mini-cart-coupon { grid-template-columns: minmax(0,1fr) 82px !important; gap: 7px !important; margin: 9px 14px 5px !important; } .elementor-63 .elementor-element.elementor-element-8a47858 .woocommerce-form-coupon input, .elementor-63 .elementor-element.elementor-element-8a47858 .elementor-menu-cart__coupon input, .elementor-63 .elementor-element.elementor-element-8a47858 .mini-cart-coupon input { height: 43px !important; padding: 0 12px !important; border-radius: 12px !important; font-size: 12px !important; } .elementor-63 .elementor-element.elementor-element-8a47858 .woocommerce-form-coupon button, .elementor-63 .elementor-element.elementor-element-8a47858 .elementor-menu-cart__coupon button, .elementor-63 .elementor-element.elementor-element-8a47858 .mini-cart-coupon button { height: 43px !important; padding: 0 10px !important; border-radius: 12px !important; font-size: 11px !important; } /* ------------------------------------------------------ MOBILE SUBTOTAL ------------------------------------------------------ */ .elementor-63 .elementor-element.elementor-element-8a47858 .elementor-menu-cart__subtotal { flex: 0 0 auto !important; margin: 0 14px !important; padding: 11px 0 !important; font-size: 12px !important; } .elementor-63 .elementor-element.elementor-element-8a47858 .elementor-menu-cart__subtotal .woocommerce-Price-amount { font-size: 13px !important; font-weight: 600 !important; } /* ------------------------------------------------------ MOBILE FOOTER ------------------------------------------------------ */ .elementor-63 .elementor-element.elementor-element-8a47858 .elementor-menu-cart__footer-buttons { flex: 0 0 auto !important; padding: 10px 14px calc( 12px + env(safe-area-inset-bottom) ) !important; background: #ffffff !important; border-top: 1px solid #f0f0f0 !important; } .elementor-63 .elementor-element.elementor-element-8a47858 .elementor-menu-cart__footer-buttons .elementor-button--checkout { width: 100% !important; min-height: 50px !important; padding: 12px 16px !important; font-size: 13px !important; } /* ------------------------------------------------------ MOBILE EMPTY CART ------------------------------------------------------ */ .elementor-63 .elementor-element.elementor-element-8a47858 .woocommerce-mini-cart__empty-message { padding: 55px 20px !important; font-size: 13px !important; } .elementor-63 .elementor-element.elementor-element-8a47858 .woocommerce-mini-cart__empty-message::before { font-size: 19px !important; } } /* ========================================================== SMALL MOBILE IPHONE / SMALL ANDROID ========================================================== */ @media (max-width: 390px) { /* Cart icon remains prominent */ .elementor-63 .elementor-element.elementor-element-8a47858 .elementor-menu-cart__toggle_button svg, .elementor-63 .elementor-element.elementor-element-8a47858 .elementor-menu-cart__toggle_button i, .elementor-63 .elementor-element.elementor-element-8a47858 .elementor-menu-cart__toggle .elementor-button svg, .elementor-63 .elementor-element.elementor-element-8a47858 .elementor-menu-cart__toggle .elementor-button i { width: 19px !important; height: 19px !important; font-size: 19px !important; } .elementor-63 .elementor-element.elementor-element-8a47858 .elementor-button-icon-qty { top: -5px !important; right: -5px !important; min-width: 15px !important; height: 15px !important; padding: 0 3px !important; font-size: 7.5px !important; line-height: 11px !important; } .elementor-63 .elementor-element.elementor-element-8a47858 .elementor-menu-cart__main { width: 96vw !important; max-width: 96vw !important; } .elementor-63 .elementor-element.elementor-element-8a47858 .elementor-menu-cart__products { padding-left: 11px !important; padding-right: 11px !important; } .elementor-63 .elementor-element.elementor-element-8a47858 .elementor-menu-cart__product { grid-template-columns: 62px minmax(0,1fr) 30px !important; gap: 8px !important; } .elementor-63 .elementor-element.elementor-element-8a47858 .elementor-menu-cart__product-image { width: 62px !important; height: 62px !important; min-width: 62px !important; } .elementor-63 .elementor-element.elementor-element-8a47858 .elementor-menu-cart__product-image img { width: 62px !important; height: 62px !important; } .elementor-63 .elementor-element.elementor-element-8a47858 .elementor-menu-cart__product-name { font-size: 12px !important; } .elementor-63 .elementor-element.elementor-element-8a47858 .elementor-menu-cart__product-price, .elementor-63 .elementor-element.elementor-element-8a47858 .elementor-menu-cart__product-price .quantity { font-size: 10.5px !important; } .elementor-63 .elementor-element.elementor-element-8a47858 .elementor-menu-cart__subtotal { margin-left: 11px !important; margin-right: 11px !important; } .elementor-63 .elementor-element.elementor-element-8a47858 .elementor-menu-cart__footer-buttons { padding-left: 11px !important; padding-right: 11px !important; } .elementor-63 .elementor-element.elementor-element-8a47858 .ha-cart-upsell, .elementor-63 .elementor-element.elementor-element-8a47858 .mini-cart-upsell, .elementor-63 .elementor-element.elementor-element-8a47858 .cart-upsell { margin-left: 11px !important; margin-right: 11px !important; } .elementor-63 .elementor-element.elementor-element-8a47858 .woocommerce-form-coupon, .elementor-63 .elementor-element.elementor-element-8a47858 .elementor-menu-cart__coupon, .elementor-63 .elementor-element.elementor-element-8a47858 .mini-cart-coupon { margin-left: 11px !important; margin-right: 11px !important; } } /* ========================================================== VERY SMALL MOBILE ========================================================== */ @media (max-width: 350px) { .elementor-63 .elementor-element.elementor-element-8a47858 .elementor-menu-cart__toggle_button svg, .elementor-63 .elementor-element.elementor-element-8a47858 .elementor-menu-cart__toggle_button i, .elementor-63 .elementor-element.elementor-element-8a47858 .elementor-menu-cart__toggle .elementor-button svg, .elementor-63 .elementor-element.elementor-element-8a47858 .elementor-menu-cart__toggle .elementor-button i { width: 18px !important; height: 18px !important; font-size: 18px !important; } .elementor-63 .elementor-element.elementor-element-8a47858 .elementor-button-icon-qty { top: -4px !important; right: -4px !important; min-width: 14px !important; height: 14px !important; padding: 0 2px !important; font-size: 7px !important; line-height: 10px !important; } } /* ========================================================== VERY SHORT MOBILE SCREENS Helps landscape phones and devices where browser navigation consumes a large portion of the viewport. ========================================================== */ @media (max-width: 767px) and (max-height: 600px) { .elementor-63 .elementor-element.elementor-element-8a47858 .elementor-menu-cart__main::before { flex-basis: 58px !important; min-height: 58px !important; height: 58px !important; padding-top: 20px !important; padding-bottom: 15px !important; } .elementor-63 .elementor-element.elementor-element-8a47858 .elementor-menu-cart__main::after { top: 17px !important; } .elementor-63 .elementor-element.elementor-element-8a47858 .elementor-menu-cart__close-button, .elementor-63 .elementor-element.elementor-element-8a47858 .elementor-menu-cart__close-button-custom { top: 8px !important; } .elementor-63 .elementor-element.elementor-element-8a47858 .elementor-menu-cart__product { padding-top: 8px !important; padding-bottom: 8px !important; } .elementor-63 .elementor-element.elementor-element-8a47858 .elementor-menu-cart__subtotal { padding-top: 8px !important; padding-bottom: 8px !important; } .elementor-63 .elementor-element.elementor-element-8a47858 .elementor-menu-cart__footer-buttons { padding-top: 8px !important; } .elementor-63 .elementor-element.elementor-element-8a47858 .elementor-menu-cart__footer-buttons .elementor-button--checkout { min-height: 46px !important; } } /* ========================================================== IOS SAFE AREA ========================================================== */ @supports ( padding: max(0px) ) { @media (max-width: 767px) { .elementor-63 .elementor-element.elementor-element-8a47858 .elementor-menu-cart__main { padding-top: env( safe-area-inset-top ) !important; } .elementor-63 .elementor-element.elementor-element-8a47858 .elementor-menu-cart__footer-buttons { padding-bottom: max( 12px, env( safe-area-inset-bottom ) ) !important; } } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-98ecfd5 *//* ========================================================== HERAMINO / HISAMINO HEADER DESKTOP DESIGN PRESERVED MOBILE/TABLET SIZING IMPROVED ========================================================== */ .ha-main-header { position: relative; display: flex; align-items: center; justify-content: space-between; width: 100%; height: 64px; min-height: 64px; margin: 0; padding: 0 42px; box-sizing: border-box; background: #ffffff; border-bottom: 1px solid #ececec; overflow: visible; } /* ========================================================== LEFT NAVIGATION ========================================================== */ .ha-main-header .ha-header-nav { position: relative; display: flex; align-items: center; flex: 0 0 auto; margin: 0; padding: 0; z-index: 5; } .ha-main-header .ha-header-nav .elementor-widget-container { display: flex; align-items: center; margin: 0; padding: 0; } .ha-main-header .ha-header-nav .elementor-nav-menu--main { display: flex; align-items: center; margin: 0; padding: 0; } .ha-main-header .ha-header-nav .elementor-nav-menu { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 28px; margin: 0; padding: 0; } .ha-main-header .ha-header-nav .elementor-nav-menu > li { display: flex; align-items: center; flex: 0 0 auto; margin: 0; padding: 0; } .ha-main-header .ha-header-nav .elementor-item { display: flex; align-items: center; margin: 0; padding: 0; min-height: 0; color: #555555; font-family: inherit; font-size: 14px; font-weight: 400; line-height: 1; white-space: nowrap; background: transparent; text-decoration: none; } .ha-main-header .ha-header-nav .elementor-item::before, .ha-main-header .ha-header-nav .elementor-item::after { display: none; } .ha-main-header .ha-header-nav .elementor-item:hover, .ha-main-header .ha-header-nav .elementor-item.elementor-item-active { color: #d94f79; } /* ========================================================== CENTER BRAND SWITCH ========================================================== */ .ha-main-header .ha-brand-switch { position: absolute; top: 50%; left: 50%; display: flex; flex-direction: row; align-items: center; justify-content: center; width: auto; margin: 0; padding: 0; transform: translate(-50%, -50%); z-index: 4; } .ha-main-header .ha-her-logo, .ha-main-header .ha-his-logo { display: flex; align-items: center; justify-content: center; margin: 0; } .ha-main-header .ha-her-logo { position: relative; padding-right: 20px; } .ha-main-header .ha-his-logo { padding-left: 20px; } /* Divider */ .ha-main-header .ha-her-logo::after { content: ""; position: absolute; top: 50%; right: 0; width: 1px; height: 26px; background: #dedede; transform: translateY(-50%); } .ha-main-header .ha-her-logo .elementor-widget-container, .ha-main-header .ha-his-logo .elementor-widget-container { display: flex; align-items: center; justify-content: center; margin: 0; padding: 0; } .ha-main-header .ha-her-logo img, .ha-main-header .ha-his-logo img { display: block; width: auto; height: auto; max-width: 132px; max-height: 36px; margin: 0; padding: 0; object-fit: contain; } /* ========================================================== RIGHT ICONS ========================================================== */ .ha-main-header .ha-header-actions { position: relative; display: flex; flex-direction: row; align-items: center; justify-content: flex-end; flex: 0 0 auto; gap: 8px; margin: 0; padding: 0; z-index: 5; } .ha-main-header .ha-header-actions > .elementor-element { position: relative; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; min-width: 40px; min-height: 40px; margin: 0; padding: 0; box-sizing: border-box; background: #ffffff; border: 1px solid #e5e5e5; border-radius: 50%; box-shadow: none; } .ha-main-header .ha-header-actions > .elementor-element > .elementor-widget-container { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; margin: 0; padding: 0; background: transparent; border: 0; border-radius: 50%; box-shadow: none; } .ha-main-header .ha-header-actions svg { width: 17px; height: 17px; margin: 0; } .ha-main-header .ha-header-actions i { font-size: 17px; } /* ========================================================== WOOCOMMERCE CART CLEANUP ========================================================== */ .ha-main-header .ha-header-actions .elementor-widget-woocommerce-menu-cart, .ha-main-header .ha-header-actions .elementor-menu-cart__toggle, .ha-main-header .ha-header-actions .elementor-menu-cart__toggle_wrapper, .ha-main-header .ha-header-actions .elementor-menu-cart__toggle_button, .ha-main-header .ha-header-actions .elementor-menu-cart__toggle .elementor-button { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; min-width: 0; min-height: 0; margin: 0; padding: 0; background: transparent; border: 0; outline: 0; border-radius: 50%; box-shadow: none; } .ha-main-header .ha-header-actions .elementor-menu-cart__toggle_button:hover, .ha-main-header .ha-header-actions .elementor-menu-cart__toggle_button:focus, .ha-main-header .ha-header-actions .elementor-menu-cart__toggle .elementor-button:hover, .ha-main-header .ha-header-actions .elementor-menu-cart__toggle .elementor-button:focus { background: transparent; border: 0; outline: 0; box-shadow: none; } /* Cart counter */ .ha-main-header .ha-header-actions .elementor-button-icon-qty { position: absolute; top: -3px; right: -4px; display: flex; align-items: center; justify-content: center; min-width: 17px; height: 17px; padding: 0 4px; background: #e85b59; color: #ffffff; border-radius: 999px; font-size: 9px; font-weight: 700; line-height: 17px; } /* ========================================================== DESKTOP 1025px+ ALWAYS NORMAL MENU / NEVER HAMBURGER ========================================================== */ @media (min-width: 1025px) { .ha-main-header .ha-header-nav .elementor-nav-menu--main { display: flex !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; } .ha-main-header .ha-header-nav .elementor-menu-toggle { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } .ha-main-header .ha-header-nav .elementor-nav-menu--dropdown { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } } /* ========================================================== WIDE DESKTOP 1440px+ ========================================================== */ @media (min-width: 1440px) { .ha-main-header { height: 66px; min-height: 66px; padding-right: 58px; padding-left: 58px; } .ha-main-header .ha-header-nav .elementor-nav-menu { gap: 30px; } .ha-main-header .ha-header-nav .elementor-item { font-size: 14px; } .ha-main-header .ha-her-logo img, .ha-main-header .ha-his-logo img { max-width: 136px; } .ha-main-header .ha-her-logo { padding-right: 20px; } .ha-main-header .ha-his-logo { padding-left: 20px; } .ha-main-header .ha-header-actions { gap: 8px; } } /* ========================================================== ULTRAWIDE 1800px+ ========================================================== */ @media (min-width: 1800px) { .ha-main-header { padding-right: 76px; padding-left: 76px; } .ha-main-header .ha-header-nav .elementor-nav-menu { gap: 32px; } } /* ========================================================== LAPTOP 1025px - 1366px ========================================================== */ @media (min-width: 1025px) and (max-width: 1366px) { .ha-main-header { height: 62px; min-height: 62px; padding-right: 28px; padding-left: 28px; } .ha-main-header .ha-header-nav .elementor-nav-menu { gap: 23px; } .ha-main-header .ha-header-nav .elementor-item { font-size: 13px; } .ha-main-header .ha-her-logo { padding-right: 18px; } .ha-main-header .ha-his-logo { padding-left: 18px; } .ha-main-header .ha-her-logo::after { height: 23px; } .ha-main-header .ha-her-logo img, .ha-main-header .ha-his-logo img { max-width: 120px; max-height: 33px; } .ha-main-header .ha-header-actions { gap: 7px; } .ha-main-header .ha-header-actions > .elementor-element { width: 37px; height: 37px; min-width: 37px; min-height: 37px; } .ha-main-header .ha-header-actions svg { width: 16px; height: 16px; } .ha-main-header .ha-header-actions i { font-size: 16px; } } /* ========================================================== TABLET 768px - 1024px HAMBURGER ONLY ========================================================== */ @media (min-width: 768px) and (max-width: 1024px) { .ha-main-header { height: 58px; min-height: 58px; padding-right: 13px; padding-left: 13px; } /* Navigation */ .ha-main-header .ha-header-nav { display: flex !important; align-items: center !important; justify-content: flex-start !important; width: 36px !important; height: 58px !important; flex: 0 0 36px !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; } .ha-main-header .ha-header-nav .elementor-widget-container { display: flex !important; align-items: center !important; justify-content: flex-start !important; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; } /* Hide normal desktop menu */ .ha-main-header .ha-header-nav .elementor-nav-menu--main { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } /* Show hamburger */ .ha-main-header .ha-header-nav .elementor-menu-toggle { position: relative !important; display: flex !important; align-items: center !important; justify-content: center !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; width: 34px !important; height: 34px !important; min-width: 34px !important; min-height: 34px !important; margin: 0 !important; padding: 0 !important; color: #222222 !important; background: transparent !important; border: 0 !important; outline: 0 !important; border-radius: 0 !important; box-shadow: none !important; font-size: 0 !important; line-height: 1 !important; cursor: pointer !important; overflow: visible !important; z-index: 1002 !important; } /* Prevent pseudo icons */ .ha-main-header .ha-header-nav .elementor-menu-toggle::before, .ha-main-header .ha-header-nav .elementor-menu-toggle::after { content: none !important; display: none !important; } /* Elementor hamburger icon */ .ha-main-header .ha-header-nav .elementor-menu-toggle .elementor-menu-toggle__icon--open { display: block !important; } .ha-main-header .ha-header-nav .elementor-menu-toggle .elementor-menu-toggle__icon--close { display: none !important; } .ha-main-header .ha-header-nav .elementor-menu-toggle svg { width: 23px !important; height: 23px !important; } /* * Native Elementor dropdown is not used on tablet. * Hamburger opens the custom popup instead. */ .ha-main-header .ha-header-nav .elementor-nav-menu--dropdown { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } /* Logos */ .ha-main-header .ha-her-logo { padding-right: 12px; } .ha-main-header .ha-his-logo { padding-left: 12px; } .ha-main-header .ha-her-logo::after { height: 19px; } .ha-main-header .ha-her-logo img, .ha-main-header .ha-his-logo img { max-width: 92px; max-height: 28px; } /* Icons */ .ha-main-header .ha-header-actions { height: 58px; gap: 4px; } .ha-main-header .ha-header-actions > .elementor-element { width: 34px; height: 34px; min-width: 34px; min-height: 34px; } .ha-main-header .ha-header-actions svg { width: 15px; height: 15px; } .ha-main-header .ha-header-actions i { font-size: 15px; } } /* ========================================================== MOBILE IPHONE / ANDROID ========================================================== */ @media (max-width: 767px) { .ha-main-header { position: relative; display: flex; align-items: center; justify-content: space-between; height: 58px; min-height: 58px; padding-right: 8px; padding-left: 8px; } /* ====================================================== MOBILE NAV ====================================================== */ .ha-main-header .ha-header-nav { display: flex; align-items: center; justify-content: flex-start; width: 34px; height: 58px; flex: 0 0 34px; margin: 0; padding: 0; overflow: visible !important; } .ha-main-header .ha-header-nav .elementor-widget-container { display: flex; align-items: center; justify-content: flex-start; width: 100%; height: 100%; margin: 0; padding: 0; overflow: visible !important; } /* Desktop menu hidden */ .ha-main-header .ha-header-nav .elementor-nav-menu--main { display: none !important; } /* Mobile toggle */ .ha-main-header .ha-header-nav .elementor-menu-toggle { position: relative !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 32px !important; height: 32px !important; min-width: 32px !important; min-height: 32px !important; margin: 0 !important; padding: 0 !important; color: #222222 !important; background: transparent !important; border: 0 !important; outline: 0 !important; border-radius: 0 !important; box-shadow: none !important; font-size: 0; line-height: 1; cursor: pointer !important; overflow: visible !important; z-index: 1002 !important; } /* Keep Elementor's real open/close icons */ .ha-main-header .ha-header-nav .elementor-menu-toggle::before, .ha-main-header .ha-header-nav .elementor-menu-toggle::after { content: none !important; display: none !important; } .ha-main-header .ha-header-nav .elementor-menu-toggle .elementor-menu-toggle__icon--open { display: block !important; } .ha-main-header .ha-header-nav .elementor-menu-toggle .elementor-menu-toggle__icon--close { display: none !important; } .ha-main-header .ha-header-nav .elementor-menu-toggle.elementor-active .elementor-menu-toggle__icon--open, .ha-main-header .ha-header-nav .elementor-menu-toggle[aria-expanded="true"] .elementor-menu-toggle__icon--open { display: none !important; } .ha-main-header .ha-header-nav .elementor-menu-toggle.elementor-active .elementor-menu-toggle__icon--close, .ha-main-header .ha-header-nav .elementor-menu-toggle[aria-expanded="true"] .elementor-menu-toggle__icon--close { display: block !important; } .ha-main-header .ha-header-nav .elementor-menu-toggle svg { width: 23px !important; height: 23px !important; } /* ====================================================== MOBILE DROPDOWN ====================================================== */ .ha-main-header .ha-header-nav .elementor-nav-menu--dropdown { position: absolute !important; top: 58px !important; left: -10px !important; width: 225px !important; min-width: 225px !important; max-width: calc(100vw - 20px) !important; margin: 0 !important; padding: 8px 12px !important; box-sizing: border-box !important; background: #ffffff !important; border-top: 1px solid #eeeeee !important; border-right: 1px solid #eeeeee !important; border-bottom: 1px solid #eeeeee !important; border-radius: 0 0 10px 0 !important; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08) !important; z-index: 1001 !important; } .ha-main-header .ha-header-nav .elementor-menu-toggle[aria-expanded="false"] ~ .elementor-nav-menu--dropdown { display: none !important; } .ha-main-header .ha-header-nav .elementor-menu-toggle[aria-expanded="true"] ~ .elementor-nav-menu--dropdown { display: block !important; } .ha-main-header .ha-header-nav .elementor-menu-toggle.elementor-active ~ .elementor-nav-menu--dropdown { display: block !important; } .ha-main-header .ha-header-nav .elementor-nav-menu--dropdown .elementor-nav-menu { display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; } .ha-main-header .ha-header-nav .elementor-nav-menu--dropdown li { display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; } .ha-main-header .ha-header-nav .elementor-nav-menu--dropdown .elementor-item { display: flex !important; align-items: center !important; width: 100% !important; min-height: 42px !important; margin: 0 !important; padding: 10px 8px !important; color: #333333 !important; font-size: 13px !important; font-weight: 500 !important; line-height: 1.2 !important; background: transparent !important; } /* ====================================================== MOBILE BRAND SWITCH ====================================================== */ .ha-main-header .ha-brand-switch { position: absolute !important; top: 50% !important; left: 50% !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; transform: translate(-50%, -50%) !important; gap: 0 !important; z-index: 4 !important; } .ha-main-header .ha-her-logo, .ha-main-header .ha-his-logo { width: auto !important; max-width: none !important; flex: 0 0 auto !important; margin: 0 !important; } .ha-main-header .ha-her-logo { position: relative !important; padding: 0 9px 0 0 !important; } .ha-main-header .ha-his-logo { padding: 0 0 0 9px !important; } .ha-main-header .ha-her-logo::after { content: "" !important; position: absolute !important; top: 50% !important; right: 0 !important; width: 1px !important; height: 21px !important; background: #dedede !important; transform: translateY(-50%) !important; } .ha-main-header .ha-her-logo .elementor-widget-container, .ha-main-header .ha-his-logo .elementor-widget-container { width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; } .ha-main-header .ha-her-logo img, .ha-main-header .ha-his-logo img { display: block !important; width: auto !important; height: auto !important; max-width: 76px !important; max-height: 27px !important; margin: 0 !important; padding: 0 !important; object-fit: contain !important; } /* ====================================================== MOBILE ACTIONS ====================================================== */ .ha-main-header .ha-header-actions { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: flex-end !important; width: auto !important; min-width: 102px !important; height: 58px; flex: 0 0 auto !important; gap: 2px; margin: 0; padding: 0; overflow: visible !important; } .ha-main-header .ha-header-actions .ha-account-icon { display: flex !important; } .ha-main-header .ha-header-actions > .elementor-element { position: relative; display: flex !important; align-items: center; justify-content: center; flex: 0 0 32px !important; width: 32px !important; height: 32px !important; min-width: 32px !important; min-height: 32px !important; margin: 0; padding: 0; visibility: visible !important; opacity: 1 !important; background: transparent; border: 0; border-radius: 50%; overflow: visible !important; } .ha-main-header .ha-header-actions svg { width: 17px; height: 17px; } .ha-main-header .ha-header-actions i { font-size: 17px; } /* Menu cart remains visible and receives a larger slot */ .ha-main-header .ha-header-actions .elementor-widget-woocommerce-menu-cart { display: flex !important; width: 36px !important; height: 36px !important; min-width: 36px !important; min-height: 36px !important; flex: 0 0 36px !important; visibility: visible !important; opacity: 1 !important; overflow: visible !important; } .ha-main-header .ha-header-actions .elementor-widget-woocommerce-menu-cart .elementor-widget-container, .ha-main-header .ha-header-actions .elementor-menu-cart__toggle, .ha-main-header .ha-header-actions .elementor-menu-cart__toggle_wrapper { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; min-width: 0 !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; } .ha-main-header .ha-header-actions .elementor-menu-cart__toggle_button, .ha-main-header .ha-header-actions .elementor-menu-cart__toggle .elementor-button { position: relative !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; min-width: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; outline: 0 !important; border-radius: 50% !important; box-shadow: none !important; overflow: visible !important; } .ha-main-header .ha-header-actions .elementor-menu-cart__toggle_button svg, .ha-main-header .ha-header-actions .elementor-menu-cart__toggle .elementor-button svg { width: 20px; height: 20px; } .ha-main-header .ha-header-actions .elementor-menu-cart__toggle_button i, .ha-main-header .ha-header-actions .elementor-menu-cart__toggle .elementor-button i { font-size: 20px; } /* Cart counter */ .ha-main-header .ha-header-actions .elementor-button-icon-qty { top: -2px; right: -2px; min-width: 16px; height: 16px; padding: 0 3px; font-size: 8px; line-height: 16px; } } /* ========================================================== LARGE MOBILE 391 - 430px ========================================================== */ @media (min-width: 391px) and (max-width: 430px) { .ha-main-header { padding-right: 7px; padding-left: 7px; } .ha-main-header .ha-her-logo img, .ha-main-header .ha-his-logo img { max-width: 76px !important; } } /* ========================================================== STANDARD IPHONE / ANDROID <= 390px ========================================================== */ @media (max-width: 390px) { .ha-main-header { height: 56px; min-height: 56px; padding-right: 5px; padding-left: 5px; } .ha-main-header .ha-header-nav { width: 32px; height: 56px; flex-basis: 32px; } .ha-main-header .ha-header-nav .elementor-menu-toggle { width: 30px !important; height: 30px !important; min-width: 30px !important; min-height: 30px !important; } .ha-main-header .ha-header-nav .elementor-menu-toggle svg { width: 22px !important; height: 22px !important; } .ha-main-header .ha-header-nav .elementor-nav-menu--dropdown { top: 56px !important; } .ha-main-header .ha-her-logo { padding-right: 7px !important; } .ha-main-header .ha-his-logo { padding-left: 7px !important; } .ha-main-header .ha-her-logo::after { height: 19px !important; } .ha-main-header .ha-her-logo img, .ha-main-header .ha-his-logo img { max-width: 70px !important; max-height: 25px !important; } .ha-main-header .ha-header-actions { min-width: 94px !important; height: 56px; gap: 1px; } .ha-main-header .ha-header-actions > .elementor-element { flex: 0 0 29px !important; width: 29px !important; height: 29px !important; min-width: 29px !important; min-height: 29px !important; } .ha-main-header .ha-header-actions svg { width: 16px; height: 16px; } .ha-main-header .ha-header-actions i { font-size: 16px; } .ha-main-header .ha-header-actions .elementor-widget-woocommerce-menu-cart { flex: 0 0 34px !important; width: 34px !important; height: 34px !important; min-width: 34px !important; min-height: 34px !important; } .ha-main-header .ha-header-actions .elementor-menu-cart__toggle_button svg, .ha-main-header .ha-header-actions .elementor-menu-cart__toggle .elementor-button svg { width: 19px; height: 19px; } .ha-main-header .ha-header-actions .elementor-menu-cart__toggle_button i, .ha-main-header .ha-header-actions .elementor-menu-cart__toggle .elementor-button i { font-size: 19px; } } /* ========================================================== VERY SMALL PHONES <= 350px ========================================================== */ @media (max-width: 350px) { .ha-main-header { padding-right: 3px; padding-left: 3px; } .ha-main-header .ha-header-nav { width: 29px; flex-basis: 29px; } .ha-main-header .ha-header-nav .elementor-menu-toggle { width: 28px !important; height: 28px !important; min-width: 28px !important; min-height: 28px !important; } .ha-main-header .ha-header-nav .elementor-menu-toggle svg { width: 20px !important; height: 20px !important; } .ha-main-header .ha-her-logo { padding-right: 5px !important; } .ha-main-header .ha-his-logo { padding-left: 5px !important; } .ha-main-header .ha-her-logo img, .ha-main-header .ha-his-logo img { max-width: 63px !important; max-height: 23px !important; } .ha-main-header .ha-header-actions { min-width: 85px !important; gap: 0; } .ha-main-header .ha-header-actions > .elementor-element { flex: 0 0 27px !important; width: 27px !important; height: 27px !important; min-width: 27px !important; min-height: 27px !important; } .ha-main-header .ha-header-actions svg { width: 15px; height: 15px; } .ha-main-header .ha-header-actions i { font-size: 15px; } .ha-main-header .ha-header-actions .elementor-widget-woocommerce-menu-cart { flex: 0 0 31px !important; width: 31px !important; height: 31px !important; min-width: 31px !important; min-height: 31px !important; } .ha-main-header .ha-header-actions .elementor-menu-cart__toggle_button svg, .ha-main-header .ha-header-actions .elementor-menu-cart__toggle .elementor-button svg { width: 18px; height: 18px; } } /* ========================================================== LOCK DESKTOP / TABLET MENU ITEMS IN PLACE ========================================================== */ .ha-main-header .ha-header-nav .elementor-nav-menu--main > .elementor-nav-menu > li { position: relative !important; margin: 0 !important; padding: 0 !important; transform: none !important; translate: none !important; scale: none !important; animation: none !important; transition: none !important; } .ha-main-header .ha-header-nav .elementor-nav-menu--main > .elementor-nav-menu > li:hover, .ha-main-header .ha-header-nav .elementor-nav-menu--main > .elementor-nav-menu > li:focus, .ha-main-header .ha-header-nav .elementor-nav-menu--main > .elementor-nav-menu > li:focus-within { margin: 0 !important; padding: 0 !important; transform: none !important; translate: none !important; scale: none !important; top: auto !important; left: auto !important; } .ha-main-header .ha-header-nav .elementor-nav-menu--main > .elementor-nav-menu > li > .elementor-item { position: relative !important; margin: 0 !important; padding: 0 !important; transform: none !important; translate: none !important; scale: none !important; top: auto !important; left: auto !important; font-weight: 400 !important; letter-spacing: normal !important; animation: none !important; transition: color 0.2s ease !important; } .ha-main-header .ha-header-nav .elementor-nav-menu--main > .elementor-nav-menu > li > .elementor-item:hover, .ha-main-header .ha-header-nav .elementor-nav-menu--main > .elementor-nav-menu > li > .elementor-item:focus, .ha-main-header .ha-header-nav .elementor-nav-menu--main > .elementor-nav-menu > li > .elementor-item.elementor-item-active { margin: 0 !important; padding: 0 !important; transform: none !important; translate: none !important; scale: none !important; top: auto !important; left: auto !important; font-weight: 400 !important; letter-spacing: normal !important; color: #d94f79 !important; } .ha-main-header .ha-header-nav .elementor-nav-menu--main .elementor-item::before, .ha-main-header .ha-header-nav .elementor-nav-menu--main .elementor-item::after, .ha-main-header .ha-header-nav .elementor-nav-menu--main .elementor-item:hover::before, .ha-main-header .ha-header-nav .elementor-nav-menu--main .elementor-item:hover::after { content: none !important; display: none !important; width: 0 !important; height: 0 !important; transform: none !important; animation: none !important; transition: none !important; } /* ========================================================== BRAND SWITCH ACTIVE STATE ========================================================== */ .ha-main-header .ha-her-logo, .ha-main-header .ha-his-logo { transition: opacity .2s ease, transform .2s ease; } body.ha-brand-heramino .ha-main-header .ha-her-logo { opacity: 1; } body.ha-brand-heramino .ha-main-header .ha-his-logo { opacity: .42; } body.ha-brand-hisamino .ha-main-header .ha-her-logo { opacity: .42; } body.ha-brand-hisamino .ha-main-header .ha-his-logo { opacity: 1; } .ha-main-header .ha-her-logo:hover, .ha-main-header .ha-his-logo:hover { transform: none !important; } /* ========================================================== BRAND-AWARE HEADER MENU COLOR ========================================================== */ body.ha-brand-heramino { --ha-menu-accent: #D94F79; } body.ha-brand-hisamino { --ha-menu-accent: #1687D9; } body.ha-brand-heramino .ha-main-header .ha-header-nav .elementor-nav-menu--main .elementor-item:hover, body.ha-brand-heramino .ha-main-header .ha-header-nav .elementor-nav-menu--main .elementor-item:focus, body.ha-brand-heramino .ha-main-header .ha-header-nav .elementor-nav-menu--main .elementor-item.elementor-item-active, body.ha-brand-heramino .ha-main-header .ha-header-nav .elementor-nav-menu--main .current-menu-item > .elementor-item, body.ha-brand-hisamino .ha-main-header .ha-header-nav .elementor-nav-menu--main .elementor-item:hover, body.ha-brand-hisamino .ha-main-header .ha-header-nav .elementor-nav-menu--main .elementor-item:focus, body.ha-brand-hisamino .ha-main-header .ha-header-nav .elementor-nav-menu--main .elementor-item.elementor-item-active, body.ha-brand-hisamino .ha-main-header .ha-header-nav .elementor-nav-menu--main .current-menu-item > .elementor-item { color: var(--ha-menu-accent) !important; } /* Mobile dropdown */ body.ha-brand-heramino .ha-main-header .ha-header-nav .elementor-nav-menu--dropdown .elementor-item:hover, body.ha-brand-heramino .ha-main-header .ha-header-nav .elementor-nav-menu--dropdown .elementor-item.elementor-item-active, body.ha-brand-hisamino .ha-main-header .ha-header-nav .elementor-nav-menu--dropdown .elementor-item:hover, body.ha-brand-hisamino .ha-main-header .ha-header-nav .elementor-nav-menu--dropdown .elementor-item.elementor-item-active { color: var(--ha-menu-accent) !important; } /* ========================================================== DESKTOP + TABLET BRAND DIVIDER ALIGNMENT FIX ========================================================== */ @media (min-width: 768px) { .ha-main-header .ha-brand-switch { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; width: auto !important; max-width: none !important; gap: 0 !important; } .ha-main-header .ha-her-logo, .ha-main-header .ha-his-logo { width: auto !important; max-width: none !important; flex: 0 0 auto !important; margin: 0 !important; } .ha-main-header .ha-her-logo > .elementor-widget-container, .ha-main-header .ha-his-logo > .elementor-widget-container { width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; } .ha-main-header .ha-her-logo { position: relative !important; padding-right: 22px !important; } .ha-main-header .ha-his-logo { padding-left: 22px !important; } .ha-main-header .ha-her-logo::after { content: "" !important; position: absolute !important; top: 50% !important; right: 0 !important; width: 1px !important; height: 26px !important; background: #dedede !important; transform: translateY(-50%) !important; } } /* Laptop divider spacing */ @media (min-width: 1025px) and (max-width: 1366px) { .ha-main-header .ha-her-logo { padding-right: 18px !important; } .ha-main-header .ha-his-logo { padding-left: 18px !important; } .ha-main-header .ha-her-logo::after { height: 23px !important; } } /* Tablet divider spacing */ @media (min-width: 768px) and (max-width: 1024px) { .ha-main-header .ha-her-logo { padding-right: 12px !important; } .ha-main-header .ha-his-logo { padding-left: 12px !important; } .ha-main-header .ha-her-logo::after { height: 19px !important; } } /* ========================================================== FINAL RESPONSIVE NAV LOCK DESKTOP = NORMAL MENU TABLET + MOBILE = HAMBURGER ========================================================== */ /* ========================================================== DESKTOP / LAPTOP / WIDE DESKTOP 1025px AND ABOVE ========================================================== */ @media (min-width: 1025px) { /* Force normal desktop menu visible */ .ha-main-header .ha-header-nav .elementor-nav-menu--main { display: flex !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; } /* Force hamburger completely gone */ .ha-main-header .ha-header-nav .elementor-menu-toggle { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; width: 0 !important; height: 0 !important; min-width: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; } /* Hide Elementor dropdown version on desktop */ .ha-main-header .ha-header-nav .elementor-nav-menu--dropdown { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } } /* ========================================================== TABLET + MOBILE 1024px AND BELOW ========================================================== */ @media (max-width: 1024px) { /* Hide desktop menu */ .ha-main-header .ha-header-nav .elementor-nav-menu--main { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } /* Show hamburger */ .ha-main-header .ha-header-nav .elementor-menu-toggle { display: flex !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; } }/* End custom CSS */