.elementor-44 .elementor-element.elementor-element-53e718b{--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;border-style:none;--border-style:none;box-shadow:0px 6px 18px -6px rgba(0, 0, 0, 0.08);--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-44 .elementor-element.elementor-element-53e718b:not(.elementor-motion-effects-element-type-background), .elementor-44 .elementor-element.elementor-element-53e718b > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-44 .elementor-element.elementor-element-e45101b{--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:center;--gap:24px 24px;--row-gap:24px;--column-gap:24px;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;--border-radius:0px 0px 0px 0px;box-shadow:0px 6px 20px -8px rgba(0, 0, 0, 0.08);--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:-11px;}.elementor-44 .elementor-element.elementor-element-e45101b:not(.elementor-motion-effects-element-type-background), .elementor-44 .elementor-element.elementor-element-e45101b > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-44 .elementor-element.elementor-element-6372f3a{--display:flex;--justify-content:flex-start;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-widget-theme-site-logo .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-44 .elementor-element.elementor-element-718e1aa > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-44 .elementor-element.elementor-element-718e1aa img{width:140px;}.elementor-44 .elementor-element.elementor-element-ab3ca71{--display:flex;--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-44 .elementor-element.elementor-element-ab3ca71:not(.elementor-motion-effects-element-type-background), .elementor-44 .elementor-element.elementor-element-ab3ca71 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-widget-nav-menu .elementor-nav-menu .elementor-item{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item{color:var( --e-global-color-text );fill:var( --e-global-color-text );}.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item:hover, .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.elementor-item-active, .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.highlighted, .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item:focus{color:var( --e-global-color-accent );fill:var( --e-global-color-accent );}.elementor-widget-nav-menu .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:before, .elementor-widget-nav-menu .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:after{background-color:var( --e-global-color-accent );}.elementor-widget-nav-menu .e--pointer-framed .elementor-item:before, .elementor-widget-nav-menu .e--pointer-framed .elementor-item:after{border-color:var( --e-global-color-accent );}.elementor-widget-nav-menu{--e-nav-menu-divider-color:var( --e-global-color-text );}.elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-item, .elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-sub-item{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-44 .elementor-element.elementor-element-2da9bb2 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-44 .elementor-element.elementor-element-2da9bb2 .elementor-menu-toggle{margin:0 auto;}.elementor-44 .elementor-element.elementor-element-2da9bb2 .elementor-nav-menu .elementor-item{font-family:"Poppins", Sans-serif;font-size:15px;font-weight:500;text-transform:capitalize;line-height:1.2px;letter-spacing:0.2px;}.elementor-44 .elementor-element.elementor-element-2da9bb2 .elementor-nav-menu--main .elementor-item{color:#111111;fill:#111111;padding-left:14px;padding-right:14px;padding-top:10px;padding-bottom:10px;}.elementor-44 .elementor-element.elementor-element-2da9bb2 .elementor-nav-menu--main .elementor-item:hover, .elementor-44 .elementor-element.elementor-element-2da9bb2 .elementor-nav-menu--main .elementor-item.elementor-item-active, .elementor-44 .elementor-element.elementor-element-2da9bb2 .elementor-nav-menu--main .elementor-item.highlighted, .elementor-44 .elementor-element.elementor-element-2da9bb2 .elementor-nav-menu--main .elementor-item:focus{color:#000000;fill:#000000;}.elementor-44 .elementor-element.elementor-element-2da9bb2 .elementor-nav-menu--main .elementor-item.elementor-item-active{color:#000000;}.elementor-44 .elementor-element.elementor-element-2da9bb2{--e-nav-menu-horizontal-menu-item-margin:calc( 8px / 2 );}.elementor-44 .elementor-element.elementor-element-2da9bb2 .elementor-nav-menu--main:not(.elementor-nav-menu--layout-horizontal) .elementor-nav-menu > li:not(:last-child){margin-bottom:8px;}.elementor-44 .elementor-element.elementor-element-2da9bb2 div.elementor-menu-toggle{color:#111111;}.elementor-44 .elementor-element.elementor-element-2da9bb2 div.elementor-menu-toggle svg{fill:#111111;}.elementor-44 .elementor-element.elementor-element-2da9bb2 div.elementor-menu-toggle:hover, .elementor-44 .elementor-element.elementor-element-2da9bb2 div.elementor-menu-toggle:focus{color:#000000;}.elementor-44 .elementor-element.elementor-element-2da9bb2 div.elementor-menu-toggle:hover svg, .elementor-44 .elementor-element.elementor-element-2da9bb2 div.elementor-menu-toggle:focus svg{fill:#000000;}.elementor-44 .elementor-element.elementor-element-6a90d31{--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;}.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__toggle .elementor-button{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__product-name a{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__product-price{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__footer-buttons .elementor-button{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__footer-buttons a.elementor-button--view-cart{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__footer-buttons a.elementor-button--checkout{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-woocommerce-menu-cart .woocommerce-mini-cart__empty-message{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-44 .elementor-element.elementor-element-cb9aa4c > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 40px 0px 0px;}.elementor-44 .elementor-element.elementor-element-cb9aa4c{--main-alignment:center;--divider-style:solid;--subtotal-divider-style:solid;--elementor-remove-from-cart-button:none;--remove-from-cart-button:block;--toggle-button-icon-color:#000000;--toggle-button-icon-hover-color:#636060;--toggle-icon-size:22px;--toggle-icon-padding:8px 10px 8px 10px;--items-indicator-text-color:#FFFFFF;--items-indicator-background-color:#000000;--cart-border-style:none;--cart-footer-layout:1fr 1fr;--products-max-height-sidecart:calc(100vh - 240px);--products-max-height-minicart:calc(100vh - 385px);}body:not(.rtl) .elementor-44 .elementor-element.elementor-element-cb9aa4c .elementor-menu-cart__toggle .elementor-button-icon .elementor-button-icon-qty[data-counter]{right:--6px;top:--6px;}body.rtl .elementor-44 .elementor-element.elementor-element-cb9aa4c .elementor-menu-cart__toggle .elementor-button-icon .elementor-button-icon-qty[data-counter]{right:-6px;top:--6px;left:auto;}.elementor-44 .elementor-element.elementor-element-cb9aa4c .widget_shopping_cart_content{--subtotal-divider-left-width:0;--subtotal-divider-right-width:0;}.elementor-44 .elementor-element.elementor-element-cb9aa4c .elementor-menu-cart__product-name a{font-family:"Poppins", Sans-serif;font-weight:500;}.elementor-44 .elementor-element.elementor-element-9bae6eb{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;border-style:solid;--border-style:solid;border-color:#EDEDED;--border-color:#EDEDED;}.elementor-44 .elementor-element.elementor-element-9bae6eb:not(.elementor-motion-effects-element-type-background), .elementor-44 .elementor-element.elementor-element-9bae6eb > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-44 .elementor-element.elementor-element-9405182{--display:flex;}.elementor-44 .elementor-element.elementor-element-1130eb5 .elementor-menu-toggle{margin-right:auto;}.elementor-44 .elementor-element.elementor-element-1130eb5 .elementor-nav-menu .elementor-item{font-family:"Roboto", Sans-serif;font-weight:600;}.elementor-44 .elementor-element.elementor-element-1130eb5 .elementor-nav-menu--main .elementor-item{color:#7A7A7A;fill:#7A7A7A;}.elementor-44 .elementor-element.elementor-element-1130eb5 div.elementor-menu-toggle{color:#000000;}.elementor-44 .elementor-element.elementor-element-1130eb5 div.elementor-menu-toggle svg{fill:#000000;}.elementor-44 .elementor-element.elementor-element-645d856{--display:flex;}.elementor-44 .elementor-element.elementor-element-4f27fdf{--display:flex;}.elementor-44 .elementor-element.elementor-element-ddef236 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-44 .elementor-element.elementor-element-ddef236{--divider-style:solid;--subtotal-divider-style:solid;--elementor-remove-from-cart-button:none;--remove-from-cart-button:block;--toggle-button-icon-color:#000000;--toggle-button-icon-hover-color:#F3F3F3;--toggle-icon-size:22px;--toggle-icon-padding:8px 10px 8px 10px;--items-indicator-text-color:#FFFFFF;--items-indicator-background-color:#000000;--cart-border-style:none;--cart-footer-layout:1fr 1fr;--products-max-height-sidecart:calc(100vh - 240px);--products-max-height-minicart:calc(100vh - 385px);}body:not(.rtl) .elementor-44 .elementor-element.elementor-element-ddef236 .elementor-menu-cart__toggle .elementor-button-icon .elementor-button-icon-qty[data-counter]{right:--6px;top:--6px;}body.rtl .elementor-44 .elementor-element.elementor-element-ddef236 .elementor-menu-cart__toggle .elementor-button-icon .elementor-button-icon-qty[data-counter]{right:-6px;top:--6px;left:auto;}.elementor-44 .elementor-element.elementor-element-ddef236 .widget_shopping_cart_content{--subtotal-divider-left-width:0;--subtotal-divider-right-width:0;}.elementor-44 .elementor-element.elementor-element-ddef236 .elementor-menu-cart__product-name a{font-family:"Poppins", Sans-serif;font-weight:500;}.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}@media(max-width:1024px){.elementor-44 .elementor-element.elementor-element-522bdfa > .elementor-widget-container{padding:0px 34px 0px 0px;}.elementor-44 .elementor-element.elementor-element-522bdfa img{width:52%;}}@media(max-width:767px){.elementor-44 .elementor-element.elementor-element-53e718b{--min-height:60px;--flex-wrap:nowrap;--padding-top:12px;--padding-bottom:12px;--padding-left:16px;--padding-right:16px;}.elementor-44 .elementor-element.elementor-element-e45101b{--gap:13px 13px;--row-gap:13px;--column-gap:13px;--flex-wrap:nowrap;}.elementor-44 .elementor-element.elementor-element-6372f3a{--width:30%;}.elementor-44 .elementor-element.elementor-element-718e1aa img{max-width:70px;}.elementor-44 .elementor-element.elementor-element-ab3ca71{--width:40%;}.elementor-44 .elementor-element.elementor-element-2da9bb2 > .elementor-widget-container{padding:8px 8px 8px 8px;}.elementor-44 .elementor-element.elementor-element-2da9bb2 .elementor-nav-menu .elementor-item{font-size:16px;line-height:1.3em;letter-spacing:0.2px;}.elementor-44 .elementor-element.elementor-element-2da9bb2 .elementor-nav-menu--main .elementor-item{padding-top:14px;padding-bottom:14px;}.elementor-44 .elementor-element.elementor-element-2da9bb2{--e-nav-menu-horizontal-menu-item-margin:calc( 6px / 2 );--nav-menu-icon-size:26px;}.elementor-44 .elementor-element.elementor-element-2da9bb2 .elementor-nav-menu--main:not(.elementor-nav-menu--layout-horizontal) .elementor-nav-menu > li:not(:last-child){margin-bottom:6px;}.elementor-44 .elementor-element.elementor-element-6a90d31{--width:30%;--gap:10px 10px;--row-gap:10px;--column-gap:10px;}.elementor-44 .elementor-element.elementor-element-cb9aa4c{--toggle-icon-size:20px;--toggle-icon-padding:8px 8px 8px 8px;}.elementor-44 .elementor-element.elementor-element-9bae6eb{--justify-content:space-between;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--gap:10px 10px;--row-gap:10px;--column-gap:10px;--flex-wrap:nowrap;border-width:1px 1px 1px 1px;--border-top-width:1px;--border-right-width:1px;--border-bottom-width:1px;--border-left-width:1px;--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-44 .elementor-element.elementor-element-9405182{--justify-content:flex-start;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--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-44 .elementor-element.elementor-element-1130eb5{--nav-menu-icon-size:22px;}.elementor-44 .elementor-element.elementor-element-645d856{--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--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-44 .elementor-element.elementor-element-522bdfa > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-44 .elementor-element.elementor-element-522bdfa img{width:90px;}.elementor-44 .elementor-element.elementor-element-4f27fdf{--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:center;--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-44 .elementor-element.elementor-element-ddef236{--toggle-icon-size:20px;--toggle-icon-padding:8px 8px 8px 8px;}}@media(max-width:1024px) and (min-width:768px){.elementor-44 .elementor-element.elementor-element-9405182{--width:30%;}.elementor-44 .elementor-element.elementor-element-645d856{--width:36%;}.elementor-44 .elementor-element.elementor-element-4f27fdf{--width:25%;}}/* Start custom CSS for woocommerce-menu-cart, class: .elementor-element-cb9aa4c *//* Remove cart toggle box/border/shadow */ .elementor-44 .elementor-element.elementor-element-cb9aa4c .elementor-menu-cart__toggle, .elementor-44 .elementor-element.elementor-element-cb9aa4c .elementor-menu-cart__toggle .elementor-button, .elementor-44 .elementor-element.elementor-element-cb9aa4c .elementor-menu-cart__toggle a, .elementor-44 .elementor-element.elementor-element-cb9aa4c .elementor-menu-cart__toggle button { background: transparent !important; border: none !important; outline: none !important; box-shadow: none !important; padding: 0 !important; } /* Remove any pseudo-element border/box */ .elementor-44 .elementor-element.elementor-element-cb9aa4c .elementor-menu-cart__toggle:before, .elementor-44 .elementor-element.elementor-element-cb9aa4c .elementor-menu-cart__toggle:after { border: none !important; box-shadow: none !important; } /* Keep icon tight */ .elementor-44 .elementor-element.elementor-element-cb9aa4c .elementor-menu-cart__toggle .elementor-button { min-width: 0 !important; } /* Bubble (items indicator) */ .elementor-44 .elementor-element.elementor-element-cb9aa4c .elementor-menu-cart__items-indicator { border: none !important; box-shadow: none !important; }/* End custom CSS */ /* Start custom CSS for woocommerce-menu-cart, class: .elementor-element-ddef236 *//* Remove cart toggle box/border/shadow */ .elementor-44 .elementor-element.elementor-element-ddef236 .elementor-menu-cart__toggle, .elementor-44 .elementor-element.elementor-element-ddef236 .elementor-menu-cart__toggle .elementor-button, .elementor-44 .elementor-element.elementor-element-ddef236 .elementor-menu-cart__toggle a, .elementor-44 .elementor-element.elementor-element-ddef236 .elementor-menu-cart__toggle button { background: transparent !important; border: none !important; outline: none !important; box-shadow: none !important; padding: 0 !important; } /* Remove any pseudo-element border/box */ .elementor-44 .elementor-element.elementor-element-ddef236 .elementor-menu-cart__toggle:before, .elementor-44 .elementor-element.elementor-element-ddef236 .elementor-menu-cart__toggle:after { border: none !important; box-shadow: none !important; } /* Keep icon tight */ .elementor-44 .elementor-element.elementor-element-ddef236 .elementor-menu-cart__toggle .elementor-button { min-width: 0 !important; } /* Bubble (items indicator) */ .elementor-44 .elementor-element.elementor-element-ddef236 .elementor-menu-cart__items-indicator { border: none !important; box-shadow: none !important; }/* End custom CSS */ /* Start custom CSS *//* ========================================================= JAGO — MOBILE + TABLET NAVBAR (Premium Beige) — FINAL v4.1 UPDATE ONLY: - Dropdown panel bg = navbar beige - Hover = light black - Shop Now submenu forced working (elementor-active / focus-within) ========================================================= */ @media (max-width: 1024px){ /* ============ 0) TOKENS ============ */ .jago-mobile-drawer{ --jb-bg:#F2E9D6; /* ✅ ONE beige everywhere */ --jb-bg-2:#EADCC4; /* slightly deeper (chips/hover only) */ --jb-ink:#0B0F14; --jb-muted:#5C6772; --jb-line:rgba(11,15,20,.10); --jb-radius:18px; --jb-radius-lg:22px; --jb-soft:0 10px 24px rgba(11,15,20,.10); --jb-shadow:0 22px 60px rgba(11,15,20,.16); } /* ============ 1) HEADER: SAME BEIGE EVERYWHERE ============ */ .jago-mobile-drawer, .jago-mh{ background: var(--jb-bg) !important; } .jago-mh, .jago-mh .elementor-container, .jago-mh .elementor-row, .jago-mh .elementor-column, .jago-mh .elementor-widget-wrap, .jago-mh .elementor-widget, .jago-mh .elementor-widget-container, .jago-mh-logo, .jago-mh-logo .elementor-widget-container, .jago-mh-cart, .jago-mh-cart .elementor-widget-container, .jago-mh-menu, .jago-mh-menu .elementor-widget-container{ background: var(--jb-bg) !important; } .jago-mh{ display:block !important; border-bottom: 1px solid rgba(11,15,20,.08) !important; padding: 12px 14px !important; position: relative !important; z-index: 9999 !important; box-shadow: 0 10px 26px rgba(11,15,20,.06); } /* ============ 2) LOGO ============ */ .jago-mh-logo img{ max-height: 34px !important; width:auto !important; filter: contrast(1.08); } /* ============ 3) CART ============ */ .jago-mh-cart *{ background: transparent !important; box-shadow: none !important; } /* ============ 4) HAMBURGER ============ */ .jago-mh-menu{ position: relative !important; display:flex !important; align-items:center !important; } .jago-mh-menu .elementor-menu-toggle{ display:inline-flex !important; align-items:center !important; justify-content:center !important; background: var(--jb-bg) !important; border: 1px solid rgba(11,15,20,.14) !important; border-radius: 16px !important; padding: 10px 12px !important; box-shadow: var(--jb-soft) !important; transition: transform .18s ease, box-shadow .18s ease, filter .18s ease; } .jago-mh-menu .elementor-menu-toggle:hover{ filter: brightness(1.02); } .jago-mh-menu .elementor-menu-toggle:active{ transform: scale(.985); box-shadow: 0 8px 18px rgba(11,15,20,.12) !important; } .jago-mh-menu .elementor-menu-toggle i, .jago-mh-menu .elementor-menu-toggle svg{ color: var(--jb-ink) !important; fill: var(--jb-ink) !important; } /* ============ 5) DROPDOWN PANEL (✅ NOW SAME BEIGE) ============ */ .jago-mh-menu .elementor-nav-menu__container{ position: relative !important; background: transparent !important; } .jago-mh-menu .elementor-nav-menu--dropdown{ position: absolute !important; left: 0 !important; top: calc(100% + 12px) !important; width: min(370px, calc(100vw - 28px)) !important; margin: 0 !important; /* ✅ navbar same beige (premium) */ background: rgba(242,233,214,.96) !important; /* = --jb-bg with glass */ -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(11,15,20,.12) !important; border-radius: var(--jb-radius-lg) !important; padding: 10px !important; box-shadow: var(--jb-shadow) !important; overflow: visible !important; transform-origin: top left; transform: translateY(-10px) scale(.985); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .22s ease, transform .28s cubic-bezier(.2,.9,.2,1), visibility .22s ease; } .jago-mh-menu .elementor-menu-toggle[aria-expanded="true"] + .elementor-nav-menu--dropdown, .jago-mh-menu .elementor-menu-toggle[aria-expanded="true"] ~ .elementor-nav-menu--dropdown{ opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: translateY(0) scale(1) !important; } /* ============ 6) MENU ITEMS ============ */ .jago-mh-menu .elementor-nav-menu--dropdown ul{ margin:0 !important; padding:0 !important; } .jago-mh-menu .elementor-nav-menu--dropdown li{ border-bottom: 1px solid rgba(11,15,20,.10) !important; } .jago-mh-menu .elementor-nav-menu--dropdown li:last-child{ border-bottom:none !important; } .jago-mh-menu .elementor-nav-menu--dropdown a{ position: relative !important; display:flex !important; align-items:center !important; justify-content:space-between !important; padding: 14px 12px !important; font-size: 16px !important; font-weight: 560 !important; letter-spacing: .2px !important; color: var(--jb-ink) !important; border-radius: var(--jb-radius) !important; transition: background .18s ease, transform .18s ease; } /* ✅ hover = light black */ .jago-mh-menu .elementor-nav-menu--dropdown a:hover{ background: rgba(11,15,20,.06) !important; } .jago-mh-menu .elementor-nav-menu--dropdown a:active{ background: rgba(11,15,20,.08) !important; transform: scale(.992); } /* ============ 7) SHOP NOW SUBMENU — FORCE WORKING ============ */ .jago-mh-menu .elementor-nav-menu--dropdown li.menu-item-has-children > a, .jago-mh-menu .elementor-nav-menu--dropdown li.page_item_has_children > a{ padding-right: 58px !important; } .jago-mh-menu .elementor-nav-menu--dropdown .sub-arrow{ position:absolute !important; right: 10px !important; top: 50% !important; transform: translateY(-50%) !important; width: 46px !important; height: 38px !important; display:flex !important; align-items:center !important; justify-content:center !important; border-radius: 14px !important; background: rgba(11,15,20,.08) !important; cursor: pointer !important; pointer-events:auto !important; z-index: 999 !important; } /* ✅ IMPORTANT: Elementor submenu often stays display:none unless active. Force open when li gets .elementor-active OR when focused (mobile tap) */ .jago-mh-menu .elementor-nav-menu--dropdown .sub-menu{ display: none !important; /* default closed */ margin: 8px 0 12px 14px !important; padding: 8px 0 8px 12px !important; border-left: 1px solid rgba(11,15,20,.16) !important; border-radius: 14px !important; /* ✅ submenu bg also beige (not white) */ background: rgba(242,233,214,.75) !important; } /* ✅ OPEN states */ .jago-mh-menu .elementor-nav-menu--dropdown li.elementor-active > .sub-menu, .jago-mh-menu .elementor-nav-menu--dropdown li.menu-item-has-children:focus-within > .sub-menu, .jago-mh-menu .elementor-nav-menu--dropdown li.page_item_has_children:focus-within > .sub-menu{ display: block !important; } .jago-mh-menu .elementor-nav-menu--dropdown .sub-menu a{ padding: 10px 12px !important; font-size: 14px !important; font-weight: 480 !important; color: var(--jb-muted) !important; } /* ✅ submenu hover light black */ .jago-mh-menu .elementor-nav-menu--dropdown .sub-menu a:hover{ background: rgba(11,15,20,.06) !important; } /* ============ 8) SAFETY ============ */ html, body{ overflow-x:hidden; } } /* ✅ FIX: Elementor opens submenu by setting aria-expanded="true" on the (your screenshot) */ .jago-mh-menu .elementor-nav-menu--dropdown li.menu-item-has-children > a[aria-expanded="true"] + .sub-menu, .jago-mh-menu .elementor-nav-menu--dropdown li.page_item_has_children > a[aria-expanded="true"] + .sub-menu{ display: block !important; } /* ✅ Make sure arrow area receives tap */ .jago-mh-menu .elementor-nav-menu--dropdown .sub-arrow, .jago-mh-menu .elementor-nav-menu--dropdown .sub-arrow *{ pointer-events: auto !important; } /* ========================================================= JAGO — DESKTOP NAVBAR (FINAL v4.4) Fix: - Logo after gap small & premium (not too much) - Menu starts after that premium gap - Cart goes to absolute right edge ========================================================= */ @media (min-width: 1025px){ .jago-1{ --jb-bg-glass: rgba(242,233,214,.94); --jb-ink:#0B0F14; --jb-muted:#5C6772; --jb-pill:14px; --jb-radius:18px; --jb-shadow-sticky: 0 18px 46px rgba(11,15,20,.14); --jb-nav-reserve: 88px; /* ✅ Premium small gap after logo */ --jb-menu-gap: 16px; /* 12-20 best */ } body{ padding-top: var(--jb-nav-reserve) !important; } body.admin-bar .jago-1{ top: 32px !important; } /* ---------- MAIN BAR ---------- */ .jago-1{ position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; z-index: 999999 !important; background: var(--jb-bg-glass) !important; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(11,15,20,.10) !important; box-shadow: var(--jb-shadow-sticky) !important; /* ✅ Cart edge perfect (right padding small) */ padding: 12px 18px 12px 34px !important; display: grid !important; /* ✅ Best layout: logo | flexible space | cart menu will live in the flexible area with controlled left gap */ grid-template-columns: auto 1fr auto !important; align-items: center !important; column-gap: 14px !important; animation: jagoNavIn .28s ease both; transform: translateZ(0); } @keyframes jagoNavIn{ from{ transform: translateY(-8px); opacity:0; } to{ transform: translateY(0); opacity:1; } } .jago-1 *{ background-color: transparent !important; } /* ---------- LOGO ---------- */ .jago-2{ grid-column: 1 !important; display:flex !important; align-items:center !important; justify-content:flex-start !important; padding-right: 14px !important; /* ✅ less than before */ border-right: 1px solid rgba(11,15,20,.08) !important; transform: translateX(-6px) !important; } .jago-2 > *{ margin-left: 0 !important; padding-left: 0 !important; } .jago-2 :is(a, .elementor-widget-container, .elementor-image, .elementor-image a){ margin: 0 !important; padding: 0 !important; justify-content:flex-start !important; } .jago-3, .jago-3 img{ max-height: 40px !important; width:auto !important; display:block !important; filter: contrast(1.07) saturate(.95); transition: transform .22s ease, filter .22s ease; } .jago-2:hover .jago-3, .jago-2:hover .jago-3 img{ transform: translateY(-1px); filter: contrast(1.10) saturate(.98); } /* ---------- MENU (premium small gap after logo) ---------- */ .jago-4{ grid-column: 2 !important; display:flex !important; align-items:center !important; /* ✅ keep centered feel but start after premium gap */ justify-content:flex-start !important; /* ✅ THIS is the small premium gap after logo */ padding-left: var(--jb-menu-gap) !important; min-width: 0 !important; } .jago-5{ display:flex !important; align-items:center !important; justify-content:flex-start !important; min-width: 0 !important; width: 100% !important; } .jago-5 :is(ul, .menu, .elementor-nav-menu){ display:flex !important; align-items:center !important; /* ✅ subtle center-ish: keep it near middle without huge empty */ justify-content:center !important; gap: 14px !important; margin: 0 !important; padding: 0 !important; list-style:none !important; flex-wrap: nowrap !important; white-space: nowrap !important; width: 100% !important; } .jago-5 :is(li, .menu-item){ margin:0 !important; padding:0 !important; position:relative !important; } .jago-5 :is(a, .elementor-item){ display:inline-flex !important; align-items:center !important; justify-content:center !important; padding: 9px 11px !important; border-radius: var(--jb-pill) !important; color: var(--jb-ink) !important; text-decoration:none !important; font-size: 15px !important; font-weight: 600 !important; letter-spacing: .2px !important; line-height: 1 !important; transition: background .18s ease, transform .18s ease; } .jago-5 :is(a, .elementor-item):hover{ background: rgba(11,15,20,.06) !important; transform: translateY(-1px); } /* ---------- DROPDOWN (unchanged) ---------- */ .jago-5 :is(ul, .menu, .elementor-nav-menu) li > ul{ position:absolute !important; top: calc(100% + 10px) !important; left: 0 !important; transform: translateY(12px) scale(.985) !important; transform-origin: top left !important; min-width: 260px !important; padding: 10px !important; margin: 0 !important; background: rgba(242,233,214,.98) !important; border: 1px solid rgba(11,15,20,.12) !important; border-radius: 18px !important; box-shadow: 0 22px 60px rgba(11,15,20,.14) !important; list-style:none !important; z-index: 999999 !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transition: opacity .18s ease, transform .24s cubic-bezier(.2,.9,.2,1), visibility .18s ease; } .jago-5 :is(ul, .menu, .elementor-nav-menu) li.menu-item-has-children::after{ content:""; position:absolute; left: 0; right: 0; top: 100%; height: 16px; pointer-events: auto; } .jago-5 :is(ul, .menu, .elementor-nav-menu) li:hover > ul, .jago-5 :is(ul, .menu, .elementor-nav-menu) li:focus-within > ul{ opacity: 1 !important; visibility: visible !important; transform: translateY(0) scale(1) !important; pointer-events: auto !important; } .jago-5 :is(ul, .menu, .elementor-nav-menu) li > ul{ display:block !important; } .jago-5 :is(ul, .menu, .elementor-nav-menu) li > ul > li{ display:block !important; width:100% !important; } .jago-5 :is(ul, .menu, .elementor-nav-menu) li > ul li a{ display:flex !important; width: 100% !important; justify-content:flex-start !important; padding: 10px 12px !important; border-radius: 12px !important; font-size: 14px !important; font-weight: 520 !important; color: var(--jb-muted) !important; transition: background .18s ease, transform .18s ease, color .18s ease; } .jago-5 :is(ul, .menu, .elementor-nav-menu) li > ul li a:hover{ background: rgba(11,15,20,.06) !important; color: var(--jb-ink) !important; transform: translateX(2px); } /* ---------- CART (absolute right) ---------- */ .jago-6{ grid-column: 3 !important; display:flex !important; align-items:center !important; justify-content:flex-end !important; padding-left: 14px !important; border-left: 1px solid rgba(11,15,20,.08) !important; /* ✅ no extra right padding — goes to edge */ padding-right: 0 !important; } .jago-7{ display:inline-flex !important; align-items:center !important; justify-content:center !important; padding: 10px 14px !important; border-radius: 16px !important; background: rgba(242,233,214,.92) !important; border: 1px solid rgba(11,15,20,.14) !important; box-shadow: 0 10px 24px rgba(11,15,20,.10) !important; color: var(--jb-ink) !important; transition: transform .18s ease, box-shadow .18s ease, filter .18s ease; } .jago-7:hover{ filter: brightness(1.02); transform: translateY(-1px); } } @media (min-width: 1366px){ .jago-5 :is(ul, .menu, .elementor-nav-menu){ gap: 16px !important; } } /* ========================================================= JAGO — MENU PERFECT CENTER (ONLY jago-4 & jago-5) No design change. Logo & Cart untouched. ========================================================= */ @media (min-width: 1025px){ /* Menu container */ .jago-4{ display: flex !important; align-items: center !important; justify-content: center !important; padding-left: 0 !important; padding-right: 0 !important; } /* Menu widget */ .jago-5{ display: flex !important; align-items: center !important; justify-content: center !important; width: auto !important; } /* Actual menu list */ .jago-5 :is(ul, .menu, .elementor-nav-menu){ display: flex !important; align-items: center !important; justify-content: center !important; width: auto !important; margin: 0 auto !important; } } /* ========================================================= JAGO — REMOVE SHOP NOW BLACK MARK ONLY No layout or design change ========================================================= */ @media (min-width:1025px){ /* Remove any underline / pipe / active indicator */ .jago-5 .menu-item > a::after, .jago-5 .menu-item > a::before, .jago-5 .menu-item::after, .jago-5 .menu-item::before, .jago-5 a.elementor-item-active::after, .jago-5 a.elementor-item-active::before{ content: none !important; display: none !important; } /* Extra safety: remove border/shadow underline if theme adds */ .jago-5 .menu-item > a{ border-bottom: 0 !important; box-shadow: none !important; background-image: none !important; } } /* ========================================================= JAGO — NAVBAR 3 FIX PACK (NO DESIGN CHANGE) Fixes ONLY: 1) No page content cut under fixed navbar 2) Cart amount/text not clipped 3) Shop Now dropdown stays open while moving mouse ========================================================= */ @media (min-width:1025px){ /* ---------- 1) CONTENT NOT CUT (global safe reserve) ---------- */ :root{ --jb-nav-reserve: 88px; } /* আপনার navbar height (same as before) */ body{ padding-top: var(--jb-nav-reserve) !important; } /* admin bar থাকলে extra offset */ body.admin-bar{ padding-top: calc(var(--jb-nav-reserve) + 32px) !important; } /* Woo notices / banners / sticky elements যেন navbar-এর নিচে না ঢুকে */ body.woocommerce-page .woocommerce-notices-wrapper, body.single-product .woocommerce-notices-wrapper, body.woocommerce-page .woocommerce-store-notice, body.single-product .woocommerce-store-notice{ margin-top: 12px !important; padding-top: 0 !important; } /* যদি store notice fixed/sticky হয়, তার top offset ঠিক */ .woocommerce-store-notice, .woocommerce-demo-store{ top: var(--jb-nav-reserve) !important; } body.admin-bar .woocommerce-store-notice, body.admin-bar .woocommerce-demo-store{ top: calc(var(--jb-nav-reserve) + 32px) !important; } /* ---------- 2) CART TEXT NOT CLIPPED ---------- */ .jago-6{ overflow: visible !important; } /* safe */ .jago-7{ white-space: nowrap !important; /* amount/label এক লাইনে থাকবে */ min-width: max-content !important; max-width: none !important; overflow: visible !important; } /* cart এর ভিতরের text/icon wrappers (যদি span থাকে) */ .jago-7 *{ white-space: nowrap !important; overflow: visible !important; } /* ---------- 3) DROPDOWN NOT TOO FAST (hover bridge + close delay) ---------- */ /* hover bridge বাড়ানো: mouse gap এও hover থাকবে */ .jago-5 :is(ul, .menu, .elementor-nav-menu) li.menu-item-has-children{ position: relative !important; } .jago-5 :is(ul, .menu, .elementor-nav-menu) li.menu-item-has-children::after{ content:""; position:absolute; left:-10px; right:-10px; top:100%; height:24px; /* ⬅ আগে 16px ছিল, এখন বেশি stable */ pointer-events:auto; } /* dropdown close একটু delay—তাই দ্রুত disappear হবে না */ .jago-5 :is(ul, .menu, .elementor-nav-menu) li > ul{ transition: opacity .18s ease, transform .24s cubic-bezier(.2,.9,.2,1), visibility .18s ease !important; } .jago-5 :is(ul, .menu, .elementor-nav-menu) li:not(:hover):not(:focus-within) > ul{ transition-delay: .12s !important; /* ⬅ mouse move করার সময় “grace time” */ } .jago-5 :is(ul, .menu, .elementor-nav-menu) li:hover > ul, .jago-5 :is(ul, .menu, .elementor-nav-menu) li:focus-within > ul{ transition-delay: 0s !important; } } /* ========================================================= JAGO — MINI CART (ONE-PIECE) — Mobile + Desktop (Screenshot Style) - Scope: Elementor Menu Cart Drawer ONLY (when shown/open) - Beige = Navbar tone - Smooth open/close - Product card + subtotal + stacked buttons ========================================================= */ /* ============ 0) TOKENS (navbar-beige) ============ */ :root{ --jb-cart-bg: rgba(242,233,214,.97); /* navbar beige */ --jb-cart-bg-2: rgba(242,233,214,.82); /* lighter beige */ --jb-cart-ink:#0B0F14; --jb-cart-muted:#5C6772; --jb-cart-line:rgba(11,15,20,.10); --jb-cart-card: rgba(242,233,214,.72); --jb-cart-radius:16px; --jb-cart-radius-sm:14px; --jb-cart-shadow: 0 18px 52px rgba(11,15,20,.18); } /* ============ 1) DRAWER MAIN (ONLY WHEN OPEN) ============ */ .elementor-menu-cart__container.elementor-menu-cart__container--shown .elementor-menu-cart__main, .elementor-menu-cart__container[aria-hidden="false"] .elementor-menu-cart__main, .elementor-menu-cart__container.is-open .elementor-menu-cart__main, .elementor-menu-cart__container.is-active .elementor-menu-cart__main{ width: min(380px, 92vw) !important; /* mobile+desktop safe */ max-width: 92vw !important; background: var(--jb-cart-bg) !important; border-left: 1px solid var(--jb-cart-line) !important; box-shadow: var(--jb-cart-shadow) !important; border-top-left-radius: var(--jb-cart-radius) !important; border-bottom-left-radius: var(--jb-cart-radius) !important; /* smooth entrance */ transform: translateX(14px); opacity: 0; transition: transform .28s cubic-bezier(.2,.9,.2,1), opacity .22s ease !important; } /* visible state animation */ .elementor-menu-cart__container.elementor-menu-cart__container--shown .elementor-menu-cart__main, .elementor-menu-cart__container[aria-hidden="false"] .elementor-menu-cart__main{ transform: translateX(0) !important; opacity: 1 !important; } /* ============ 2) HEADER ============ */ .elementor-menu-cart__header{ background: var(--jb-cart-bg-2) !important; border-bottom: 1px solid var(--jb-cart-line) !important; padding: 12px 14px !important; } .elementor-menu-cart__header-title{ font-size: 14px !important; font-weight: 900 !important; letter-spacing: .6px !important; color: var(--jb-cart-ink) !important; } .elementor-menu-cart__close-button{ width: 34px !important; height: 34px !important; border-radius: 12px !important; border: 1px solid var(--jb-cart-line) !important; background: rgba(242,233,214,.95) !important; box-shadow: 0 10px 20px rgba(11,15,20,.10) !important; } /* ============ 3) PRODUCTS AREA ============ */ .elementor-menu-cart__products, .woocommerce-mini-cart{ padding: 12px 12px 8px !important; } /* each product row/card */ .elementor-menu-cart__product, .woocommerce-mini-cart .mini_cart_item{ display: grid !important; grid-template-columns: 56px 1fr auto !important; /* thumb | content | remove */ gap: 10px !important; padding: 10px !important; margin: 0 0 10px 0 !important; background: var(--jb-cart-card) !important; border: 1px solid rgba(11,15,20,.10) !important; border-radius: var(--jb-cart-radius-sm) !important; box-shadow: 0 10px 22px rgba(11,15,20,.08) !important; } /* thumb */ .elementor-menu-cart__product-image, .woocommerce-mini-cart .mini_cart_item img{ width: 56px !important; height: 56px !important; object-fit: cover !important; border-radius: 12px !important; border: 1px solid rgba(11,15,20,.10) !important; background: rgba(242,233,214,.85) !important; } /* title */ .elementor-menu-cart__product-name, .woocommerce-mini-cart .mini_cart_item a:not(.remove){ font-size: 13px !important; font-weight: 900 !important; line-height: 1.25 !important; color: var(--jb-cart-ink) !important; text-decoration: none !important; } /* variations */ .elementor-menu-cart__product-variations, .woocommerce-mini-cart .variation{ font-size: 11.5px !important; color: var(--jb-cart-muted) !important; } /* qty/price line */ .elementor-menu-cart__product-price, .woocommerce-mini-cart .quantity{ font-size: 12.5px !important; font-weight: 900 !important; color: var(--jb-cart-ink) !important; } /* remove button */ .elementor-menu-cart__product-remove, .woocommerce-mini-cart .remove{ width: 30px !important; height: 30px !important; border-radius: 12px !important; background: rgba(242,233,214,.95) !important; border: 1px solid rgba(11,15,20,.12) !important; box-shadow: 0 10px 18px rgba(11,15,20,.10) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; } /* ============ 4) SUBTOTAL BOX ============ */ .elementor-menu-cart__subtotal, .woocommerce-mini-cart__total{ margin: 8px 12px 10px !important; padding: 12px 12px !important; background: rgba(242,233,214,.86) !important; border: 1px solid rgba(11,15,20,.10) !important; border-radius: 14px !important; font-size: 13px !important; font-weight: 900 !important; color: var(--jb-cart-ink) !important; display:flex !important; justify-content: space-between !important; align-items: center !important; } /* ============ 5) BUTTONS (STACKED LIKE SCREENSHOT) ============ */ .elementor-menu-cart__footer-buttons, .woocommerce-mini-cart__buttons{ padding: 0 12px 14px !important; display: grid !important; grid-template-columns: 1fr !important; gap: 10px !important; } .elementor-menu-cart__footer-buttons a, .woocommerce-mini-cart__buttons a{ width: 100% !important; text-align: center !important; padding: 12px 12px !important; border-radius: 14px !important; font-size: 13px !important; font-weight: 900 !important; letter-spacing: .6px !important; transition: transform .16s ease, filter .16s ease !important; } .elementor-menu-cart__footer-buttons a:active, .woocommerce-mini-cart__buttons a:active{ transform: scale(.99); } /* First button = View bag/cart (outlined light) */ .woocommerce-mini-cart__buttons a:first-child, .elementor-menu-cart__footer-buttons a:first-child{ background: rgba(255,255,255,.86) !important; color: var(--jb-cart-ink) !important; border: 1px solid rgba(11,15,20,.28) !important; } /* Last button = Checkout (dark) */ .woocommerce-mini-cart__buttons a:last-child, .elementor-menu-cart__footer-buttons a:last-child{ background: var(--jb-cart-ink) !important; color: #fff !important; border: 1px solid rgba(11,15,20,.10) !important; } /* ============ 6) CLICK OPEN FEEL (SAFE) ============ */ /* cart icon/button should feel clickable, no layout change */ .elementor-menu-cart__toggle{ cursor: pointer !important; } /* ============ 7) MOBILE EDGE SAFETY ============ */ @media (max-width: 768px){ .elementor-menu-cart__container.elementor-menu-cart__container--shown .elementor-menu-cart__main, .elementor-menu-cart__container[aria-hidden="false"] .elementor-menu-cart__main{ width: min(420px, 94vw) !important; /* a bit wider on mobile */ } } /* ========================================= JAGO — Header Language Switch (EN | العربية) Premium, compact, cart-side Works with GTranslate gt-link output ========================================= */ /* 1) Wrapper (you added class on shortcode widget) */ .jago-lang{ display:flex !important; align-items:center !important; gap:10px !important; white-space:nowrap !important; line-height:1 !important; } /* 2) Normalize any stray spacing inside */ .jago-lang *{ line-height:1 !important; } /* 3) Link style (premium pill) */ .jago-lang a{ display:inline-flex !important; align-items:center !important; justify-content:center !important; padding:8px 10px !important; border-radius:999px !important; text-decoration:none !important; font-size:12px !important; font-weight:700 !important; letter-spacing:.2px !important; color:#0B0F14 !important; background:rgba(255,255,255,.55) !important; border:1px solid rgba(11,15,20,.14) !important; box-shadow:0 8px 20px rgba(11,15,20,.10) !important; transition:transform .15s ease, opacity .15s ease, box-shadow .15s ease !important; } /* 4) Hover / focus */ .jago-lang a:hover, .jago-lang a:focus{ opacity:1 !important; transform:translateY(-1px) !important; box-shadow:0 14px 28px rgba(11,15,20,.14) !important; } /* 5) Active language highlight (GTranslate usually adds current/active state) */ .jago-lang a[class*="active"], .jago-lang a[aria-current="page"]{ background:#0B0F14 !important; color:#fff !important; border-color:#0B0F14 !important; } /* 6) Mobile: keep ultra-compact */ @media (max-width:767px){ .jago-lang a{ padding:7px 9px !important; font-size:11px !important; } } /* ===================================================== JAGO — MOBILE LANGUAGE SWITCH (EN | العربية) Scope: Mobile only Class: .jago-ml Design: Same as desktop (premium pill) Position: Inline with cart ===================================================== */ @media (max-width:767px){ /* 1) Wrapper next to cart */ .jago-ml{ display:inline-flex !important; align-items:center !important; gap:8px !important; white-space:nowrap !important; margin-left:8px !important; /* gap from cart */ } /* 2) Normalize inner elements */ .jago-ml *{ line-height:1 !important; } /* 3) Language buttons */ .jago-ml a{ display:inline-flex !important; align-items:center !important; justify-content:center !important; padding:6px 9px !important; border-radius:999px !important; font-size:11px !important; font-weight:700 !important; letter-spacing:.2px !important; color:#0B0F14 !important; background:rgba(255,255,255,.60) !important; border:1px solid rgba(11,15,20,.16) !important; text-decoration:none !important; box-shadow:0 6px 16px rgba(11,15,20,.10) !important; transition:transform .15s ease, box-shadow .15s ease, opacity .15s ease !important; } /* 4) Hover / tap feedback */ .jago-ml a:hover, .jago-ml a:focus{ transform:translateY(-1px) !important; box-shadow:0 10px 22px rgba(11,15,20,.14) !important; opacity:1 !important; } /* 5) Active language */ .jago-ml a[class*="active"], .jago-ml a[aria-current="page"]{ background:#0B0F14 !important; color:#fff !important; border-color:#0B0F14 !important; } } /* ===================================================== JAGO — MOBILE LANGUAGE DROPDOWN (Premium, compact) - Shows 1 pill button only - Tap opens EN/العربية menu - Works with gt-link - Keeps cart + language side-by-side Scope: Mobile only Requires: .jago-mh-cart, .jago-lang-dd ===================================================== */ @media (max-width:767px){ /* Keep cart + language inline */ .jago-mh-cart, .jago-mh-cart > .e-con-inner, .jago-mh-cart > .elementor-container, .jago-mh-cart .elementor-widget-wrap{ display:flex !important; flex-direction:row !important; align-items:center !important; justify-content:flex-end !important; flex-wrap:nowrap !important; gap:8px !important; } .jago-mh-cart .elementor-widget-menu-cart, .jago-mh-cart .elementor-widget-shortcode{ width:auto !important; flex:0 0 auto !important; margin:0 !important; } /* Dropdown wrapper */ .jago-lang-dd{ position:relative !important; display:inline-flex !important; align-items:center !important; white-space:nowrap !important; flex:0 0 auto !important; margin:0 !important; } /* The single pill button */ .jago-lang-dd .jago-lang-btn{ appearance:none !important; border:1px solid rgba(11,15,20,.14) !important; background:rgba(255,255,255,.55) !important; color:#0B0F14 !important; font-size:11px !important; font-weight:800 !important; line-height:1 !important; padding:7px 10px !important; border-radius:999px !important; display:inline-flex !important; align-items:center !important; gap:6px !important; box-shadow:0 6px 16px rgba(11,15,20,.10) !important; cursor:pointer !important; } .jago-lang-dd .jago-lang-caret{ font-size:11px !important; opacity:.75 !important; transform:translateY(-1px) !important; } /* Dropdown menu (hidden by default) */ .jago-lang-dd .jago-lang-menu{ position:absolute !important; top:calc(100% + 8px) !important; right:0 !important; min-width:150px !important; padding:8px !important; border-radius:14px !important; border:1px solid rgba(11,15,20,.12) !important; background:rgba(242,233,214,.98) !important; /* your beige vibe */ box-shadow:0 18px 45px rgba(11,15,20,.18) !important; display:none !important; z-index:99999 !important; } /* Show menu on tap/focus (CSS-only) */ .jago-lang-dd:focus-within .jago-lang-menu{ display:block !important; } /* Links inside menu */ .jago-lang-dd .jago-lang-menu a{ display:flex !important; align-items:center !important; justify-content:flex-start !important; padding:10px 10px !important; border-radius:12px !important; font-size:12px !important; font-weight:700 !important; color:#0B0F14 !important; text-decoration:none !important; white-space:nowrap !important; } .jago-lang-dd .jago-lang-menu a:hover{ background:rgba(11,15,20,.08) !important; } } @media (max-width:1024px){ /* default closed */ .jago-mh-menu .elementor-nav-menu--dropdown .sub-menu{ display:none !important; } /* open */ .jago-mh-menu .elementor-nav-menu--dropdown li.jb-open > .sub-menu{ display:block !important; } /* arrow clickable */ .jago-mh-menu .elementor-nav-menu--dropdown .sub-arrow, .jago-mh-menu .elementor-nav-menu--dropdown .sub-arrow *{ pointer-events:auto !important; cursor:pointer !important; } } /* ========================================================= JAGO — SMALL PATCH (SAFE OVERRIDE) 1) Cart badge number -> BLACK (desktop + mobile) 2) Dropdown hover -> lighter (not too black) Paste at END of your CSS ========================================================= */ /* ============ 1) CART BADGE NUMBER: FORCE BLACK ============ */ /* Elementor menu cart counter often comes via pseudo element */ .elementor-menu-cart__toggle .elementor-button-icon[data-counter]::before, .elementor-menu-cart__toggle .elementor-button-icon[data-counter]::after, .elementor-menu-cart__toggle [data-counter]::before, .elementor-menu-cart__toggle [data-counter]::after, .elementor-menu-cart__toggle .elementor-button-icon-qty, .elementor-menu-cart__toggle .elementor-button-icon-qty *{ color:#0B0F14 !important; /* ✅ number black */ } /* Extra safety: if theme sets badge text color via span */ .elementor-menu-cart__toggle .elementor-button-icon span, .elementor-menu-cart__toggle .elementor-button-icon span *{ color:inherit !important; } /* ============ 2) DROPDOWN HOVER: MAKE LIGHTER ============ */ /* Mobile/Tablet dropdown item hover */ @media (max-width:1024px){ .jago-mh-menu .elementor-nav-menu--dropdown a:hover{ background: rgba(11,15,20,.04) !important; /* ✅ lighter than .06 */ } .jago-mh-menu .elementor-nav-menu--dropdown a:active{ background: rgba(11,15,20,.06) !important; /* ✅ lighter than .08 */ } /* Submenu hover */ .jago-mh-menu .elementor-nav-menu--dropdown .sub-menu a:hover{ background: rgba(11,15,20,.04) !important; } /* Sub-arrow bg was a bit dark on beige */ .jago-mh-menu .elementor-nav-menu--dropdown .sub-arrow{ background: rgba(11,15,20,.05) !important; } } /* Desktop dropdown item hover (submenu) */ @media (min-width:1025px){ .jago-5 :is(ul, .menu, .elementor-nav-menu) li > ul li a:hover{ background: rgba(11,15,20,.04) !important; /* ✅ lighter */ } } @media (max-width:1024px){ .jago-mh-menu .elementor-nav-menu--dropdown .sub-menu{ display:none !important; } .jago-mh-menu .elementor-nav-menu--dropdown li.jb-open > .sub-menu{ display:block !important; } } /* ========================================================= JAGO — MOBILE/TABLET DROPDOWN: REMOVE DARK ACTIVE + LIGHT HOVER Paste at VERY END (last) Fixes: - Dark black bg on "current/active/focus" items - Hover/tap bg becomes very light ========================================================= */ @media (max-width:1024px){ /* 1) HARD RESET any dark background on dropdown links/states */ .jago-mh-menu .elementor-nav-menu--dropdown a, .jago-mh-menu .elementor-nav-menu--dropdown a.elementor-item, .jago-mh-menu .elementor-nav-menu--dropdown a.menu-link, .jago-mh-menu .elementor-nav-menu--dropdown a.elementor-item-active, .jago-mh-menu .elementor-nav-menu--dropdown li.current-menu-item > a, .jago-mh-menu .elementor-nav-menu--dropdown li.current_page_item > a, .jago-mh-menu .elementor-nav-menu--dropdown li.current-menu-ancestor > a, .jago-mh-menu .elementor-nav-menu--dropdown li.current_page_ancestor > a, .jago-mh-menu .elementor-nav-menu--dropdown a:focus, .jago-mh-menu .elementor-nav-menu--dropdown a:focus-visible{ background: transparent !important; background-color: transparent !important; box-shadow: none !important; outline: none !important; } /* 2) Light hover / tap feedback (subtle) */ .jago-mh-menu .elementor-nav-menu--dropdown a:hover{ background: rgba(11,15,20,.025) !important; background-color: rgba(11,15,20,.025) !important; } .jago-mh-menu .elementor-nav-menu--dropdown a:active{ background: rgba(11,15,20,.035) !important; background-color: rgba(11,15,20,.035) !important; transform: scale(.995) !important; } /* 3) Submenu links also */ .jago-mh-menu .elementor-nav-menu--dropdown .sub-menu a:hover{ background: rgba(11,15,20,.025) !important; background-color: rgba(11,15,20,.025) !important; } .jago-mh-menu .elementor-nav-menu--dropdown .sub-menu a:active{ background: rgba(11,15,20,.035) !important; background-color: rgba(11,15,20,.035) !important; } /* 4) Arrow pill a bit lighter (optional but helps) */ .jago-mh-menu .elementor-nav-menu--dropdown .sub-arrow{ background: rgba(11,15,20,.03) !important; } } /* ===================================================== JAGO — DESKTOP LANGUAGE DROPDOWN (Premium) - Same dropdown system as mobile - Hover + click (focus-within) opens - Scope: Desktop only (>=1025px) Requires: .jago-lang-dd markup already added ===================================================== */ @media (min-width:1025px){ /* wrapper */ .jago-lang-dd{ position:relative !important; display:inline-flex !important; align-items:center !important; white-space:nowrap !important; flex:0 0 auto !important; } /* button (single pill) */ .jago-lang-dd .jago-lang-btn{ appearance:none !important; border:1px solid rgba(11,15,20,.14) !important; background:rgba(255,255,255,.55) !important; color:#0B0F14 !important; font-size:12px !important; font-weight:900 !important; line-height:1 !important; padding:10px 14px !important; border-radius:999px !important; display:inline-flex !important; align-items:center !important; gap:8px !important; box-shadow:0 10px 24px rgba(11,15,20,.12) !important; cursor:pointer !important; transition:transform .15s ease, box-shadow .15s ease, filter .15s ease !important; } .jago-lang-dd .jago-lang-btn:hover{ filter:brightness(1.02) !important; transform:translateY(-1px) !important; box-shadow:0 14px 30px rgba(11,15,20,.14) !important; } .jago-lang-dd .jago-lang-caret{ font-size:12px !important; opacity:.75 !important; transform:translateY(-1px) !important; } /* dropdown menu */ .jago-lang-dd .jago-lang-menu{ position:absolute !important; top:calc(100% + 10px) !important; right:0 !important; min-width:190px !important; padding:10px !important; border-radius:18px !important; border:1px solid rgba(11,15,20,.12) !important; /* navbar beige vibe */ background:rgba(242,233,214,.98) !important; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow:0 22px 60px rgba(11,15,20,.18) !important; display:none !important; z-index:999999 !important; } /* open on hover (desktop) */ .jago-lang-dd:hover .jago-lang-menu{ display:block !important; } /* open on click (focus) */ .jago-lang-dd:focus-within .jago-lang-menu{ display:block !important; } /* menu links */ .jago-lang-dd .jago-lang-menu a{ display:flex !important; align-items:center !important; justify-content:flex-start !important; padding:12px 12px !important; border-radius:14px !important; font-size:13px !important; font-weight:800 !important; color:#0B0F14 !important; text-decoration:none !important; white-space:nowrap !important; transition:background .16s ease, transform .16s ease !important; } .jago-lang-dd .jago-lang-menu a:hover{ background:rgba(11,15,20,.05) !important; transform:translateX(2px) !important; } /* active language highlight */ .jago-lang-dd .jago-lang-menu a[class*="active"], .jago-lang-dd .jago-lang-menu a[aria-current="page"]{ background: rgba(11,15,20,.08) !important; } } /* ========================================================= JAGO — CART BADGE GAP (FINAL UPDATED) Scope: .jago-7 (cart pill only) Change: Badge a bit more UP + OUT No other design change ========================================================= */ /* anchor safety */ .jago-7, .jago-7 .elementor-menu-cart__toggle_button, .jago-7 .elementor-menu-cart__toggle_button .elementor-button-icon, .jago-7 .elementor-menu-cart__toggle_button .elementor-button-icon-wrapper{ position: relative !important; overflow: visible !important; } /* badge position — increased gap */ .jago-7 .elementor-menu-cart__toggle_button .elementor-button-icon-qty{ position: absolute !important; top: -10px !important; /* ✅ আগের চেয়ে আরও উপরে */ right: -10px !important; /* ✅ কার্ট থেকে গ্যাপ স্পষ্ট */ /* ❌ কোনো size / color / bold change নয় */ } /* ========================================================= JAGO — MOBILE CART BADGE GAP (MOBILE NAV ONLY) Scope: Mobile header cart Change: Badge a bit UP + OUT No design / size / color change ========================================================= */ @media (max-width: 767px){ /* anchor safety for mobile header cart */ .jago-mh-cart, .jago-mh-cart .elementor-menu-cart__toggle_button, .jago-mh-cart .elementor-button-icon, .jago-mh-cart .elementor-button-icon-wrapper{ position: relative !important; overflow: visible !important; } /* mobile badge position */ .jago-mh-cart .elementor-button-icon-qty{ position: absolute !important; top: -11px !important; /* ✅ মোবাইলে একটু বেশি উপরে */ right: -11px !important;/* ✅ কার্ট থেকে স্পষ্ট গ্যাপ */ /* ❌ nothing else touched */ } } /* ========================================================= JAGO — REMOVE SHOP NOW ARROW (MOBILE ONLY) Scope: Mobile navbar Effect: Only arrow icon removed No layout / spacing / click behavior change ========================================================= */ @media (max-width:1024px){ /* Elementor submenu arrow (most common) */ .jago-mh-menu .sub-arrow, .jago-mh-menu .dropdown-menu-toggle, .jago-mh-menu .elementor-nav-menu--dropdown .sub-arrow, .jago-mh-menu .elementor-nav-menu--dropdown .dropdown-menu-toggle{ display: none !important; } /* Extra safety: SVG arrow if injected directly */ .jago-mh-menu svg[class*="caret"], .jago-mh-menu svg[class*="arrow"]{ display: none !important; } /* Remove reserved space so text stays aligned */ .jago-mh-menu .elementor-nav-menu--dropdown li.menu-item-has-children > a{ padding-right: 12px !important; } } /* ========================================================= JAGO — TABLET HEADER = MOBILE-LIKE (UPDATED v2) Scope: Tablet only (768px–1024px) Fix: - Language stays NEXT TO cart (same row) - Right group never wraps - Logo stays centered - No change to Desktop / Mobile ========================================================= */ @media (min-width:768px) and (max-width:1024px){ /* 1) Main header row */ .jago-mh, .jago-mh > .e-con-inner{ display:flex !important; align-items:center !important; justify-content:space-between !important; flex-wrap:nowrap !important; gap:14px !important; } /* 2) Left: menu */ .jago-mh-menu{ order:1 !important; flex:0 0 auto !important; display:flex !important; align-items:center !important; justify-content:flex-start !important; } /* 3) Center: logo */ .jago-mh-logo{ order:2 !important; flex:1 1 auto !important; display:flex !important; align-items:center !important; justify-content:center !important; min-width:0 !important; text-align:center !important; } .jago-mh-logo img{ max-height:36px !important; width:auto !important; } /* 4) Right group: CART + LANGUAGE (one line, no wrap) */ .jago-mh-cart{ order:3 !important; flex:0 0 auto !important; display:flex !important; flex-direction:row !important; align-items:center !important; justify-content:flex-end !important; flex-wrap:nowrap !important; white-space:nowrap !important; gap:10px !important; } /* IMPORTANT: Elementor container/widget wrappers sometimes force 100% width */ .jago-mh-cart, .jago-mh-cart > .e-con-inner, .jago-mh-cart > .elementor-container, .jago-mh-cart .elementor-widget-wrap{ display:flex !important; flex-direction:row !important; align-items:center !important; justify-content:flex-end !important; flex-wrap:nowrap !important; gap:10px !important; width:auto !important; } /* Make both widgets (Menu Cart + Shortcode) auto width (so it stays beside) */ .jago-mh-cart .elementor-widget-menu-cart, .jago-mh-cart .elementor-widget-shortcode{ width:auto !important; flex:0 0 auto !important; margin:0 !important; } /* If shortcode inner div (.jago-ml / .jago-lang-dd) takes full width, stop it */ .jago-mh-cart .jago-ml, .jago-mh-cart .jago-lang-dd{ display:inline-flex !important; align-items:center !important; flex:0 0 auto !important; width:auto !important; margin:0 !important; } /* A little premium spacing + alignment for the language button */ .jago-mh-cart .jago-lang-btn{ margin-left:2px !important; padding:8px 12px !important; border-radius:999px !important; } /* 5) Tablet dropdown panel position (unchanged behavior) */ .jago-mh-menu .elementor-nav-menu--dropdown{ left:0 !important; right:auto !important; top:calc(100% + 12px) !important; width:min(420px, calc(100vw - 28px)) !important; } /* 6) Safety: no accidental bg changes */ .jago-mh, .jago-mh-menu .elementor-widget-container, .jago-mh-logo .elementor-widget-container, .jago-mh-cart .elementor-widget-container{ background:transparent !important; } } /* ===================================================== JAGO — TABLET: FLAG-ONLY LANGUAGE DROPDOWN (LIKE MOBILE) Scope: Tablet only (768–1024px) Goal: - Hide "English العربية" text outside - Show only flag + caret - Dropdown opens on tap (focus-within) - No change on mobile/desktop ===================================================== */ @media (min-width:768px) and (max-width:1024px){ /* 0) Ensure wrapper behaves like dropdown */ .jago-mh-cart .jago-lang-dd{ position: relative !important; display: inline-flex !important; align-items: center !important; width: auto !important; } /* 1) HIDE the outside language text links (English / العربية) on tablet (keep dropdown menu links visible) */ .jago-mh-cart .jago-lang-dd > a, .jago-mh-cart .jago-lang-dd > span, .jago-mh-cart .jago-lang-dd > div:not(.jago-lang-menu){ display: none !important; } /* If your GTranslate links are inside but not in .jago-lang-menu */ .jago-mh-cart .jago-lang-dd :is(.gt_switcher, .gt_.elementor-44){ display: none !important; } /* 2) Show ONLY the flag button */ .jago-mh-cart .jago-lang-dd .jago-lang-btn{ display: inline-flex !important; align-items: center !important; gap: 8px !important; padding: 8px 12px !important; border-radius: 999px !important; border: 1px solid rgba(11,15,20,.14) !important; background: rgba(255,255,255,.55) !important; box-shadow: 0 8px 20px rgba(11,15,20,.10) !important; cursor: pointer !important; } /* 3) If button text exists (like "Lang") hide it; keep flag */ .jago-mh-cart .jago-lang-dd .jago-lang-btn{ font-size: 0 !important; /* hides any text */ line-height: 0 !important; } /* Keep the flag image visible */ .jago-mh-cart .jago-lang-dd .jago-lang-btn img, .jago-mh-cart .jago-lang-dd .jago-lang-btn svg{ width: 22px !important; height: 16px !important; display: inline-block !important; } /* Keep caret visible */ .jago-mh-cart .jago-lang-dd .jago-lang-caret{ font-size: 12px !important; line-height: 1 !important; opacity: .75 !important; display: inline-block !important; transform: translateY(-1px) !important; } /* 4) Dropdown menu open on tap */ .jago-mh-cart .jago-lang-dd .jago-lang-menu{ position: absolute !important; top: calc(100% + 10px) !important; right: 0 !important; min-width: 180px !important; padding: 10px !important; border-radius: 18px !important; border: 1px solid rgba(11,15,20,.12) !important; background: rgba(242,233,214,.98) !important; box-shadow: 0 22px 60px rgba(11,15,20,.18) !important; display: none !important; z-index: 999999 !important; } .jago-mh-cart .jago-lang-dd:focus-within .jago-lang-menu{ display: block !important; } /* 5) Menu links styling */ .jago-mh-cart .jago-lang-dd .jago-lang-menu a{ display: flex !important; align-items: center !important; justify-content: flex-start !important; padding: 12px 12px !important; border-radius: 14px !important; font-size: 13px !important; font-weight: 800 !important; color: #0B0F14 !important; text-decoration: none !important; white-space: nowrap !important; } .jago-mh-cart .jago-lang-dd .jago-lang-menu a:hover{ background: rgba(11,15,20,.05) !important; } } /* ========================================= DESKTOP — FIX: Mini Cart product list cut Paste at END ========================================= */ @media (min-width:1025px){ /* Drawer main + its inner wrappers must not clip */ .elementor-menu-cart__main, .elementor-menu-cart__main *{ overflow: visible !important; } /* Specifically product list area (where it usually clips) */ .elementor-menu-cart__products, .elementor-menu-cart__products *, .woocommerce-mini-cart, .woocommerce-mini-cart *{ overflow: visible !important; } /* If Elementor sets fixed height + scroll, keep scroll but avoid clipping cards */ .elementor-menu-cart__products{ height: auto !important; max-height: none !important; } } @media (min-width:1025px){ .elementor-menu-cart__container, .elementor-menu-cart__container *{ overflow: visible !important; } } /* ========================================================= DESKTOP — FINAL PATCH: View Cart / Checkout visible again Fix: Products scrolls, footer stays visible Paste at VERY END ========================================================= */ @media (min-width:1025px){ /* 1) Make drawer a column layout so footer can sit below */ .elementor-menu-cart__main{ display:flex !important; flex-direction:column !important; max-height: calc(100vh - 24px) !important; /* safe */ } /* 2) Inner widget must allow flex children to shrink */ .elementor-menu-cart__main .widget_shopping_cart_content{ display:flex !important; flex-direction:column !important; min-height: 0 !important; flex: 1 1 auto !important; } /* 3) Products area should scroll (NOT expand forever) */ .elementor-menu-cart__products{ flex: 1 1 auto !important; min-height: 0 !important; overflow: auto !important; /* ✅ scroll comes back */ height: auto !important; max-height: none !important; } /* 4) Keep product card internals unclipped (your original goal) */ .elementor-menu-cart__product, .elementor-menu-cart__product *{ overflow: visible !important; } /* 5) Footer buttons always accessible */ .elementor-menu-cart__footer-buttons{ flex: 0 0 auto !important; position: sticky !important; bottom: 0 !important; z-index: 5 !important; } } /* ========================================================= DESKTOP — Make cart like MOBILE (no overlay, same flow) Paste at VERY END ========================================================= */ @media (min-width:1025px){ /* 1) Main drawer becomes column layout */ .elementor-menu-cart__main{ display:flex !important; flex-direction:column !important; height: calc(100vh - 24px) !important; /* visible area */ max-height: calc(100vh - 24px) !important; overflow: hidden !important; /* stop overlap */ } /* 2) Inner cart wrapper must also be a column */ .elementor-menu-cart__main .widget_shopping_cart_content{ display:flex !important; flex-direction:column !important; min-height: 0 !important; flex: 1 1 auto !important; } /* 3) Products list will scroll (like mobile) */ .elementor-menu-cart__products{ flex: 1 1 auto !important; min-height: 0 !important; overflow-y: auto !important; /* ✅ scroll here */ overflow-x: hidden !important; height: auto !important; max-height: none !important; padding-bottom: 12px !important; /* breathing space */ } /* 4) Subtotal sits below products (not sticky) */ .elementor-menu-cart__subtotal{ flex: 0 0 auto !important; position: static !important; bottom: auto !important; z-index: auto !important; } /* 5) Footer buttons below subtotal (NOT overlay / NOT sticky) */ .elementor-menu-cart__footer-buttons{ flex: 0 0 auto !important; position: static !important; /* ✅ remove overlay */ bottom: auto !important; z-index: auto !important; margin-top: 0 !important; padding-bottom: 14px !important; } /* 6) Keep product cards pretty (no clipping inside cards) */ .elementor-menu-cart__product, .elementor-menu-cart__product *{ overflow: visible !important; } } /* ========================================= JAGO — DESKTOP CART BADGE GAP (FINAL) Paste at VERY END ========================================= */ @media (min-width:1025px){ /* anchor safety */ .jago-7, .jago-7 .elementor-menu-cart__toggle, .jago-7 .elementor-menu-cart__toggle_button, .jago-7 .elementor-button, .jago-7 .elementor-button-icon, .jago-7 .elementor-button-icon-wrapper{ position: relative !important; overflow: visible !important; } /* ✅ Case A: badge is a real element */ .jago-7 .elementor-button-icon-qty{ position: absolute !important; top: -12px !important; /* UP */ right: -14px !important; /* OUT = gap */ } /* ✅ Case B: badge comes via data-counter pseudo */ .jago-7 .elementor-button-icon[data-counter]::before, .jago-7 .elementor-button-icon[data-counter]::after, .jago-7 [data-counter]::before, .jago-7 [data-counter]::after{ position: absolute !important; top: -12px !important; /* UP */ right: -14px !important; /* OUT = gap */ } } /* ========================================= JAGO — DESKTOP CART BADGE GAP (WORKING) Paste at VERY END ========================================= */ @media (min-width:1025px){ /* anchor: toggle button + icon wrapper */ .jago-1 a#elementor-menu-cart__toggle_button, .jago-1 a#elementor-menu-cart__toggle_button .elementor-button-icon{ position: relative !important; overflow: visible !important; } /* ✅ badge element (your case) */ .jago-1 a#elementor-menu-cart__toggle_button .elementor-button-icon-qty{ position: absolute !important; top: -10px !important; /* up */ right: -12px !important; /* out = gap */ z-index: 99 !important; } } /* ============================== FIX: Navbar gap remove (Desktop) ============================== */ @media (min-width:1025px){ :root{ --jb-nav-reserve: 76px; } /* <-- এখানে আপনার real navbar height দিন */ body{ padding-top: var(--jb-nav-reserve) !important; } } /* ========================================================= JAGO — MINI CART THUMB: HARD FIX (Remove bottom gap + full fit) Paste at VERY END ========================================================= */ /* Apply ONLY inside Elementor Menu Cart drawer */ .elementor-menu-cart__container .elementor-menu-cart__product-image, .elementor-menu-cart__container .woocommerce-mini-cart .product-thumbnail{ display:flex !important; align-items:center !important; justify-content:center !important; line-height:0 !important; font-size:0 !important; padding:0 !important; margin:0 !important; height:56px !important; /* keep your current box size */ width:56px !important; overflow:hidden !important; /* ensures no spill */ } /* Make anchor fill the box */ .elementor-menu-cart__container .elementor-menu-cart__product-image a, .elementor-menu-cart__container .woocommerce-mini-cart .product-thumbnail a{ display:block !important; width:100% !important; height:100% !important; line-height:0 !important; font-size:0 !important; margin:0 !important; padding:0 !important; } /* Make image fill fully (no baseline gap) */ .elementor-menu-cart__container .elementor-menu-cart__product-image img, .elementor-menu-cart__container .woocommerce-mini-cart .product-thumbnail img{ display:block !important; width:100% !important; height:100% !important; object-fit:cover !important; margin:0 !important; padding:0 !important; vertical-align:top !important; } /* ========================================================= JAGO — MINI CART REMOVE (×) TOP-RIGHT CORNER (RED) Paste at VERY END — no other changes ========================================================= */ /* Make each mini-cart item a positioning context */ .elementor-menu-cart__container .elementor-menu-cart__product, .elementor-menu-cart__container .woocommerce-mini-cart .mini_cart_item{ position: relative !important; } /* Move remove button to top-right corner */ .elementor-menu-cart__container .elementor-menu-cart__product-remove, .elementor-menu-cart__container .woocommerce-mini-cart a.remove{ position: absolute !important; top: 8px !important; right: 8px !important; width: 22px !important; height: 22px !important; min-width: 22px !important; min-height: 22px !important; padding: 0 !important; margin: 0 !important; border-radius: 999px !important; background: #e53935 !important; /* ✅ red */ border: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; line-height: 1 !important; font-size: 14px !important; font-weight: 900 !important; color: #fff !important; box-shadow: 0 10px 18px rgba(11,15,20,.14) !important; z-index: 50 !important; } /* Ensure the “×” stays white even if theme injects */ .elementor-menu-cart__container .woocommerce-mini-cart a.remove, .elementor-menu-cart__container .woocommerce-mini-cart a.remove:hover, .elementor-menu-cart__container .woocommerce-mini-cart a.remove:focus{ color: #fff !important; text-decoration: none !important; opacity: 1 !important; } /* Hover/active micro feedback (optional, still only the remove button) */ .elementor-menu-cart__container .woocommerce-mini-cart a.remove:hover, .elementor-menu-cart__container .elementor-menu-cart__product-remove:hover{ filter: brightness(1.05) !important; transform: translateY(-1px) !important; } .elementor-menu-cart__container .woocommerce-mini-cart a.remove:active, .elementor-menu-cart__container .elementor-menu-cart__product-remove:active{ transform: scale(.97) !important; } /* ========================================================= JAGO — HARD FIX: MOBILE HEADER SEAM / BLACK LINE Paste at VERY END (last rule) ========================================================= */ @media (max-width:1024px){ /* 1) Force same beige on the exact mobile header row + children */ .jago-mh, .jago-mh > .e-con-inner, .jago-mh-menu, .jago-mh-menu > .elementor-widget-container, .jago-mh-logo, .jago-mh-logo > .elementor-widget-container, .jago-mh-cart, .jago-mh-cart > .elementor-widget-container{ background: #F2E9D6 !important; background-image: none !important; } /* 2) Kill any border/divider/shadow that creates the vertical seam */ .jago-mh, .jago-mh > .e-con-inner, .jago-mh-menu, .jago-mh-logo, .jago-mh-cart{ border: 0 !important; box-shadow: none !important; outline: 0 !important; } /* 3) Extra: sometimes the seam is from menu widget container itself */ .jago-mh-menu .elementor-element, .jago-mh-menu .elementor-nav-menu__container, .jago-mh-menu .elementor-nav-menu--main{ background: transparent !important; border: 0 !important; box-shadow: none !important; } /* 4) Fractional pixel seam fix (common in flex) */ .jago-mh > .e-con-inner{ gap: 0 !important; transform: translateZ(0); backface-visibility: hidden; } } /* ========================================================= JAGO — MOBILE/TABLET DROPDOWN: FORCE BEIGE EVERYWHERE Paste at VERY END ========================================================= */ @media (max-width:1024px){ /* 1) Dropdown panel background (main container) */ .jago-mh-menu .elementor-nav-menu--dropdown, .jago-mh-menu .elementor-nav-menu__container, .jago-mh-menu .elementor-nav-menu__container .elementor-nav-menu--dropdown{ background: #F2E9D6 !important; /* ✅ Beige */ background-image: none !important; } /* 2) Dropdown UL + LI also beige (sometimes LI keeps white) */ .jago-mh-menu .elementor-nav-menu--dropdown ul, .jago-mh-menu .elementor-nav-menu--dropdown li{ background: transparent !important; /* panel beige visible */ background-image: none !important; } /* 3) Links should NOT paint white/black background by theme */ .jago-mh-menu .elementor-nav-menu--dropdown a, .jago-mh-menu .elementor-nav-menu--dropdown a.elementor-item, .jago-mh-menu .elementor-nav-menu--dropdown a.elementor-item-active, .jago-mh-menu .elementor-nav-menu--dropdown li.current-menu-item > a, .jago-mh-menu .elementor-nav-menu--dropdown li.current_page_item > a{ background: transparent !important; background-image: none !important; box-shadow: none !important; } /* 4) Hover / tap — very light (still beige vibe) */ .jago-mh-menu .elementor-nav-menu--dropdown a:hover{ background: rgba(11,15,20,.03) !important; } .jago-mh-menu .elementor-nav-menu--dropdown a:active{ background: rgba(11,15,20,.04) !important; } /* 5) Submenu panel also beige */ .jago-mh-menu .elementor-nav-menu--dropdown .sub-menu{ background: #F2E9D6 !important; background-image: none !important; border: 1px solid rgba(11,15,20,.10) !important; } /* Submenu links hover */ .jago-mh-menu .elementor-nav-menu--dropdown .sub-menu a:hover{ background: rgba(11,15,20,.03) !important; } }/* End custom CSS */