/*
Theme Name: Food action
Theme URI: http://demo.casethemes.net/organio/
Author: Agensip
Author URI: https://start.agensip.com/
Description: custom theme made by agensip
Version: 1.5.3
License: ThemeForest
License URI: https://themeforest.net/licenses
Template: organio
Text Domain: foodaction
*/

/* Bring the nav's active/hover underline indicator closer to the link text.
   The nav links have padding-top/padding-bottom: 60px (for the tall header row),
   and the indicator sits at bottom:0 of that padded box -- 60px below the text.
   This pulls it up to sit just under the word instead. */
.elementor-element-6bea7610 .elementor-nav-menu .elementor-item::after,
.elementor-element-6bea7610 .elementor-nav-menu .elementor-item::before {
    bottom: 50px !important;
}


/* Modernize shop/archive product cards: the "Request Quote" button was hidden
   (opacity:0) until hover, which never triggers on touch devices -- make it
   always visible. Also even out card heights via flexbox so a long, wrapping
   title doesn't push the button to a different height than a short title,
   and add a subtle hover-lift for a more polished feel on desktop. */
.woocommerce ul.products li.product {
    margin-bottom: 30px;
}
.woocommerce ul.products li.product .woocommerce-product-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.woocommerce ul.products li.product .woocommerce-product-inner:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(12, 12, 12, 0.14);
}
.woocommerce ul.products li.product .woocommerce-product-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}
.woocommerce ul.products li.product .woocommerce-product-content .woocommerce-add-to-cart:not(.woocommerce-add-to-cart-grid) {
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    margin-top: auto !important;
    padding-top: 18px;
}
.woocommerce ul.products li.product .woocommerce-product-content .woocommerce-add-to-cart:not(.woocommerce-add-to-cart-grid) a {
    width: 100%;
    justify-content: center;
}


/* Remove the orange picture-frame border around shop product cards */
.woocommerce ul.products li.product .woocommerce-product-inner.style-1::before {
    display: none !important;
}


/* Product Specifications block (SKU, Item Description, Carton Configuration,
   Barcode, Ingredients, Product Highlights) on single product pages. */
.fa-product-specs {
	margin-top: 28px;
	padding: 20px 24px;
	border: 1px solid #e2e2e2;
	border-radius: 8px;
	background: #fafafa;
}
.fa-product-specs__title {
	margin: 0 0 12px;
	font-size: 18px;
	font-weight: 700;
	color: #111;
}
.fa-product-specs__table {
	width: 100%;
	border-collapse: collapse;
}
.fa-product-specs__table tr {
	border-bottom: 1px solid #ececec;
}
.fa-product-specs__table tr:last-child {
	border-bottom: none;
}
.fa-product-specs__table th {
	text-align: left;
	vertical-align: top;
	padding: 10px 16px 10px 0;
	width: 200px;
	font-weight: 600;
	color: #333;
}
.fa-product-specs__table td {
	padding: 10px 0;
	color: #444;
	line-height: 1.5;
}
.fa-barcode-svg {
	display: block;
	max-width: 220px;
}
.fa-barcode-number {
	font-family: monospace;
	letter-spacing: 1px;
	margin-top: 2px;
	font-size: 13px;
	color: #666;
}
@media (max-width: 480px) {
	.fa-product-specs__table th,
	.fa-product-specs__table td {
		display: block;
		width: 100%;
		padding: 4px 0;
	}
	.fa-product-specs__table th {
		padding-top: 12px;
	}
}


/* =====================================================================
   Product Information redesign TEST — Acai Cream Original+Granola (ID 9452) ONLY
   ===================================================================== */
