/* Theme Name: Ecomus Child Theme URI: https://wpecomus.com/ Author: DrFuri Author URI: http://drfuri.com/ Description: Multipurpose WooCommerce WordPress Theme Version: 1.0.0 Requires at least: 5.0 Tested up to: 5.8 Requires PHP: 7.0 License: GNU General Public License v2+ License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: ecomus Domain Path: /lang/ Tags: one-column, two-columns, left-sidebar, right-sidebar, full-width-template, post-formats, theme-options, threaded-comments, translation-ready Template: ecomus */ /* ========================================================================== AHL ALKHALEEJ — Mobile Bottom Navigation Bar ========================================================================== */ @media (max-width: 1024px) { :root { --ahlk-nav-primary: var(--e-global-color-primary, #4A2C20); --ahlk-nav-secondary: var(--e-global-color-secondary, #6B3F24); --ahlk-nav-accent: var(--e-global-color-accent, #C99732); --ahlk-nav-text: var(--e-global-color-text, #2B211D); --ahlk-nav-bg: var(--e-global-color-background, #FAF7F1); --ahlk-nav-section: var(--e-global-color-section-background, #F1E9DC); --ahlk-nav-muted: var(--e-global-color-muted-text, #756A63); --ahlk-nav-white: var(--e-global-color-white, #FFFFFF); } /* Floating tray */ #ecomus-mobile-navigation-bar { left: 12px; right: 12px; bottom: 12px; height: auto; min-height: 58px; padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); background-color: var(--ahlk-nav-white); color: var(--ahlk-nav-text); border: 1px solid var(--ahlk-nav-section); border-radius: 28px; box-shadow: 0 4px 24px rgba(43, 33, 29, 0.12); overflow: visible; } /* Keep page content clear of the floating tray */ .ecomus-navigation-bar-show { padding-bottom: calc(12px + 58px + env(safe-area-inset-bottom)) !important; } .ecomus-navigation-bar-show .em-button-go-top, .ecomus-navigation-bar-show .live-sales-notification { bottom: calc(22px + 58px + env(safe-area-inset-bottom)) !important; } .ecomus-navigation-bar-show.ecomus-atc-sticky-height-open { padding-bottom: calc(var(--em-atc-sticky-height) + 12px + 58px + env(safe-area-inset-bottom)) !important; } .ecomus-navigation-bar-show.ecomus-atc-sticky-height-open .ecomus-sticky-add-to-cart { bottom: calc(12px + 58px + env(safe-area-inset-bottom)) !important; } .ecomus-navigation-bar-show.ecomus-atc-sticky-height-open .em-button-go-top, .ecomus-navigation-bar-show.ecomus-atc-sticky-height-open .live-sales-notification { bottom: calc(var(--em-atc-sticky-height) + 22px + 58px + env(safe-area-inset-bottom)) !important; } /* Items */ #ecomus-mobile-navigation-bar .ecomus-mobile-navigation-bar__item { width: 20%; height: auto; min-width: 0; } /* Anchor */ #ecomus-mobile-navigation-bar .ecomus-mobile-navigation-bar__icon { --em-button-color: var(--ahlk-nav-text); --em-button-color-hover: var(--ahlk-nav-text); --em-button-bg-color: transparent; --em-button-bg-color-hover: transparent; --em-button-border-color-hover: transparent; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: auto; min-height: 46px; padding: 0; gap: 0; text-decoration: none; } /* Inner pill wrapper */ .ahlk-nav-content { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 100%; max-width: 72px; padding: 6px 10px; border-radius: 999px; transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease; } /* Icons */ .ahlk-nav-icon { width: 22px; height: 22px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } /* Labels */ .ahlk-nav-label { font-size: 11px; line-height: 1.1; font-weight: 500; color: currentColor; } /* Badge wrapper */ .ahlk-icon-wrap { position: relative; display: inline-flex; line-height: 0; } /* Active state — coffee pill */ #ecomus-mobile-navigation-bar .ecomus-mobile-navigation-bar__icon.is-active .ahlk-nav-content, .search-modal-opened #ecomus-mobile-navigation-bar .ecomus-mobile-navigation-bar__icon--search .ahlk-nav-content, .account-panel-opened #ecomus-mobile-navigation-bar .ecomus-mobile-navigation-bar__icon--account .ahlk-nav-content, .login-modal-opened #ecomus-mobile-navigation-bar .ecomus-mobile-navigation-bar__icon--account .ahlk-nav-content, .cart-panel-opened #ecomus-mobile-navigation-bar .ecomus-mobile-navigation-bar__icon--cart .ahlk-nav-content { background-color: var(--ahlk-nav-primary); color: var(--ahlk-nav-white); box-shadow: 0 2px 8px rgba(74, 44, 32, 0.25); } /* Hover/focus for inactive items */ #ecomus-mobile-navigation-bar .ecomus-mobile-navigation-bar__icon:not(.is-active):hover .ahlk-nav-content, #ecomus-mobile-navigation-bar .ecomus-mobile-navigation-bar__icon:not(.is-active):focus .ahlk-nav-content { background-color: var(--ahlk-nav-bg); color: var(--ahlk-nav-primary); } /* Notification badges — honey gold circles */ #ecomus-mobile-navigation-bar .ecomus-mobile-navigation-bar__icon .header-counter { position: absolute; top: 0; right: 0; min-width: 18px; height: 18px; padding: 0 4px; font-size: 10px; line-height: 14px; font-weight: 600; color: var(--ahlk-nav-white); background-color: var(--ahlk-nav-accent); border: 2px solid var(--ahlk-nav-white); border-radius: 50%; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12); transform: translate(50%, -50%); } #ecomus-mobile-navigation-bar .ecomus-mobile-navigation-bar__icon .header-counter.empty-counter { display: none; } } /* --------------------------------------------------------------- * [Ecomus] Icon Box Carousel — image icon type fix * The widget writes max-width: on the icon container and * adds icon padding around it. With box-sizing:border-box the * was squeezed to 0x0. For image type, drop the padding and let the * image FILL the sized circle (object-fit:cover) so the widget's * "Icon Size" control still controls the rendered size. * --------------------------------------------------------------- */ .ecomus-icon-box.icon-type-image .ecomus-icon-box__icon { padding: 0 !important; overflow: hidden; aspect-ratio: 1 / 1; } .ecomus-icon-box.icon-type-image .ecomus-icon-box__icon img { display: block; width: 100%; height: 100%; object-fit: cover; }