/* decrease menu padding - 3958786-hc */
.main-navigation ul.menu>li>a, .main-navigation ul.nav-menu>li>a {
    padding-top:0px;
    padding-bottom:0px;
}
/* remove bottom margin from header | 39587863-hc tdl */
.home.blog .site-header, .home.page:not(.page-template-template-homepage) .site-header, .home.post-type-archive-product .site-header {
    margin-bottom: 0em;
}
/* hide page title | 39587863-hc tdl */
.entry-header {
	display: none;
}
/* Remove top padding from basket icon in menu - 39587863 */
.site-header-cart .cart-contents {
    padding-top:0px;
}
/* Remove top padding from basket icon in menu - 39587863 */ .site-header-cart .cart-contents { padding-top:5px; }
/* Remove the copyright information and automatic privacy policy link in the site footer | 39753868-hc pj */
.site-info {
    display: none;
}
/* Hiding the upload portion of product checkout | MB | 40081709 - hc */
div.helloprint-product-file-upload {
  display: none;
}
/* Hiding number count on products | LGW | */
.products .product-category .count{
display: none;
}
[data-type="document"] img {
  width: 50px !important
}
.woocommerce-button.rawc-accept {
    background: green !important;
}
.menu-item-4167 a { color: white !important; font-size: 14px; /* Adjusted for smaller screens */ text-transform: uppercase; 
}
/*Reduce the gap below product image on mobile-SM*/
body.pewc-has-extra-fields .woocommerce-product-gallery__wrapper {
   height: auto;
}
@media (min-width: 768px) {
    .woocommerce-tabs {
        padding-top: 0;
    }
    .storefront-full-width-content.single-product div.product .summary{
        margin-bottom: 0 ;
    }
}
/** Background color to navigation (DESKTOP ONLY) **/
@media (min-width: 769px) { /* Adjust 769px breakpoint if needed */
  nav#site-navigation, 
  .main-navigation ul.menu ul.sub-menu, 
  .main-navigation ul.nav-menu ul.children {
    background: #2a255b !important;
  }

  .main-navigation ul li a {
    color: #fff !important;
  }

  .menu-item-131 {
    font-weight: bold;
    color: white;
    background: #2a255b;
    padding: 2px 5px;
    border-radius: 1px;
  }
}
/* Style the sub-menus (direct children of the hovered parent) */
.main-navigation ul li:hover > ul.sub-menu {
    background-color: rgba(6, 147, 227, 0.9) !important; /* Slightly transparent WhatsApp Blue */
}

/* Style the sub-menu links */
.main-navigation ul.sub-menu li a {
    color: #fff !important; /* White text for sub-menu links */
    padding: 8px 12px !important; /* Adjust padding as needed */
    display: block; /* Make sub-menu links fill the width */
    transition: background-color 0.3s ease; /* Smooth hover effect */
}

/* Sub-menu hover effect */
.main-navigation ul.sub-menu li a:hover {
    background-color: rgb(115, 147, 179) !important; /* Slightly transparent WhatsApp blue on hover */
}
#menu-main.menu.nav-menu > li > a {
    font-size: 16px; /* Adjust as needed */
    padding: 3px 14px; /* Adjust as needed */
}
.woocommerce-message {
    background-color: #1f71b7 !important; /* !important to override existing styles if needed */
    color: white; /* Optional: Adjust text color for better readability */
}
.site-header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 9999;
}
img.custom-logo {
    position: relative;
    z-index: 10;
}
./* Ensure header is positioned for absolute children */
.site-header {
  position: relative;
}

.col-full {
  position: relative;
}

/* 2. Tablet Styles (Middle range screens) */
@media (min-width: 768px) and (max-width: 1024px) {
  .header-whatsapp-button {
    right: 10px !important;
    left: auto !important;
  }
}

