/* Theme Name: StoreX Child Template: storex Version: 1.0.7 Description: EBK Solutions child theme */ /* NOTE: This file must be enqueued via functions.php using get_stylesheet_directory_uri() - it is NOT auto-loaded by WordPress. The enqueue is in ebk_enqueue_styles() in functions.php. */ /* ============================================================================= 0. GLOBAL BOX-SIZING ============================================================================= */ *, *::before, *::after { box-sizing: border-box; } html { overflow-x: hidden; } body { max-width: 100%; } /* ============================================================================= 1. HAMBURGER - suppress original toggler ============================================================================= */ .mobile-nav-toggler, button.mobile-menu-btn { display: none !important; } body.mobile-menu-visible { overflow: auto !important; } /* ============================================================================= 2. LOGO - constrain the container AND the image functions.php (ebk_constrain_logo filter) removes the HTML width/height attributes and adds inline styles. These CSS rules are a belt-and-braces backup and handle the responsive breakpoint changes. ============================================================================= */ /* Container: prevents the flex row in .upper-inner from expanding */ .header-upper .logo, .upper-inner .logo { max-height: 70px; overflow: hidden; display: flex; align-items: center; flex-shrink: 1; } /* Link wrapper */ .header-upper .logo a, .upper-inner .logo a, .header-upper .logo a.custom-logo-link, a.custom-logo-link { display: inline-flex; align-items: center; max-height: 70px; line-height: 1; } /* Image - desktop */ .header-upper .logo img, .upper-inner .logo img, .header-upper .logo a img, .upper-inner .logo a img, img.custom-logo, .custom-logo-link img, .custom-logo-link img.custom-logo { max-height: 52px !important; max-width: 200px !important; width: auto !important; height: auto !important; object-fit: contain !important; display: block; } /* Tablet */ @media screen and (max-width: 991px) { .header-upper .logo img, .upper-inner .logo img, img.custom-logo, .custom-logo-link img.custom-logo { max-height: 58px !important; max-width: 210px !important; } } /* Mobile */ @media screen and (max-width: 767px) { .header-upper .logo img, .upper-inner .logo img, img.custom-logo, .custom-logo-link img.custom-logo { max-height: 64px !important; max-width: 220px !important; } } /* ============================================================================= 3. CATEGORY DROPDOWN -
/ with [hamburger-icon] + "Categories" label ----------------------------------------------------------------------------- The summary uses the Unicode [hamburger-icon] tribar character (☰) + text label. This is a rendered text character - no CSS bars, no image, no SVG - so it is guaranteed to be visible on every browser and screen size. Bootstrap 4's summary { display:list-item } is defeated with flex !important. ============================================================================= */ /* Let the absolute dropdown panel escape any parent overflow */ .header-lower, .outer-box, div.menu-area { overflow: visible !important; } /* Extra vertical breathing room so the category button, nav links, and account/cart icons aren't flush against the top/bottom edge of the bar */ .outer-box { padding-top: 10px; padding-bottom: 10px; align-items: center; } /* Wrapper - flex item inside .menu-area */ details.ebk-cat-details { position: relative; flex-shrink: 0; display: flex; align-items: stretch; } /* -- Toggle button ------------------------------------------------------ display:flex !important beats Bootstrap's list-item. flex-direction:row puts the [hamburger-icon] icon and "Categories" label side-by-side. min-width ensures the button is always large enough to tap on mobile. */ details.ebk-cat-details > summary { display: flex !important; list-style: none !important; list-style-type: none !important; flex-direction: row !important; align-items: center; justify-content: center; gap: 8px; background: var(--theme-color, rgba(191,113,73,1)); color: #ffffff; padding: 10px 18px; border: none; border-radius: 0; cursor: pointer; white-space: nowrap; min-height: 46px; min-width: 130px; font-size: 14px; font-weight: 600; -webkit-user-select: none; user-select: none; transition: background 0.15s; } /* Remove browser's default disclosure triangle on every engine */ details.ebk-cat-details > summary::-webkit-details-marker { display: none !important; } details.ebk-cat-details > summary::marker { content: none !important; } details.ebk-cat-details > summary::before, details.ebk-cat-details > summary::after { content: none !important; display: none !important; } /* Open state - darker background */ details.ebk-cat-details[open] > summary { background: color-mix(in srgb, var(--theme-color, rgba(191,113,73,1)) 75%, #000 25%); } @supports not (background: color-mix(in srgb, red 50%, blue)) { details.ebk-cat-details[open] > summary { background: rgba(120, 70, 40, 1); } } /* [hamburger-icon] icon */ .ebk-cat-icon { font-size: 22px; line-height: 1; color: inherit; flex-shrink: 0; } /* "Categories" text label */ .ebk-cat-label { font-size: 14px; font-weight: 600; letter-spacing: 0.02em; color: inherit; } /* -- Dropdown panel --------------------------------------------------- */ details.ebk-cat-details .ebk-cat-list { position: absolute; top: 100%; left: 0; z-index: 99999; background: #fff; min-width: 220px; border: 1px solid #e0e0e0; box-shadow: 0 6px 18px rgba(0,0,0,.14); list-style: none !important; margin: 0 !important; padding: 0 !important; } details.ebk-cat-details .ebk-cat-list li { border-bottom: 1px solid #f2f2f2; } details.ebk-cat-details .ebk-cat-list li:last-child { border-bottom: none; } details.ebk-cat-details .ebk-cat-list li a { display: block; padding: 11px 18px; color: #333; font-size: 14px; font-weight: 500; text-decoration: none; white-space: nowrap; transition: background .12s, color .12s; } details.ebk-cat-details .ebk-cat-list li a:hover, details.ebk-cat-details .ebk-cat-list li a[aria-current="page"] { background: var(--theme-color, rgba(191,113,73,1)); color: #fff; } /* ============================================================================= 3c. HEADER SEARCH BAR - all rules are in functions.php wp_add_inline_style() The search form was restructured to a single
element. Flex layout, heights, padding, and button centering are handled inline to bypass CSS file caching. Only fallback/hover kept here. ============================================================================= */ /* Hover state fallback (functions.php covers this too, kept for safety) */ .header-upper .header-search-button:hover { filter: brightness(0.88); } /* ============================================================================= 9. EBK BRAND FILTER - spacing on shop/category archive pages ============================================================================= */ .woocommerce-result-count { display: inline-block !important; margin: 0 20px 1em 0 !important; } .ebk-brand-filter { display: inline-flex !important; vertical-align: middle; } .ebk-brand-filter select { padding: 4px 8px; border-radius: 4px; border: 1px solid #ccc; }