body.postid-9452 .fa-product-info { margin-top: 12px; padding: 20px 24px; border: 1px solid #e2e2e2; border-radius: 8px; background: #fafafa; }
body.postid-9452 .fa-product-info__title { margin: 0 0 14px; font-size: 19px; font-weight: 700; color: #111; }
body.postid-9452 .fa-product-info__rows { display: flex; flex-direction: column; gap: 10px; }
body.postid-9452 .fa-product-info__row { display: flex; align-items: baseline; gap: 8px; border-bottom: 1px solid #ececec; padding-bottom: 8px; }
body.postid-9452 .fa-product-info__row:last-child { border-bottom: none; padding-bottom: 0; }
body.postid-9452 .fa-product-info__label { font-weight: 600; color: #333; min-width: 170px; flex-shrink: 0; }
body.postid-9452 .fa-product-info__value { color: #444; line-height: 1.5; }
body.postid-9452 .fa-product-info__row--barcode .fa-product-info__value { display: flex; flex-direction: column; }
body.postid-9452 .fa-product-info .fa-barcode-svg { display: block; max-width: 200px; }
body.postid-9452 .fa-product-info .fa-barcode-number { font-family: monospace; letter-spacing: 1px; margin-top: 2px; font-size: 13px; color: #666; }
body.postid-9452 .fa-product-details { margin-top: 28px; max-width: 900px; clear: both; }
body.postid-9452 .fa-product-details__block { margin-bottom: 20px; }
body.postid-9452 .fa-product-details__label { margin: 0 0 6px; font-size: 16px; font-weight: 700; color: #111; }
body.postid-9452 .fa-product-details__value { margin: 0; color: #444; line-height: 1.6; }
@media (max-width: 480px) {
    body.postid-9452 .fa-product-info__row { flex-direction: column; gap: 2px; }
    body.postid-9452 .fa-product-info__label { min-width: 0; }
}


/* =====================================================================
   Round 2 usability pass — Acai Cream Original+Granola (ID 9452) ONLY
   ===================================================================== */
body.postid-9452 .product_title.entry-title { font-size: 24px !important; line-height: 1.25; }

body.postid-9452 .fa-product-info { border: none; background: none; padding: 0; margin-top: 6px; }
body.postid-9452 .fa-product-info__title { font-size: 18px; margin-bottom: 14px; }
body.postid-9452 .fa-product-info__rows { gap: 14px; }
body.postid-9452 .fa-product-info__row { flex-direction: column; align-items: flex-start; gap: 3px; border-bottom: none; padding-bottom: 0; }
body.postid-9452 .fa-product-info__label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.4px; color: #8a8a8a; font-weight: 600; }
body.postid-9452 .fa-product-info__value { font-size: 16px; color: #222; font-weight: 500; }

body.postid-9452 .fa-cart-share-row { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; order: 3; margin-top: 10px; }
body.postid-9452 .fa-cart-share-row form.cart { margin: 0; }
body.postid-9452 .fa-cart-share-row .woocommerce-social-share { margin: 0; }
body.postid-9452 .single_add_to_cart_button { padding: 15px 56px !important; }

body.postid-9452 .woocommerce-summary-wrap.row { align-items: flex-start; }
body.postid-9452 .fa-product-details { margin-top: 6px; }

body.postid-9452 .fa-cart-share-row .quantity { display: none !important; }


/* =====================================================================
   Round 3 — remove headline, inline labels, ingredients on the right,
   tighter related-products gap, catalogue colour matching (ID 9452 ONLY)
   ===================================================================== */

/* Catalogue brand navy + grey, sampled from the catalogue PDF */
body.postid-9452 .product_title.entry-title { color: #004d7b; }
body.postid-9452 .fa-product-info__label { color: #5b87a6; }
body.postid-9452 .fa-product-info__value { color: #767676; }
body.postid-9452 .fa-product-details__label { color: #004d7b; }
body.postid-9452 .fa-product-details__value { color: #767676; }
body.postid-9452 .fa-barcode-number { color: #767676 !important; }

/* Inline labels + values to save vertical space (no stacking, no table look) */
body.postid-9452 .fa-product-info__row { flex-direction: row; align-items: baseline; gap: 8px; }
body.postid-9452 .fa-product-info__rows { gap: 8px; }
body.postid-9452 .fa-product-info__label { min-width: 150px; flex-shrink: 0; }

/* Ingredients / Highlights now live inside the right-hand column, above Add to Cart */
body.postid-9452 .fa-product-details { margin-top: 14px; max-width: none; clear: none; }
body.postid-9452 .fa-product-details__block { margin-bottom: 12px; }

/* Tighten the gap before the Related Products section */
body.postid-9452 section.related.products { margin-top: 0 !important; padding-top: 10px !important; }

/* Fix flex order: details block was defaulting to order 0 (jumping above the title) */
body.postid-9452 .summary.entry-summary > .fa-product-details { order: 3; }
body.postid-9452 .fa-cart-share-row { order: 4; }


/* Round 4 — Ingredients/Highlights now reuse the info-row markup, so they inherit
   the same font/colour automatically. Just fix alignment + wrapping, and unify
   the barcode number with the rest of the values. (ID 9452 ONLY) */
body.postid-9452 .fa-product-info__row { align-items: flex-start; }
body.postid-9452 .fa-product-info__value { flex: 1 1 auto; min-width: 0; }
body.postid-9452 .fa-product-info .fa-barcode-number { font-family: inherit; font-size: 16px; letter-spacing: normal; margin-top: 0; }

body.postid-9452 .fa-product-details { display: flex; flex-direction: column; gap: 8px; }


/* =====================================================================
   Header — reduce the huge vertical padding on the main nav menu links.
   That 60px top/bottom padding was forcing the whole logo+nav row to be
   140px tall, stretching the logo and creating a big empty gap above and
   below it. Shrinking the nav padding lets the row hug the logo instead.
   Site-wide (all pages use this Elementor header template).
   ===================================================================== */
.elementor-nav-menu li a,
.elementor-nav-menu .elementor-item { padding-top: 12px !important; padding-bottom: 12px !important; }


/* Shrink the header logo slightly and give it a little breathing room
   above/below now that the nav row hugs its content tightly. */
.elementor-element-1b608fed img { width: 92px !important; height: auto !important; }
.elementor-element-1b608fed { padding-top: 10px !important; padding-bottom: 10px !important; }


/* The renamed menu labels (Browse Products, Download Catalogue, Blog & Recipes)
   are longer than the originals and were wrapping "Contact Us" to a second line.
   Tighten the per-item horizontal padding so all six items fit on one row. */
.elementor-nav-menu li a,
.elementor-nav-menu .elementor-item { padding-left: 12px !important; padding-right: 12px !important; }


/* =====================================================================
   Shop page smart filters — Brand / Storage / Segment
   ===================================================================== */

#fa-shop-layout {
    display: flex;
    align-items: flex-start;
    gap: 32px;
    max-width: 1280px;
    margin: 0 auto;
    padding: 20px 20px 40px;
}

#fa-shop-filters {
    flex: 0 0 240px;
    width: 240px;
    background: #f8f9fa;
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    padding: 20px;
    position: sticky;
    top: 20px;
}

.fa-shop-filters__title {
    margin: 0 0 16px;
    font-size: 16px;
    font-weight: 700;
    color: #004d7b;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.fa-shop-filters__group {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e5e5e5;
}

.fa-shop-filters__group:last-of-type {
    border-bottom: none;
    margin-bottom: 12px;
}

.fa-shop-filters__group-title {
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 700;
    color: #333;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.fa-shop-filters__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.fa-shop-filters__list li {
    margin-bottom: 8px;
}

.fa-shop-filters__list label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #555;
    cursor: pointer;
    font-weight: 400;
}

.fa-shop-filters__list input.fa-filter-checkbox {
    margin: 0;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    cursor: pointer;
}

.fa-filter-count {
    color: #999;
    font-size: 12px;
}

#fa-shop-filters-clear {
    width: 100%;
    padding: 10px 12px;
    background: #ffffff;
    border: 1px solid #004d7b;
    color: #004d7b;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

#fa-shop-filters-clear:hover {
    background: #004d7b;
    color: #ffffff;
}

#fa-shop-content {
    flex: 1 1 auto;
    min-width: 0;
    position: relative;
    transition: opacity 0.15s ease;
}

#fa-shop-content.fa-loading {
    opacity: 0.4;
    pointer-events: none;
}

.fa-no-products {
    padding: 40px 0;
    font-size: 16px;
    color: #767676;
    text-align: center;
    width: 100%;
}

@media (max-width: 768px) {
    #fa-shop-layout {
        flex-direction: column;
        gap: 16px;
        padding: 12px 12px 30px;
    }

    #fa-shop-filters {
        width: 100%;
        flex: 1 1 auto;
        position: static;
    }

    .fa-shop-filters__group {
        margin-bottom: 14px;
        padding-bottom: 12px;
    }
}


/* --- Shop filters: collapse/expand toggle --- */

.fa-shop-filters__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 16px;
}

.fa-shop-filters__header .fa-shop-filters__title {
    margin: 0;
}

#fa-shop-filters-toggle {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border: 1px solid #004d7b;
    background: #ffffff;
    color: #004d7b;
    border-radius: 4px;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.15s ease, color 0.15s ease;
}

#fa-shop-filters-toggle:hover {
    background: #004d7b;
    color: #ffffff;
}

#fa-shop-filters {
    transition: width 0.2s ease, flex-basis 0.2s ease, padding 0.2s ease, min-width 0.2s ease;
    overflow: hidden;
}

#fa-shop-layout.fa-filters-collapsed #fa-shop-filters {
    width: 48px;
    flex: 0 0 48px;
    padding: 20px 10px;
}

#fa-shop-layout.fa-filters-collapsed .fa-shop-filters__title,
#fa-shop-layout.fa-filters-collapsed .fa-shop-filters__body {
    display: none;
}

#fa-shop-layout.fa-filters-collapsed .fa-shop-filters__header {
    justify-content: center;
}