/* 3. Mobile Styles (Side-by-side Logo and Button) */
@media (max-width: 767px) {
    /* 1. Ensure the header container uses the full width available */
    .site-header-inner {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important; /* Pushes items to opposite ends */
        padding: 10px 15px !important; /* Adds a tiny bit of breathing room from the screen edge */
        width: 100% !important;
        box-sizing: border-box;
    }

    /* 2. Shrink the logo container so it doesn't block the button */
    .site-branding {
        margin-bottom: 0 !important;
        margin-right: 10px !important;
        flex: 0 1 auto !important; /* Only takes up the space the image needs */
        max-width: 50% !important;
    }

    /* 3. Force the WhatsApp button to the absolute right */
    .header-whatsapp-button {
        display: block !important;
        margin-left: auto !important; /* THE KEY: This pushes it to the far right */
        margin-top: 0 !important;
        flex: 0 0 auto !important;
        text-align: right !important;
    }

    /* 4. Ensure the button text is compact */
    .header-whatsapp-button a {
        padding: 6px 10px !important;
        font-size: 11px !important;
        white-space: nowrap !important;
        display: inline-block !important;
        line-height: 1 !important;
    }

    /* 5. Keep the 'Menu' button from jumping into this top row */
    .menu-toggle {
        order: 3 !important;
        margin-top: 10px !important;
    }
}
/* Request a Quote category intro styling */
.tax-product_cat.term-request-a-product-quote .term-description p {
    font-size: 18px;
    font-weight: 400; /* normal text */
    line-height: 1.3;
    color: #2b2b2b;
    margin-bottom: 20px;
}

/* Make only the first line bold */
.tax-product_cat.term-request-a-product-quote .term-description p::first-line {
    font-weight: 700;
}
/* Fix for large images in the WooCommerce Cart Block */
.wc-block-components-product-details__value img,
.pewc-image-added img {
    max-width: 100px !important;
    height: auto !important;
    display: block;
    margin-top: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
}
/* Hide ONLY the quantity input and plus/minus buttons */
.wc-block-cart-item__quantity .wc-block-components-quantity-selector {
    display: none !important;
}

/* Ensure the "Remove item" link remains visible and spaced correctly */
.wc-block-cart-item__remove-link {
    display: block !important;
    margin-top: 5px;
    visibility: visible !important;
}
/* Style the My Brand Store link to stand out */
.woocommerce-MyAccount-navigation-link--brand-store a {
    color: #005596 !important; /* EA Signs Blue */
    font-weight: bold !important;
}

/* Add a "NEW" badge using CSS instead of HTML */
.woocommerce-MyAccount-navigation-link--brand-store a::after {
    content: 'NEW';
    background-color: #ff0000; /* Red Badge */
    color: white;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 8px;
    vertical-align: middle;
}
/* Swaps the icon for a Star in the Account Sidebar */
.woocommerce-MyAccount-navigation-link--brand-store a::before {
    content: "\f005" !important; /* Standard FontAwesome Star */
    font-family: "Font Awesome 5 Free", "FontAwesome" !important;
    font-weight: 900;
    color: #005596 !important;
    margin-right: 0px;
    display: inline-block;
    -webkit-font-smoothing: antialiased;
}
/* Sidebar Container Background */
.woocommerce-MyAccount-navigation {
    background: #fdfdfd;
    padding: 15px;
    border-radius: 12px;
    border: 1px solid #eee;
}

/* Individual Link Styling */
.woocommerce-MyAccount-navigation ul li {
    border-bottom: none !important;
    margin-bottom: 5px;
}

.woocommerce-MyAccount-navigation ul li a {
    padding: 12px 15px !important;
    border-radius: 8px;
    transition: all 0.3s ease;
    display: block;
    text-decoration: none;
    color: #555;
}

/* Hover Effect - Uses EA Signs Blue */
.woocommerce-MyAccount-navigation ul li a:hover {
    background-color: #005596;
    color: #fff !important;
}

.woocommerce-MyAccount-navigation ul li a:hover::before {
    color: #fff !important; /* Makes icons white on hover */
}

/* Active Page Highlight */
.woocommerce-MyAccount-navigation ul li.is-active a {
    background-color: #f0f7fd;
    color: #005596;
    font-weight: bold;
    border-left: 4px solid #005596;
}
/* Hide the default WooCommerce dashboard greeting text */
.woocommerce-MyAccount-content > p:first-of-type {
    display: none !important;
}

