.nav-account-wrap { position: relative; display: inline-block; margin-top: 10px; z-index: 99999; } .nav-btn { display: inline-flex; align-items: center; gap: 8px; padding: 15px 15px 15px 15px; border-radius: 20px; font-size: 14px; font-weight: 600; cursor: pointer; border: 1px solid #ddd; text-decoration: none; background: #fff; color: #535353; white-space: nowrap; font-family: "Poppins", sans-serif; width: 180px; } .nav-btn:hover { background: #f5f5f5; color: #535353; border-color: #535353; } #nav-chevron { transition: transform 0.2s; } .nav-dropdown { display: none; position: absolute; top: calc(100% + 10px); right: 0; background: #fff; border: 1px solid #e5e7eb; border-radius: 14px; min-width: 185px; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.1); overflow: hidden; z-index: 99999 !important; } .nav-dropdown.open { display: block; } .nav-dropdown-item { display: flex; align-items: center; gap: 10px; padding: 13px 18px; font-size: 14px; color: #535353; text-decoration: none; } .nav-dropdown-item:hover { background: #f3f4f6; } .nav-logout { color: #c0392b; } .nav-dropdown-divider { height: 1px; background: #e5e7eb; margin: 4px 0; } /* Login state toggle — WordPress adds .logged-in to automatically */ #nav-signin-btn { display: inline-flex; } #nav-account-toggle { display: none; } body.logged-in #nav-signin-btn { display: none; } body.logged-in #nav-account-toggle { display: block; } .nav-dropdown-item:hover { background: #535353; color: #fff; } .nav-dropdown-item:hover svg { stroke: #fff; } .nav-logout:hover { background: #535353; color: #fff; } .nav-logout:hover svg { stroke: #fff; } #nav-account-toggle button:focus { background-color: #fff; } span.ast-woo-product-category { margin-left: 14px; } .hg-contact-wrap { font-family: "Poppins", sans-serif; display: flex; flex-direction: column; gap: 10px; max-width: 480px; } /* DEFAULT → CENTER */ .custom-menu { display: flex; justify-content: center; transition: all 0.35s ease; } /* ON SCROLL → LEFT */ .smart-menu.show .custom-menu { justify-content: flex-start !important; } /* Container layout */ .smart-menu .e-con-inner { display: flex; align-items: center !important; justify-content: center !important; transition: all 0.35s ease !important; } /* On scroll → space between logo + menu */ .smart-menu.show .e-con-inner { justify-content: space-between; } .smart-menu.show .custom-menu { margin-left: 20px; } .custom-menu { transform: translateX(0); } .smart-menu.show .custom-menu { transform: translateX(-10px); } .smart-menu.scrolled { background: #2c3e50; /* match your blue */ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); } /* Default hidden */ .logo-stick { opacity: 0; visibility: hidden; transform: translateY(-10px); transition: all 0.3s ease; } /* Show ONLY when scrolling up */ .smart-menu.show .logo-stick { opacity: 1; visibility: visible; transform: translateY(0); } .eael-simple-menu-container.preset-2 { background-color: transparent !important; border: none !important; } .eael-simple-menu-container.preset-2 .eael-simple-menu.eael-simple-menu-horizontal:not( .eael-simple-menu-responsive ) > li:first-child > a { border-left: none !important; } .eael-simple-menu-container.preset-2 .eael-simple-menu.eael-simple-menu-horizontal:not( .eael-advanced-menu-responsive ) > li > a { border-right: none !important; } .eael-simple-menu-container.preset-2 .eael-simple-menu li.current-menu-ancestor > a.eael-item-active, .eael-simple-menu-container.preset-2 .eael-simple-menu li:hover > a, .eael-simple-menu-container.preset-2 .eael-simple-menu li.current-menu-item > a.eael-item-active { color: #fff !important; font-weight: 700; } .sticky-header { position: fixed; top: 0; width: 100%; z-index: 10001; background: #fff; } /* Sticky Header */ .sticky-header { position: sticky; top: 0; z-index: 10001; background: #fff; /* important to avoid transparency */ transition: all 0.3s ease; } /* Gradient border bottom + soft shadow */ .sticky-header { position: relative; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.1); overflow: visible !important; } .sticky-header::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: linear-gradient( 90deg, rgba(255, 255, 255, 0) 0%, rgba(200, 200, 200, 0.8) 15%, rgba(100, 100, 100, 1) 35%, rgba(20, 20, 20, 1) 50%, rgba(100, 100, 100, 1) 65%, rgba(200, 200, 200, 0.8) 85%, rgba(255, 255, 255, 0) 100% ); pointer-events: none; } /* On scroll — glow intensifies */ .sticky-header.scrolled { box-shadow: 0 6px 28px rgba(0, 0, 0, 0.15); } .sticky-header.scrolled::after { height: 4px; background: linear-gradient( 90deg, rgba(255, 255, 255, 0) 0%, rgba(220, 220, 220, 1) 10%, rgba(120, 120, 120, 1) 30%, rgba(10, 10, 10, 1) 50%, rgba(120, 120, 120, 1) 70%, rgba(220, 220, 220, 1) 90%, rgba(255, 255, 255, 0) 100% ); } .eael-simple-menu-container.preset-2 .eael-simple-menu li > a { color: #fff !important; } /* HERO SECTION MAIN */ .hero-dark { position: relative; border-radius: 20px; overflow: hidden; padding: 0 20px; /* side spacing like your design */ } /* REMOVE ELEMENTOR CONTAINER LIMIT */ .hero-dark .e-con-inner, .hero-dark .elementor-container { max-width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; } /* BACKGROUND GRADIENT (BEHIND CONTENT) */ .hero-dark::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient( 0deg, rgba(33, 42, 46, 0) 0%, #212a2e 65.90597587719299% ); border-radius: 40px; } /* MAKE CONTENT ABOVE GRADIENT */ .hero-dark .elementor-widget, .hero-dark .e-con-inner, .hero-dark .elementor-column, .hero-dark .elementor-element { position: relative; z-index: 2; } /* OPTIONAL: IMPROVE TEXT VISIBILITY */ .hero-dark h1, .hero-dark h2, .hero-dark p { color: #ffffff; } /* OPTIONAL: BUTTON STYLE (MATCH YOUR DESIGN) */ .hero-dark .elementor-button { border-radius: 30px; padding: 10px 22px; font-weight: 600; } #mailpoet_form_1 { width: 50%; margin: auto; } .mailpoet_submit { padding: 5px; margin: 0 auto; font-family: "Poppins"; font-size: 16px; line-height: 1.5; border-color: transparent; width: 30%; border-radius: 20px !important; height: 41px !important; font-weight: 500; background-color: #3d9be9 !important; border-color: #3d9be9 !important; color: #fff !important; } .mailpoet_text { text-align: center !important; } /* ─── Product Grid — Redesign ─────────────────────────────────────────────── */ /* Grid layout */ .eael-product-grid.eael-product-simple .woocommerce ul.products { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 28px !important; list-style: none !important; padding: 0 !important; margin: 0 !important; } /* Card shell */ .eael-product-grid.eael-product-simple .woocommerce ul.products li.product { background: #ffffff; border-radius: 20px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); overflow: hidden; display: flex !important; flex-direction: column !important; transition: transform 0.3s ease, box-shadow 0.3s ease; padding: 0 !important; margin: 0 !important; width: auto !important; border-top: 3px solid #3d9be9; } .eael-product-grid.eael-product-simple .woocommerce ul.products li.product:hover { transform: translateY(-8px); box-shadow: 0 16px 40px rgba(61, 155, 233, 0.18); } /* Inner wrap */ .eael-product-grid.eael-product-simple .woocommerce ul.products li.product .eael-product-wrap { padding: 0 !important; display: flex; flex-direction: column; flex: 1; } /* Image link wrapper */ .eael-product-grid.eael-product-simple .woocommerce ul.products li.product a.woocommerce-loop-product__link { display: block; overflow: hidden; position: relative; background: #fff; } /* Gradient shimmer at bottom of image */ .eael-product-grid.eael-product-simple .woocommerce ul.products li.product a.woocommerce-loop-product__link::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 60px; background: linear-gradient(to top, rgba(255, 255, 255, 0.55), transparent); pointer-events: none; } /* Image */ .eael-product-grid.eael-product-simple .woocommerce ul.products li.product img { width: 100% !important; height: 280px !important; object-fit: cover; border-radius: 0 !important; display: block; transition: transform 0.45s ease; } .eael-product-grid.eael-product-simple .woocommerce ul.products li.product:hover img { transform: scale(1.07); } /* Text area */ .eael-product-grid.eael-product-simple .woocommerce ul.products li.product .woocommerce-loop-product__title { font-family: "Poppins", sans-serif; font-size: 13.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: #1a2733; padding: 20px 20px 6px; margin: 0; line-height: 1.45; } /* Price */ .eael-product-grid.eael-product-simple .woocommerce ul.products li.product .price { font-family: "Poppins", sans-serif; font-size: 20px; font-weight: 700; color: #1a2733; padding: 10px 20px 18px; display: block; margin-top: auto; } .eael-product-grid.eael-product-simple .woocommerce ul.products li.product .price bdi, .eael-product-grid.eael-product-simple .woocommerce ul.products li.product .price .woocommerce-Price-amount { color: #1a2733; } /* Buy Now button */ .eael-product-grid.eael-product-simple .woocommerce ul.products li.product .button.add_to_cart_button, .eael-product-grid.eael-product-simple .woocommerce ul.products li.product a.button { display: flex; align-items: center; justify-content: center; gap: 8px; width: calc(100% - 40px) !important; margin: 0 20px 20px !important; padding: 14px 20px !important; background: linear-gradient(135deg, #3d9be9 0%, #1a7ecf 100%) !important; color: #fff !important; font-family: "Poppins", sans-serif !important; font-size: 18px !important; font-weight: 600 !important; letter-spacing: 0.06em; text-transform: uppercase; border: none !important; border-radius: 12px !important; cursor: pointer; transition: opacity 0.22s ease, transform 0.2s ease, box-shadow 0.22s ease !important; box-shadow: 0 6px 18px rgba(61, 155, 233, 0.38) !important; text-decoration: none !important; } .eael-product-grid.eael-product-simple .woocommerce ul.products li.product .button.add_to_cart_button:hover, .eael-product-grid.eael-product-simple .woocommerce ul.products li.product a.button:hover { opacity: 0.9; transform: translateY(-2px) !important; box-shadow: 0 10px 28px rgba(61, 155, 233, 0.5) !important; } /* Sale badge */ .eael-product-grid.eael-product-simple .woocommerce ul.products li.product .eael-onsale, .eael-product-grid.eael-product-simple .woocommerce span.onsale { background: #3d9be9; color: #fff; font-family: "Poppins", sans-serif; font-size: 11px; font-weight: 700; padding: 5px 12px; border-radius: 20px; top: 14px !important; left: 14px !important; right: auto !important; min-height: unset !important; min-width: unset !important; line-height: 1.4; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); } /* Responsive — 2 columns on tablets */ @media (max-width: 900px) { .eael-product-grid.eael-product-simple .woocommerce ul.products { grid-template-columns: repeat(2, 1fr) !important; } } /* Responsive — 1 column on phones */ @media (max-width: 520px) { .eael-product-grid.eael-product-simple .woocommerce ul.products { grid-template-columns: 1fr !important; } } /* How It Works Section */ .hg-hiw-section { padding: 20px 20px 60px; position: relative; } .hg-hiw-inner { max-width: 1200px; margin: 0 auto; position: relative; } /* Dotted connector — full-width SVG centred on the circles. background-image is injected by PHP (hg_hiw_dotted_line_style) so the URL is always correct regardless of environment. */ .hg-hiw-inner::before { content: ""; position: absolute; top: 30px; /* 70px circle-centre − 39.5px (half SVG height 79px) */ left: 0; right: 0; height: 79px; /* matches SVG natural height */ background-repeat: no-repeat; background-size: 100% 100%; background-position: center; z-index: 0; } /* ::after removed — the arrow is already drawn inside the SVG */ /* Row */ .hg-hiw-track { display: flex; justify-content: space-between; align-items: flex-start; position: relative; z-index: 2; } /* Each step column */ .hg-hiw-item { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 6px; } /* ── Flip card shell ── */ .hg-hiw-card { width: 140px; height: 140px; perspective: 1200px; margin-bottom: 14px; flex-shrink: 0; } .hg-hiw-card-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 0.65s cubic-bezier(0.4, 0, 0.2, 1); } .hg-hiw-item:hover .hg-hiw-card-inner, .hg-hiw-item.hg-flipped .hg-hiw-card-inner { transform: rotateY(180deg); } /* Front & back faces */ .hg-hiw-front, .hg-hiw-back { position: absolute; inset: 0; border-radius: 50%; -webkit-backface-visibility: hidden; backface-visibility: hidden; display: flex; align-items: center; justify-content: center; border: 1.5px solid #e0e5ea; background: #fff; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.07); } .hg-hiw-front svg { width: 58px; height: 58px; } .hg-hiw-back { transform: rotateY(180deg); background: #fff; border-color: #fff; } .hg-hiw-back svg, .hg-hiw-back img { width: 58px; height: 58px; /* filter: brightness(0) invert(1); */ } /* Number badge */ .hg-hiw-badge { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: #54b0f1; color: #fff; font-family: "Poppins", sans-serif; font-size: 13px; font-weight: 700; margin-bottom: 10px; flex-shrink: 0; } /* Step label */ .hg-hiw-label { font-family: "Poppins", sans-serif; font-size: 13px; font-weight: 600; color: #2d3748; line-height: 1.5; margin: 0; max-width: 140px; } /* ── Mobile: slick slider ── */ @media (max-width: 767px) { .hg-hiw-inner::before { display: none; } /* Let slick control display */ .hg-hiw-track { display: block; } /* Slick's own CSS ships `.slick-initialized .slick-slide { display: block; }`, which is more specific than our single-class `.hg-hiw-item { display: flex; }` and silently wins — breaking align-items centering for the card/label (only the inline-flex badge stayed centered via text-align). Re-assert it. */ .hg-hiw-item { display: flex !important; flex-direction: column !important; align-items: center !important; padding: 10px 12px 20px; outline: none; } .hg-hiw-card { width: 120px; height: 120px; } .hg-hiw-front svg { width: 48px; height: 48px; } .hg-hiw-back-num { font-size: 24px; } /* Slick dots colour */ .hg-hiw-track .slick-dots li button::before { color: #3d9be9; font-size: 10px; } .hg-hiw-track .slick-dots li.slick-active button::before { color: #3d9be9; } } @media (max-width: 480px) { .hg-hiw-section { padding-bottom: 80px; } } /* ─── Product Showcase [hg_product_showcase] ──────────────────────────────── */ .hg-ps-grid { display: grid; grid-template-columns: repeat(var(--hg-ps-cols, 2), 1fr); gap: 28px; max-width: 1200px; margin: 0 auto; padding: 0 20px; } /* Card shell */ .hg-ps-card { position: relative; border-radius: 20px; overflow: hidden; background: #fff; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08); cursor: pointer; transition: box-shadow 0.35s ease, transform 0.35s ease; min-height: 440px; display: flex; flex-direction: column; } .hg-ps-card:hover { box-shadow: 0 20px 52px rgba(61, 155, 233, 0.22); transform: translateY(-4px); } /* ── Full-card background image (revealed on hover) ── */ .hg-ps-bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transform: scale(1.07); transition: opacity 0.55s ease, transform 0.65s ease; z-index: 1; } .hg-ps-card:hover .hg-ps-bg { opacity: 1; transform: scale(1); } /* ── Dark gradient over bg image ── */ .hg-ps-overlay { position: absolute; inset: 0; background: linear-gradient( to top, rgba(8, 18, 36, 0.9) 0%, rgba(8, 18, 36, 0.4) 50%, rgba(8, 18, 36, 0.08) 100% ); opacity: 0; transition: opacity 0.55s ease; z-index: 2; } .hg-ps-card:hover .hg-ps-overlay { opacity: 1; } /* ── Hover bottom text block ── */ .hg-ps-hover-content { position: absolute; bottom: 0; left: 0; right: 0; padding: 36px 30px; z-index: 3; opacity: 0; transform: translateY(16px); transition: opacity 0.4s ease 0.1s, transform 0.4s ease 0.1s; pointer-events: none; } .hg-ps-card:hover .hg-ps-hover-content { opacity: 1; transform: translateY(0); pointer-events: auto; } .hg-ps-hov-cat { display: inline-block; background: rgba(255, 255, 255, 0.15); color: #fff; padding: 5px 14px; border-radius: 20px; font-family: "Poppins", sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 12px; border: 1px solid rgba(255, 255, 255, 0.3); backdrop-filter: blur(6px); } .hg-ps-hov-title { color: #fff !important; font-family: "Poppins", sans-serif !important; font-size: 28px !important; font-weight: 700 !important; line-height: 1.2 !important; margin: 0 0 18px !important; } .hg-ps-hov-link { display: inline-flex; align-items: center; gap: 8px; color: #fff; font-family: "Poppins", sans-serif; font-size: 15px; font-weight: 600; text-decoration: none; border-bottom: 2px solid rgba(255, 255, 255, 0.45); padding-bottom: 3px; transition: border-color 0.2s, gap 0.2s; } .hg-ps-hov-link:hover { border-color: #fff; gap: 14px; color: #fff; } /* ── Default card content (fades out on hover) ── */ .hg-ps-default { position: relative; z-index: 0; flex: 1; display: flex; flex-direction: column; transition: opacity 0.3s ease; } .hg-ps-card:hover .hg-ps-default { opacity: 0; pointer-events: none; } /* Image area */ .hg-ps-img-area { position: relative; height: 250px; overflow: hidden; border-radius: 20px 20px 0 0; flex-shrink: 0; } .hg-ps-img-area img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; } .hg-ps-card:hover .hg-ps-img-area img { transform: scale(1.05); } /* Category badge on image */ .hg-ps-cat-badge { position: absolute; top: 16px; left: 16px; background: rgba(255, 255, 255, 0.93); color: #1a2733; padding: 5px 14px; border-radius: 20px; font-family: "Poppins", sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; backdrop-filter: blur(4px); } /* Icon circle on image */ .hg-ps-icon-wrap { position: absolute; top: 14px; right: 14px; width: 42px; height: 42px; background: rgba(255, 255, 255, 0.93); border-radius: 50%; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(4px); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); } .hg-ps-icon-wrap svg { width: 22px; height: 22px; } /* Info area */ .hg-ps-info { padding: 24px 26px 28px; display: flex; flex-direction: column; flex: 1; } .hg-ps-info h3 { font-family: "Poppins", sans-serif; font-size: 21px; font-weight: 700; color: #1a2733; margin: 0 0 10px; line-height: 1.3; } .hg-ps-info p { font-family: "Poppins", sans-serif; font-size: 14px; color: #6b7280; line-height: 1.65; margin: 0 0 18px; flex: 1; } /* Feature tag pills */ .hg-ps-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; } .hg-ps-tags span { background: #eff6ff; color: #3d9be9; padding: 5px 13px; border-radius: 20px; font-family: "Poppins", sans-serif; font-size: 12px; font-weight: 500; border: 1px solid rgba(61, 155, 233, 0.18); } /* CTA button */ .hg-ps-btn { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; background: #3d9be9; color: #fff; padding: 12px 26px; border-radius: 30px; font-family: "Poppins", sans-serif; font-size: 15px; font-weight: 600; text-decoration: none; transition: background 0.22s, transform 0.22s, box-shadow 0.22s; box-shadow: 0 4px 14px rgba(61, 155, 233, 0.35); } .hg-ps-btn:hover { background: #2a85d0; transform: translateY(-2px); box-shadow: 0 8px 22px rgba(61, 155, 233, 0.45); color: #fff; } /* Responsive */ @media (max-width: 900px) { .hg-ps-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 20px; } } @media (max-width: 600px) { .hg-ps-grid { grid-template-columns: 1fr !important; padding: 0 12px; } .hg-ps-img-area { height: 220px; } .hg-ps-hov-title { font-size: 22px !important; } } /* ── Product Category Cards ─────────────────────────────────────────── */ .hg-cat-card { border-radius: 16px; overflow: hidden; background: #fff; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); transition: transform 0.3s ease, box-shadow 0.3s ease; margin: 0; padding: 0; } .hg-cat-card:hover { transform: translateY(-4px); box-shadow: 0 12px 36px rgba(0, 0, 0, 0.14); } /* Image area with gradient overlay on hover */ .hg-cat-card .elementor-widget-image { position: relative; overflow: hidden; display: block; } .hg-cat-card .elementor-widget-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient( to top, rgba(61, 155, 233, 0.65) 0%, rgba(61, 155, 233, 0.1) 60%, transparent 100% ); opacity: 0; transition: opacity 0.35s ease; } .hg-cat-card:hover .elementor-widget-image::after { opacity: 1; } .hg-cat-card .elementor-widget-image img { display: block; transition: transform 0.45s ease; } .hg-cat-card:hover .elementor-widget-image img { transform: scale(1.04); } /* ── Cat card fixes ── */ /* Image flush to card edges */ .hg-cat-card .elementor-widget-image, .hg-cat-card .elementor-widget-image .elementor-widget-container { margin: 0 !important; padding: 0 !important; line-height: 0; } .hg-cat-card .elementor-widget-image img { display: block; width: 100% !important; } /* Button – match BUY NOW style */ .hg-cat-card .e-button-base { display: block !important; width: 100% !important; background: #3d9be9 !important; color: #fff !important; border: none !important; border-radius: 10px !important; padding: 16px 20px !important; font-size: 15px !important; font-weight: 700 !important; font-family: "Poppins", sans-serif !important; text-transform: uppercase !important; letter-spacing: 1px !important; text-align: center !important; cursor: pointer !important; transition: background 0.25s ease !important; margin: 0 !important; } .hg-cat-card .e-button-base:hover { background: #2a85d0 !important; } /* ── Cat card – image height + button pill style (override) ── */ .hg-cat-card .elementor-widget-image { height: 210px; overflow: hidden; } .hg-cat-card .elementor-widget-image img { height: 100% !important; object-fit: cover !important; } .hg-cat-card .e-button-base { display: inline-block !important; width: auto !important; background: #3d9be9 !important; color: #fff !important; border: none !important; border-radius: 30px !important; padding: 13px 26px !important; font-size: 15px !important; font-weight: 600 !important; font-family: "Poppins", sans-serif !important; text-transform: none !important; letter-spacing: 0.3px !important; text-align: center !important; cursor: pointer !important; transition: background 0.25s ease, transform 0.2s ease !important; /* margin: 0 !important; */ margin-bottom: 20px !important; margin-left: 20px !important; } .hg-cat-card .e-button-base:hover { background: #2a85d0 !important; transform: translateY(-2px) !important; } /* ── Reusable BUY NOW button – add class "hg-btn-buy" ── */ .hg-btn-buy, .hg-btn-buy.e-button-base { display: flex !important; align-items: center; justify-content: center; gap: 8px; width: calc(50% - 40px) !important; margin: 0 20px 20px; padding: 14px 20px !important; background: linear-gradient(135deg, #3d9be9 0%, #1a7ecf 100%) !important; color: #fff !important; font-family: "Poppins", sans-serif !important; font-size: 18px !important; font-weight: 600 !important; letter-spacing: 0.06em; text-transform: uppercase; border: none !important; border-radius: 12px !important; cursor: pointer; transition: opacity 0.22s ease, transform 0.2s ease, box-shadow 0.22s ease !important; box-shadow: 0 6px 18px rgba(61, 155, 233, 0.38) !important; text-decoration: none !important; } /* Category-card buttons (Explore Bulk, Shop Bag, etc.) are single full-width CTAs, not part of a two-up row — override the 50% width above. */ .hg-cat-card .hg-btn-buy { width: calc(100% - 40px) !important; } .hg-btn-buy:hover, .hg-btn-buy.e-button-base:hover { opacity: 0.9; transform: translateY(-2px) !important; box-shadow: 0 10px 28px rgba(61, 155, 233, 0.5) !important; } .smart-menu-button a { background: linear-gradient(135deg, #6bc5f8 0%, #3d9be9 50%, #2076c4 100%); } .footer-top { background: linear-gradient(135deg, #6bc5f8 0%, #3d9be9 50%, #2076c4 100%); } .footer-bottom { background: linear-gradient(135deg, #6bc5f8 0%, #3d9be9 50%, #2076c4 100%); } .entry-header.ast-no-thumbnail.ast-header-without-markup { display: none; } /* Price coming soon */ .hs-price-coming-soon { font-family: "Poppins", sans-serif; font-size: 15px !important; font-weight: 600 !important; color: #3d9be9 !important; font-style: italic; letter-spacing: 0.02em; } .smart-menu { background: linear-gradient(135deg, #6bc5f8 0%, #3d9be9 50%, #2076c4 100%); } .smart-menu-button a:hover { color: #fff !important; } .design_develop a { color: #fff; } /* ── Mobile + tablet header ────────────────────────────────────── EAEL's own hamburger behavior (native "Breakpoint: Tablet" setting) depends on its JS removing an `eael-simple-menu--loading` class and the menu's own CSS winning the cascade at the right moment — in practice that's unreliable (menu items stay visible, unclicked, next to the toggle). The mobile-only fix below already solves this deterministically with inline !important + a custom overlay (see hs_mobile_hamburger_fix() in humbersalt.php), so it's widened to cover tablet (≤1024px) too instead of leaning on EAEL's flaky native path for that range. */ @media (max-width: 1024px) { .smart-menu { display: block !important; overflow: visible !important; padding: 15px 20px !important; } .smart-menu .logo-stick { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; } .nav-account-wrap { display: none !important; } /* Hide every direct child of EAEL container except the toggle button */ .eael-simple-menu-container > *:not(.eael-simple-menu-toggle) { display: none !important; visibility: hidden !important; height: 0 !important; overflow: hidden !important; pointer-events: none !important; } /* Hamburger toggle */ .eael-simple-menu-container .eael-simple-menu-toggle { display: flex !important; align-items: center !important; justify-content: center !important; width: 40px !important; height: 40px !important; cursor: pointer !important; pointer-events: auto !important; background: rgba(255, 255, 255, 0.2) !important; border-radius: 6px !important; position: relative !important; z-index: 10 !important; margin-left: 100px; } }