@media (max-width: 768px) {
    #fa-shop-layout.fa-filters-collapsed #fa-shop-filters {
        width: 100%;
        flex: 1 1 auto;
        padding: 12px 16px;
    }
}


/* --- Shop filters: align header text with results count, stack toggle below --- */

#fa-shop-filters {
    padding-top: 4px;
}

#fa-shop-content {
    padding-top: 13px;
}

.fa-shop-filters__header {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 10px;
}


/* --- Shop filters: toggle moved left of label, label stays visible when collapsed --- */

#fa-shop-filters {
    padding-top: 8px;
}

.fa-shop-filters__header {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    margin-bottom: 16px;
}

/* Keep the "Filter Products" label visible even when collapsed;
   only the checkbox groups + clear button collapse. */
#fa-shop-layout.fa-filters-collapsed .fa-shop-filters__title {
    display: block;
}

#fa-shop-layout.fa-filters-collapsed .fa-shop-filters__header {
    justify-content: flex-start;
}

#fa-shop-layout.fa-filters-collapsed #fa-shop-filters {
    width: fit-content;
    flex: 0 0 auto;
    padding: 8px 16px 16px;
}


/* --- Shop filters: when collapsed, move above the product grid (full width)
   instead of remaining a left-hand column, so products get the full width
   and full vertical space. Expanded state keeps the left sidebar layout. --- */