/* Optional: Hide the second paragraph about recent orders if you want it even cleaner */
.woocommerce-MyAccount-content > p:nth-of-type(2) {
    display: none !important;
}
/* 1. Style the Table Header */
.woocommerce-orders-table thead th {
    background-color: #005596 !important; /* EA Signs Blue */
    color: #ffffff !important;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 1px;
    padding: 15px !important;
    border: none !important;
}

/* 2. Style the Table Rows */
.woocommerce-orders-table tr {
    transition: background 0.3s ease;
}

.woocommerce-orders-table tr:hover {
    background-color: #f9f9f9 !important;
}

.woocommerce-orders-table td {
    padding: 15px !important;
    vertical-align: middle !important;
    border-bottom: 1px solid #eee !important;
}

/* 3. Modernize the 'View' and 'Review' Buttons */
.woocommerce-orders-table .woocommerce-button {
    background-color: #005596 !important;
    color: #fff !important;
    border-radius: 50px !important; /* Matches WhatsApp button style */
    padding: 8px 18px !important;
    font-weight: bold !important;
    text-transform: none !important;
    transition: transform 0.2s ease, background 0.2s ease !important;
}

.woocommerce-orders-table .woocommerce-button:hover {
    background-color: #003d6b !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* 4. Style the Order Number Links */
.woocommerce-orders-table td.woocommerce-orders-table__cell-order-number a {
    color: #005596 !important;
    font-weight: bold;
    text-decoration: none;
}
/* 1. Style the 'Order Details' and 'Order Updates' Headings */
.woocommerce-order-details__title, 
.woocommerce-column__title,
h2.woocommerce-order-details__title {
    color: #005596 !important; /* EA Signs Blue */
    font-size: 24px !important;
    font-weight: bold !important;
    margin-bottom: 20px !important;
}

/* 2. Style the Order Details Table Header */
.woocommerce-table--order-details thead th {
    background-color: #005596 !important;
    color: #ffffff !important;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 1px;
    padding: 15px !important;
    border: none !important;
}

/* 3. Clean up the Table Rows */
.woocommerce-table--order-details td, 
.woocommerce-table--order-details th {
    padding: 15px !important;
    border-bottom: 1px solid #eee !important;
}

/* 4. Highlight the Product Names */
.woocommerce-table--order-details .woocommerce-table__product-name a {
    color: #005596 !important;
    font-weight: bold;
    text-decoration: none;
}

/* 5. Style the Order Updates (Notes) Section */
.woocommerce-OrderUpdates {
    list-style: none;
    padding: 0;
}

.woocommerce-OrderUpdate {
    background: #f9f9f9;
    padding: 20px;
    border-radius: 8px;
    border-left: 4px solid #005596;
    margin-bottom: 15px;
}

.woocommerce-OrderUpdate .woocommerce-OrderUpdate-date {
    font-weight: bold;
    color: #005596;
    display: block;
    margin-bottom: 5px;
}
/* 1. Style the Artwork Review Table Header */
th.rawc-review-table__header,
.rawc-review-table thead th {
    background-color: #005596 !important; /* EA Signs Blue */
    color: #ffffff !important;
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 1px;
    padding: 20px !important;
    border: none !important;
}

/* 2. Modernize the 'Approve' and 'Request Revision' Buttons */
.rawc-review-actions .button.approve, 
button#rawc-approve-button {
    background-color: #25D366 !important; /* Matches your WhatsApp Green */
    border-radius: 50px !important;
    padding: 12px 30px !important;
    font-weight: bold !important;
    border: none !important;
}

.rawc-review-actions .button.revision,
button#rawc-revision-button {
    background-color: #e0e0e0 !important;
    color: #333 !important;
    border-radius: 50px !important;
    padding: 12px 30px !important;
    font-weight: bold !important;
    border: none !important;
}

