/*
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;
    }
    .elementor-element-7c8e0d4b,
    .elementor-element-7c8e0d4b .elementor-container,
    .elementor-element-7c8e0d4b .elementor-column,
    .elementor-element-7c8e0d4b .elementor-widget-wrap {
        position: static !important;
    }
    .elementor-element-1b608fed {
        position: absolute !important;
        top: 4px !important;
        left: 12px !important;
        width: auto !important;
        z-index: 30 !important;
        /* The logo's navy text is the same color as the top bar's background
           (both rgb(0,77,124)), so it's invisible without a light backdrop. */
        background: #ffffff !important;
        border-radius: 6px !important;
        padding: 3px 8px !important;
    }
    .elementor-element-1b608fed img {
        max-height: 36px !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: auto !important;
        flex: 1 1 auto !important;
    }
    .elementor-element-79dfdd69 {
        width: auto !important;
        flex: 0 0 auto !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;
    }
}