#fa-shop-layout.fa-filters-collapsed {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
}

#fa-shop-layout.fa-filters-collapsed #fa-shop-filters {
    width: 100%;
    flex: 1 1 auto;
    padding: 12px 20px;
}


/* --- Shop filters: topbar wrapper (header + sort/per-page toolbar) --- */

.fa-shop-filters__topbar {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}

.fa-shop-filters__header {
    margin-bottom: 0;
}

.fa-shop-filters__toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.fa-shop-filters__toolbar-label {
    font-size: 13px;
    color: #555;
    font-weight: 600;
}

.fa-shop-filters__select {
    font-size: 13px;
    padding: 4px 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #ffffff;
    color: #333;
    max-width: 100%;
}

/* When collapsed: header + toolbar share one row to keep the bar slim */
#fa-shop-layout.fa-filters-collapsed .fa-shop-filters__topbar {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0;
    width: 100%;
    flex-wrap: wrap;
    gap: 10px;
}

/* --- Tighten spacing between the collapsed filter bar, the results count,
   and the product grid --- */

#fa-shop-layout.fa-filters-collapsed {
    gap: 8px;
}

#fa-shop-layout.fa-filters-collapsed #fa-shop-content {
    padding-top: 0;
}

#fa-shop-content .woocommerce-topbar {
    margin-bottom: 4px;
}