/* 3. Add a subtle border to the Review Box */
.rawc-review-table {
    border: 1px solid #eee !important;
    border-radius: 8px !important;
    overflow: hidden;
}
/* 1. Style the Quote Table Headers */
th.product-remove, 
th.product-thumbnail, 
th.product-name {
    background-color: #005596 !important; /* EA Signs Blue */
    color: #ffffff !important;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 1px;
    padding: 20px !important;
    border: none !important;
}

/* 2. Hide Price and Quantity Columns */
th.product-price, 
td.product-price, 
th.product-quantity, 
td.product-quantity {
    display: none !important;
}

/* 3. Hide the 'Update List' Button - FIXED WITH SPECIFIC ID */
#wcraq_update_list {
    display: none !important;
}

/* 4. Clean up the Table Rows */
.shop_table_quote_requests tr td {
    padding: 20px !important;
    border-bottom: 1px solid #eee !important;
    vertical-align: middle !important;
}

/* 5. Highlight the Product Titles */
td.product-name a {
    color: #005596 !important;
    font-weight: bold !important;
    text-decoration: none !important;
}
/* Green Button Styling (Already working, just keeping it here for safety) */
#wcraq_send_request, 
a#wcraq_send_request.button {
    background-color: #25D366 !important;
    color: #ffffff !important;
    padding: 15px 30px !important;
    border-radius: 50px !important;
    font-weight: bold !important;
    border: none !important;
    display: inline-block !important;
}
/* Hide the £0.00 Total on Installation Products */
.postid-9076 .pewc-total-only, 
.postid-7506 .pewc-total-only,
.postid-9076 .price,
.postid-7506 .price {
    display: none !important;
}

/* Optional: Make the POA text look like a professional label */
.postid-9076 .summary .product_title::after,
.postid-7506 .summary .product_title::after {
    content: " (POA)";
    font-size: 18px;
    color: #005596; /* EA Signs Blue */
    vertical-align: middle;
}
/* 1. Hide £0.00 specifically for Installation items in the Blocks Cart */
.wc-block-cart-items__row:has(a[href*="signage-installation"]) .wc-block-components-product-price,
.wc-block-cart-items__row:has(a[href*="signage-installation"]) .wc-block-components-checkout-step__item-total {
    display: none !important;
}

/* 2. Add 'POA' text after the title in the basket for clarity */
.wc-block-cart-items__row:has(a[href*="signage-installation"]) .wc-block-components-product-name::after {
    content: " (Price on Application)";
    font-size: 0.85em;
    color: #005596; /* EA Signs Blue */
    font-weight: bold;
    display: block;
    margin-top: 5px;
}
/* 1. RESET ALL BUTTONS IN MENU */
#offcanvas-menu button, 
.mobile-navigation button,
#offcanvas-menu span[class*="toggle"],
.mobile-navigation span[class*="toggle"] {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    width: 60px !important;
    height: 100% !important;
    right: 0 !important;
    top: 0 !important;
    position: absolute !important;
}

/* 2. FORCE THE CHEVRON TO BE LARGE & BLUE */
#offcanvas-menu .dropdown-toggle::after,
.mobile-navigation .dropdown-toggle::after {
    content: "\f107" !important; 
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
    font-size: 24px !important; /* Massive icon for visibility */
    color: #005596 !important; /* EA Signs Blue */
    visibility: visible !important;
    display: block !important;
}

/* 3. CLEAN UP SUB-CATEGORY SPACING */
.offcanvas-menu .sub-menu {
    background-color: #ffffff !important;
    padding-left: 20px !important;
    border-top: 1px solid #eeeeee !important;
}
/* MOBILE MENU: OVERRIDE ALL THEME DEFAULTS */
@media screen and (max-width: 991px) {
    /* 1. Remove the fixed box/border from the toggle button */
    .offcanvas-menu .menu-item-has-children .dropdown-toggle,
    .mobile-navigation .menu-item-has-children .dropdown-toggle,
    button.dropdown-toggle {
        background: none !important;
        border: none !important;
        box-shadow: none !important;
        outline: none !important;
        width: 65px !important;
        height: 50px !important;
        right: 0 !important;
        top: 0 !important;
        position: absolute !important;
        z-index: 99 !important;
    }

    /* 2. Style the chevron to be large, blue, and centered */
    .dropdown-toggle::after {
        content: "\f107" !important;
        font-family: "Font Awesome 5 Free" !important;
        font-weight: 900 !important;
        font-size: 24px !important;
        color: #005596 !important; /* EA Signs Blue */
        display: block !important;
        line-height: 50px !important;
    }

    /* 3. Ensure the text has space and doesn't get clipped */
    .offcanvas-menu li a {
        padding-right: 75px !important; /* Keeps text away from the 65px button */
        padding-top: 15px !important;
        padding-bottom: 15px !important;
        width: 100% !important;
    }

    /* 4. Fix the clipping issue (the 'overflow' conflict) */
    .offcanvas-menu, .mobile-navigation {
        overflow-x: visible !important;
    }
}
/* --- FINAL UNIFIED MY ACCOUNT STYLES --- */

/* 1. Style the 'My Account' button to match 'QUOTE REQUEST' */
#menu-topline li#menu-item-110 > a {
    background-color: #1f71b7 !important; /* Matches your Quote Request Blue */
    color: #ffffff !important;
    padding: 2px 10px !important; /* Matches height of your other top buttons */
    border-radius: 1px;
    font-weight: bold !important;
    text-transform: uppercase !important;
    font-size: 14px !important;
    display: inline-block;
    line-height: 24px;
}

/* 2. Style the Dropdown (Hidden by default) */
#menu-topline li#menu-item-110 ul.sub-menu {
    display: none !important;
    visibility: hidden;
    opacity: 0;
    position: absolute !important;
    background: #ffffff !important;
    border: 1px solid #e0e0e0 !important;
    box-shadow: 0px 8px 16px rgba(0,0,0,0.1) !important;
    min-width: 180px !important;
    z-index: 9999 !important;
    top: 100% !important;
    right: 0 !important;
    left: auto !important;
    padding: 5px 0 !important;
    transition: opacity 0.2s ease;
}

/* 3. Show Dropdown on Hover */
#menu-topline li#menu-item-110:hover ul.sub-menu {
    display: block !important;
    visibility: visible;
    opacity: 1;
}

/* 4. Dropdown Link Styling & Hover Effect */
#menu-topline li#menu-item-110 ul.sub-menu li a {
    color: #444444 !important;
    padding: 10px 15px !important;
    font-size: 13px !important;
    background: transparent !important;
    display: block !important;
    border-bottom: 1px solid #f2f2f2 !important;
    text-transform: none !important; /* Keeps sub-menu text easy to read */
}

#menu-topline li#menu-item-110 ul.sub-menu li a:hover {
    background-color: #f8f9fa !important;
    color: #1f71b7 !important; /* Links turn blue on hover */
}
/* --- EA-SIGNS HEADER: THE COMPLETE UNIFIED LOOK --- */

/* 1. THE BLUE TWINS: My Account & Quote Request */
#menu-topline li#menu-item-110 > a,
#menu-topline li.menu-item-4626 > a {
    background-color: #1f71b7 !important;
    color: #ffffff !important;
    padding: 2px 10px !important; 
    border-radius: 1px;
    font-weight: bold !important;
    text-transform: uppercase !important;
    font-size: 14px !important;
    display: inline-block;
    line-height: 24px;
    transition: all 0.3s ease;
}

/* Hover Effect for Blue Buttons */
#menu-topline li#menu-item-110 > a:hover,
#menu-topline li.menu-item-4626 > a:hover {
    background-color: #165a94 !important;
    text-decoration: none !important;
}

/* 2. THE QUOTE BASKET: Quote List Utility Button */
#menu-topline .menu-item-8595 > a {
    background: #ffffff !important;
    color: #444444 !important;
    font-weight: bold !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 2px 12px !important;
    border: 1px solid #d1d1d1 !important;
    border-radius: 2px !important;
    margin: 0 8px !important;
    line-height: 24px !important;
    height: auto !important;
    text-decoration: none !important;
    transition: all 0.3s ease;
}