/* Prevent the theme's global select/label width rules from forcing the
   sort + per-page controls to stack full-width on their own lines. */
.fa-shop-filters__toolbar-label,
.fa-shop-filters__select {
    width: auto;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
}


/* --- Slim down the filter bar: the theme's global select height (50/51px)
   was inflating it. Override to a compact height with enough padding that
   text never touches the border. --- */

.fa-shop-filters__select {
    height: 30px;
}

.fa-shop-filters__toolbar-label {
    line-height: 1;
}

#fa-shop-layout.fa-filters-collapsed #fa-shop-filters {
    padding: 6px 16px;
}


/* --- Shop grid: pin the Add to Cart button to the bottom of every card,
   independent of title/rating/excerpt height above it. The cards are
   already equal height (flex row); the inner content column just needs
   the add-to-cart block pushed down with margin-top:auto. --- */

ul.products li.product .woocommerce-product-content {
    height: 100%;
}

ul.products li.product .woocommerce-add-to-cart {
    margin-top: auto;
}

/* Shop grid tile redesign: full image display, lighter title, unclipped button text, lower button position */
.woocommerce ul.products li.product .woocommerce-product-header {
    height: 192px;
    min-height: 192px;
    flex: 0 0 192px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #f7f7f7;
}
.woocommerce ul.products li.product .woocommerce-product-header img {
    width: auto !important;
    height: auto !important;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.woocommerce ul.products li.product .woocommerce-product-title,
.woocommerce ul.products li.product .woocommerce-product--title {
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.35;
}
.woocommerce ul.products li.product .woocommerce-product-content {
    padding-bottom: 16px !important;
}
.woocommerce ul.products li.product .woocommerce-add-to-cart:not(.woocommerce-add-to-cart-grid) a {
    padding: 0 14px !important;
    overflow: visible !important;
}


/* Show a minimum of 3 products per row on mobile screens.
   Overrides the Organio theme's default 1-2 column mobile layout
   (100% width <=575px, 50% width 576-767px) with 3 columns. */
@media screen and (max-width: 767px) {
    .woocommerce ul.products.columns-4 li.product,
    .woocommerce ul.products li.product {
        width: 33.33% !important;
    }
}


/* Mobile grid polish: tighter gutters between cards, less vertical gap between
   rows, a shorter/better-proportioned image box, tighter card padding, and a
   compact Add-to-Cart button that no longer wraps its text -- makes the 3-per-row
   mobile grid (see rule above) feel less cramped/empty and the products feel
   bigger, without changing anything above the 767px breakpoint. */
@media screen and (max-width: 767px) {
    .woocommerce ul.products {
        margin: 0 -4px !important;
    }
    .woocommerce ul.products li.product {
        padding: 0 4px !important;
        margin-bottom: 20px !important;
    }
    .woocommerce ul.products li.product .woocommerce-product-header {
        height: 130px !important;
        min-height: 130px !important;
        flex: 0 0 130px !important;
    }
    .woocommerce ul.products li.product .woocommerce-product-content {
        padding: 8px 8px 12px !important;
    }
    .woocommerce ul.products li.product .woocommerce-product-title,
    .woocommerce ul.products li.product .woocommerce-product--title {
        font-size: 13px !important;
    }
    .woocommerce ul.products li.product .woocommerce-add-to-cart:not(.woocommerce-add-to-cart-grid) a {
        padding: 0 10px !important;
        font-size: 12px !important;
        line-height: 36px !important;
        height: 36px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
    }
}

/* Mobile shop filter panel: put the "Sort" dropdown on the same line as the
   "FILTER PRODUCTS" heading/toggle instead of stacking it on its own row
   below -- matches the compact single-row layout Xavier asked for. */
@media screen and (max-width: 767px) {
    .fa-shop-filters__topbar {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex-wrap: nowrap !important;
    }
    .fa-shop-filters__header {
        flex: 0 1 auto !important;
        min-width: 0 !important;
    }
    .fa-shop-filters__title {
        white-space: nowrap !important;
    }
    .fa-shop-filters__toolbar {
        flex: 0 0 auto !important;
        width: auto !important;
        margin-left: 2px !important;
    }
    .fa-shop-filters__toolbar-label {
        display: none !important;
    }
    #fa-sort-select {
        width: 84px !important;
        font-size: 11px !important;
        padding: 3px 4px !important;
    }
}