/* Add Clipboard Icon to Quote Basket */
#menu-topline .menu-item-8595 > a::before {
    content: "\f46d" !important; 
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
    margin-right: 8px !important;
    color: #1f71b7 !important;
    display: inline-block !important;
    font-size: 15px !important;
}

#menu-topline .menu-item-8595 > a:hover {
    background-color: #f8f9fa !important;
    border-color: #1f71b7 !important;
    color: #1f71b7 !important;
}

/* 3. THE DROPDOWN: My Account Sub-Menu */
#menu-topline li#menu-item-110 ul.sub-menu {
    display: none !important;
    visibility: hidden;
    opacity: 0;
    position: absolute !important;
    background: #ffffff !important;
    border: 1px solid #e0e0e0 !important;
    box-shadow: 0px 8px 16px rgba(0,0,0,0.1) !important;
    min-width: 180px !important;
    z-index: 9999 !important;
    top: 100% !important;
    right: 0 !important;
    padding: 5px 0 !important;
    transition: opacity 0.2s ease;
}

#menu-topline li#menu-item-110:hover ul.sub-menu {
    display: block !important;
    visibility: visible;
    opacity: 1;
}

/* Dropdown Individual Links */
#menu-topline li#menu-item-110 ul.sub-menu li a {
    color: #444444 !important;
    padding: 10px 15px !important;
    font-size: 13px !important;
    background: transparent !important;
    display: block !important;
    border-bottom: 1px solid #f2f2f2 !important;
    text-transform: none !important;
}

#menu-topline li#menu-item-110 ul.sub-menu li a:hover {
    background-color: #f8f9fa !important;
    color: #1f71b7 !important;
}

/* 4. MOBILE/TABLET ADJUSTMENTS */
@media screen and (max-width: 991px) {
    .menu-item-4167 a, .menu-item-4626 a, .menu-item-110 a {
        background: #1f71b7 !important;
        color: white !important;
        padding: 8px 15px !important;
        display: inline-block !important;
        border-radius: 4px !important;
        margin-top: 5px;
    }
}
/* --- COMPLETE REMOVAL OF TOP GAPS ON CATEGORY PAGES --- */

/* 1. Remove the massive site-wide top padding on archive pages */
.archive.tax-product_cat #content {
    padding-top: 0 !important;
}

/* 2. Tighten the breadcrumb area (The Green/Blue strips) */
.archive.tax-product_cat .storefront-breadcrumb {
    margin-bottom: 0 !important;
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}

/* 3. Remove padding from the 'Request a Quote' blue header box */
.archive.tax-product_cat .woocommerce-products-header {
    margin-top: 0 !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    margin-bottom: 0 !important;
}

/* 4. Remove the margin above the main product grid */
.archive.tax-product_cat #primary {
    margin-top: 0 !important;
}
/* --- CLEAN & SPACIOUS "ADD ARTWORK" BUTTON --- */

/* 1. Hide original text but keep the button's structure */
#wphp-add-to-cart-button.single_add_to_cart_button {
    font-size: 0 !important;
    padding: 0 !important; /* Reset padding to rebuild it below */
    min-height: 45px !important; /* Ensures the button has height */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* 2. Style the new text with proper padding */
#wphp-add-to-cart-button.single_add_to_cart_button::before {
    content: "Add Artwork" !important;
    font-size: 16px !important;
    text-transform: uppercase !important;
    font-weight: bold !important;
    visibility: visible !important;
    color: #ffffff !important;
    padding: 12px 25px !important; /* This creates the 'Box' feel */
    display: block !important;
    width: 100% !important;
    text-align: center !important;
}
/* --- CENTER PRODUCT TITLES & BREADCRUMBS --- */

/* 1. Center the main product title */
.single-product .product_title {
    text-align: center !important;
    margin-bottom: 20px !important;
}

/* 2. Center the breadcrumbs above the title */
.single-product .woocommerce-breadcrumb {
    text-align: center !important;
    margin-bottom: 10px !important;
}

/* 3. Center category titles on archive pages (Optional) */
.tax-product_cat .woocommerce-products-header__title {
    text-align: center !important;
}
/* --- NEW WHATSAPP MENU BUTTON --- */