/* Mobile-only: move the "Food Action" logo up into the top blue utility bar
   (alongside the social icons/cart) instead of its own row below it, per
   Xavier's annotated screenshot. Absolutely positioning the logo WIDGET
   (not its column) pulls it out of normal flow, so its now-empty column
   collapses and the row below (which still holds the mobile menu toggle)
   shrinks to fit -- no leftover blank gap. */
@media screen and (max-width: 767px) {
    .elementor-location-header {
        position: relative !important;
        /* The header's own child sections/menu-toggle dropdown need to render above
           whatever comes after the header in the page (e.g. the homepage's Slider
           Revolution banner). Forcing position:static on the header's inner wrappers
           (below, for the logo-placement fix) strips their own z-index-based stacking
           context, so without this the mobile nav dropdown (and the repositioned logo)
           could end up painting BEHIND later page content instead of on top of it. */
        z-index: 9999 !important;
    }
    .elementor-element-7c8e0d4b .elementor-container,
    .elementor-element-7c8e0d4b .elementor-column,
    .elementor-element-7c8e0d4b .elementor-widget-wrap {
        position: static !important;
    }
    /* The section itself needs to stay positioned (not static) with a z-index higher
       than the top bar's (1000) so it and its descendants (the logo below, and the
       mobile nav dropdown in the hamburger column) render above the top bar's own
       background instead of behind it. */
    .elementor-element-7c8e0d4b {
        position: relative !important;
        z-index: 1001 !important;
    }
    /* The logo is now physically moved into the mobile top bar as a normal
       flex-row child (see faReorgMobileHeader in functions.php) instead of
       being absolutely positioned over it, so it scrolls/sticks together
       with the rest of the frozen bar below. */
    .elementor-element-1b608fed {
        flex-shrink: 0 !important;
        width: auto !important;
    }
    /* Swap to the white logo variant (same file used in the footer) so it reads
       cleanly directly on the dark blue top bar, instead of the navy logo that
       previously needed the white background chip to stay visible. */
    .elementor-element-1b608fed img {
        content: url('https://foodaction.com.au/wp-content/uploads/2022/08/Food-Action-Main-Logo-White.png') !important;
        max-height: 32px !important;
        width: auto !important;
    }
}

/* Mobile-only: keep the top blue bar's social icons and the cart icon on the
   SAME row (Elementor's own mobile CSS stacks these two 50/50 columns into
   two separate rows, which visually pushed the cart lower than the icons --
   Xavier's annotated screenshot asked for them aligned). */
@media screen and (max-width: 767px) {
    .elementor-element-25810aa8 > .elementor-container {
        flex-wrap: nowrap !important;
        align-items: center !important;
    }
    .elementor-element-14f8fe9e {
        width: 100% !important;
        flex: 1 1 100% !important;
    }
    .elementor-element-79dfdd69 {
        display: none !important;
    }
}

/* "Why Food Action?" heading: bold rounded font to visually match the
   "100% Pure Food" banner lettering (that text is baked into the banner's
   image, so this is the closest real web font, not an exact copy). Applies
   on all screen sizes, not just mobile, since it's a brand-consistency fix. */
.elementor-element-0e4e341 h1,
.elementor-element-0e4e341 .elementor-heading-title {
    font-family: 'Fredoka', 'Poppins', sans-serif !important;
    font-weight: 600 !important;
}

/* Footer: tighten the generous default vertical rhythm so the mobile
   footer (Links / Official Info / Follow Us, stacked full-width on mobile)
   doesn't run so long -- reduces the section's large top padding and the
   gap above each nav list, without touching desktop's multi-column layout. */
@media screen and (max-width: 767px) {
    .elementor-element-1487dfd9 {
        padding-top: 40px !important;
        padding-bottom: 12px !important;
    }
    .elementor-element-1487dfd9 .elementor-widget-ct {
        margin-bottom: 6px !important;
    }
    .elementor-element-34841759 .elementor-icon-list-item,
    .elementor-element-6932c6a4 .elementor-icon-list-item {
        margin-bottom: 4px !important;
    }
}

/* Collapsible accordion for Brand/Storage/Segment filter groups (save space) */
.fa-shop-filters__group-toggle {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    -webkit-user-select: none;
    user-select: none;
}

.fa-shop-filters__group-arrow {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-right: 2px solid #333;
    border-bottom: 2px solid #333;
    transform: rotate(45deg);
    transition: transform 0.2s ease;
    margin-left: 8px;
    flex-shrink: 0;
}

.fa-shop-filters__group.is-open .fa-shop-filters__group-arrow {
    transform: rotate(-135deg);
}

.fa-shop-filters__group .fa-shop-filters__list {
    display: none;
}

.fa-shop-filters__group.is-open .fa-shop-filters__list {
    display: block;
}


/* Mobile: enlarge Our Brands carousel logos to reduce empty space around each logo
   (each Slick slide is a fixed-width box set via inline style; we only resize the
   image inside it, never the slide/track width, so Slick's position math stays intact) */
@media screen and (max-width: 767px) {
    .exad-logo-carousel-element .exad-logo-carousel-item img {
        width: 160px !important;
        height: 160px !important;
    }
}


/* Mobile: the footer's logo column (elementor-element-6178891) has a fixed height
   set for desktop 4-column row alignment; on mobile the columns stack, so the fixed
   height leaves a large empty gap between the logo and the Links column below it. */
@media screen and (max-width: 767px) {
    .elementor-element-6178891 {
        height: auto !important;
    }
    .elementor-element-6178891 > .elementor-widget-wrap {
        height: auto !important;
    }
}

/* Mobile: the "Clear filters" button was a full-width bar taking a big
   chunk of vertical space in the filter panel. Shrink it to a compact,
   left-aligned pill so the panel takes less room on small screens. */
@media screen and (max-width: 767px) {
    #fa-shop-filters-clear {
        width: auto !important;
        display: inline-block !important;
        padding: 6px 14px !important;
        font-size: 12px !important;
        margin-top: 4px !important;
    }
}


/* Mobile: "freeze" the top bar (logo + social icons + customer portal +
   cart) so it stays pinned to the top of the screen while the rest of the
   page scrolls underneath it. position:sticky doesn't work here because
   its containing block (the whole header wrapper) is only as tall as the
   header itself, so the sticky element runs out of room to "stick" within
   a few dozen pixels of scrolling -- position:fixed has no such limit.
   The margin-top on the row below reserves the space the bar used to
   occupy so nothing jumps under it once it's taken out of flow. */