/* This targets the WhatsApp link in your top menu */
#menu-topline li a[href*="wa.me"] {
    background-color: #25d366 !important; /* WhatsApp Green */
    color: #ffffff !important;
    font-weight: bold !important;
    border-radius: 2px !important;
    padding: 2px 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    line-height: 24px !important;
    margin-left: 10px !important;
    text-transform: uppercase !important;
    font-size: 13px !important;
}

/* Adds the WhatsApp icon */
#menu-topline li a[href*="wa.me"]::before {
    content: "\f232" !important; 
    font-family: "Font Awesome 5 Brands" !important;
    margin-right: 8px !important;
    font-size: 16px !important;
}

/* Hover effect to turn it a slightly darker green */
#menu-topline li a[href*="wa.me"]:hover {
    background-color: #128c7e !important;
    color: #ffffff !important;
}
/* Hide the floating WhatsApp bubble entirely */
.joinchat { display: none !important;
}
/* --- HIDE THE LEFTOVER WHATSAPP CONTAINER --- */

/* Targets the specific div container shown in your Inspect Element */
.header-whatsapp-button, 
div.header-whatsapp-button {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    pointer-events: none !important;
}
/* --- GLOBAL FIX FOR STICKY HEADER --- */

/* 1. Apply padding to the top of all pages */
#page.hfeed.site {
    padding-top: 185px !important; /* Adjust this to match your total header height */
}
/* --- UNIFIED WHATSAPP BUTTON STYLING --- */

/* 1. Target the link by its destination (wa.me) so it's always green */
#menu-topline li a[href*="wa.me"],
.handheld-navigation li a[href*="wa.me"],
.mobile-navigation li a[href*="wa.me"] { 
    background-color: #25d366 !important; /* WhatsApp Green */
    color: #ffffff !important;
    font-weight: bold !important;
    border-radius: 2px !important;
    padding: 2px 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    line-height: 24px !important;
    margin-left: 10px !important;
}

/* 2. Add the WhatsApp Icon globally */
#menu-topline li a[href*="wa.me"]::before,
.handheld-navigation li a[href*="wa.me"]::before,
.mobile-navigation li a[href*="wa.me"]::before {
    content: "\f232" !important; /* FontAwesome WhatsApp Icon */
    font-family: "Font Awesome 5 Brands" !important;
    margin-right: 8px !important;
    font-weight: 400 !important;
}

/* 3. Global Page Clearance for Sticky Header */
#page.hfeed.site {
    padding-top: 185px !important; /* Keeps your content from hiding under the header */
}

/* 4. Mobile Adjustment */
@media screen and (max-width: 768px) {
    #page.hfeed.site {
        padding-top: 150px !important;
    }
}
/* 1. Pull Chevrons closer to the category names */
.handheld-navigation ul.menu li.menu-item-has-children .dropdown-toggle {
    right: 35% !important; /* Pulls it in from the right edge toward the center */
    left: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important; 
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    background: transparent !important;
}
/* 2. Ensure the text doesn't overlap the arrow */
.handheld-navigation ul.menu li.menu-item-has-children a {
    padding-right: 50px !important; 
}

/* 2. Space out the WhatsApp button from the Logo */
.handheld-navigation li a[href*="wa.me"] {
    margin-top: 40px !important; /* Pushes it down away from logo text */
    margin-bottom: 15px !important;
    width: 140px !important;
    justify-content: center !important;
    display: flex !important;
}

/* 3. Keep the rest of your button/table code exactly as it is */
/* --- REDUCE TOP GAP ON MOBILE --- */

@media screen and (max-width: 768px) {
    /* 1. Reduce the main "push down" we added for the sticky header */
    #page.hfeed.site {
        padding-top: 80px !important; /* Adjust this until the logo sits perfectly at the top */
    }

    /* 2. Tighten the internal padding inside the header itself */
    .site-header {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }

    /* 3. Remove any extra margin above the logo branding */
    .site-branding {
        margin-top: 0 !important;
    }
}