@media screen and (max-width: 767px) {
    .elementor-element-25810aa8 {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        z-index: 9999 !important;
    }
    /* When viewing as a logged-in admin the WP toolbar is also fixed at the
       top (46px tall on mobile widths); sit below it instead of under it.
       Regular customers never see the admin bar, so top:0 above covers them. */
    body.admin-bar .elementor-element-25810aa8 {
        top: 46px !important;
    }
    .elementor-element-7c8e0d4b {
        margin-top: 65px !important;
    }

    /* Lay the top bar's own content (logo, icons widget, cart -- reordered
       into this column via faReorgMobileHeader in functions.php) out as a
       single row instead of the old two-50%-column split. */
    .elementor-element-14f8fe9e .elementor-widget-wrap {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        flex-wrap: nowrap !important;
    }
    /* The social-icons widget normally stretches/centers itself across its
       column on mobile (Elementor's own responsive alignment setting) --
       here it needs to hug its own content instead so it doesn't crowd out
       the logo and cart sharing the same row. */
    .elementor-element-4cd6354c {
        width: auto !important;
        flex: 0 0 auto !important;
        text-align: left !important;
    }
    .elementor-element-4cd6354c .elementor-social-icons-wrapper {
        width: auto !important;
        text-align: left !important;
    }
    .elementor-element-4cd6354c .elementor-icon.elementor-social-icon {
        width: 26px !important;
        height: 26px !important;
    }
    /* The cart widget's wrapper defaults to full-width block sizing; shrink
       it to its own content so it sits neatly at the end of the row. */
    .elementor-element-d50f779 {
        flex: 0 0 auto !important;
        width: auto !important;
        margin-left: auto !important;
    }
    .elementor-element-d50f779 .elementor-menu-cart__toggle_wrapper {
        width: auto !important;
    }
    /* The logo's old column is now empty (the logo itself moved into the
       top bar above), so hide it and let the hamburger toggle take the
       full row. */
    .elementor-element-3cb26c43 {
        display: none !important;
    }
    .elementor-element-3a2eae95 {
        width: 100% !important;
        flex: 0 0 100% !important;
    }
}

/* New TikTok icon added to the social-icons list (see faAddTiktokIcon in
   functions.php) -- Font Awesome's bundled version here predates its TikTok
   glyph, so it's an inline SVG rather than an <i> icon font class, and needs
   its own color rule to match the white FB/IG/LinkedIn icons beside it. */
.fa-social-icon-tiktok {
    color: #ffffff !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}


@media screen and (max-width: 767px) {
    .elementor-element-7630c124 {
        display: none !important;
    }
    .elementor-element-6178891 {
        display: none !important;
    }
    .elementor-element-9171d25 .elementor-social-icons-wrapper {
        display: flex !important;
        flex-wrap: wrap !important;
    }
}


@media screen and (max-width: 767px) {
    .elementor-nav-menu--dropdown a:hover,
    .elementor-nav-menu--dropdown a:focus,
    .elementor-nav-menu--dropdown a.elementor-item-active,
    .elementor-nav-menu--dropdown a.highlighted {
        background-color: #10bccd !important;
    }
}


@media screen and (max-width: 767px) {
    /* Hamburger toggle moved into the frozen top bar via JS; hide the now-empty white row it used to occupy */
    .elementor-element-7c8e0d4b {
        display: none !important;
    }
    .container.content-container {
        margin-top: 65px !important;
    }
    .elementor-element-6bea7610 {
        flex: 0 0 auto !important;
        width: auto !important;
        margin-left: 8px !important;
        background-color: transparent !important;
    }
    .elementor-element-6bea7610 .elementor-menu-toggle,
    .elementor-element-6bea7610 .elementor-menu-toggle i {
        color: #ffffff !important;
    }

    /* Square footer social icons instead of round */
    .elementor-element-9171d25 .elementor-icon.elementor-social-icon {
        border-radius: 8px !important;
    }

    /* Tighten space between the "Why Food Action" text and the "Our Brands" heading */
    .elementor-element-df443b1 {
        margin-bottom: 10px !important;
    }
    .elementor-element-fd1ec6e {
        padding-top: 15px !important;
    }
    .elementor-element-54cfc80 .elementor-widget-container {
        margin-top: 0 !important;
    }

    /* Our Brands carousel: smaller logos, tighter spacing */
    .exad-logo-carousel-item {
        margin-left: 5px !important;
        margin-right: 5px !important;
        margin-bottom: 10px !important;
    }
    .exad-logo-carousel-item img {
        max-width: 110px !important;
        max-height: 110px !important;
    }
    .exad-logo-carousel-element {
        margin-bottom: 15px !important;
    }
}