/**
Theme Name: Fluxotic
Author: Brainstorm Force
Author URI: http://wpastra.com/about/
Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme!
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: fluxotic
Template: astra
*/


/* ==========================================================================
   Shop archive – horizontal filter bar
   ========================================================================== */

.fx-filter-bar .widget,
.fx-filter-bar .ast-filter-wrap {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
}

/* Astra gives sidebar widgets a 44.8px bottom margin – dead space in a bar */
.fx-filter-bar .ast-woo-sidebar-widget { margin-bottom: 0 !important; }

/* selects sit on the card, so keep them white for contrast */
.fx-filters select.facetwp-dropdown { background-color: #fff; }

.fx-filters,
.fx-filter-bar {
    /* Gold rather than the accent blue: the bar sits directly under the gold
       category strip, and it is the same premium language the header uses. */
    --fx-accent: #B48103;
    --fx-accent-soft: rgba(180, 129, 3, .12);
    --fx-text: var(--e-global-color-text, #27251F);
    --fx-muted: #7A756D;
    --fx-border: rgba(39, 37, 31, .12);
}

/* A white card on a hairline instead of the flat grey tint – the page reads as
   paper with one raised control panel on it, not two shades of grey. */
.fx-filter-bar {
    position: relative;
    background: #fff;
    border: 1px solid var(--fx-border);
    border-radius: 14px;
    padding: 20px 26px 22px !important;
    margin-bottom: 26px;
    box-shadow: 0 1px 2px rgba(39, 37, 31, .05), 0 10px 26px -18px rgba(39, 37, 31, .30);
}

/* gold hairline across the top edge, tying the bar to the header band */
.fx-filter-bar::before {
    content: "";
    position: absolute;
    top: -1px;
    right: 26px;
    left: 26px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, #B48103, #D9A518 55%, rgba(180, 129, 3, 0));
}

/* "Αναζήτηση ανά" – an eyebrow rather than a heading, so the controls stay
   the loudest thing in the bar */
.fx-filter-bar .elementor-widget-heading .elementor-heading-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    font-family: "Open Sans", sans-serif;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--fx-muted);
}

.fx-filter-bar .elementor-widget-heading .elementor-heading-title::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--fx-border), rgba(39, 37, 31, 0));
}

/* facet grid: 4 across on desktop, collapsing down */
.fx-filters .fx-facets {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px 16px;
    align-items: end;
}

@media (max-width: 1024px) {
    .fx-filters .fx-facets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 544px) {
    .fx-filters .fx-facets { grid-template-columns: 1fr; }
}

/* flatten the per-facet "card" styling coming from the Customizer CSS,
   which was designed for the old vertical sidebar */
.fx-filters .facet-box {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    padding: 0;
    margin-bottom: 0;
    background: none;
    border-radius: 0;
    box-shadow: none;
}

/* facets with no available choices, and the collapsed overflow */
.fx-filters .facet-box.is-empty { display: none !important; }
.fx-filters .facet-box.is-extra { display: none; }
.fx-filters.show-all .facet-box.is-extra { display: flex; }

/* labels are injected by the Elementor custom-code snippet (post 12040),
   which already handles el/en translation and the icon per facet */
.fx-filters .fx-facets .facet-heading {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 0 !important;
    font-size: 10.5px;
    font-weight: 700 !important;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--fx-muted);
    opacity: 1;
}

.fx-filters .fx-facets .facet-heading i { font-size: 12px; color: var(--fx-accent); }

/* the dropdowns themselves */
.fx-filters .facetwp-facet { margin-bottom: 0; }

.fx-filters select.facetwp-dropdown {
    width: 100%;
    max-width: 100%;
    height: 46px;
    padding: 0 38px 0 14px;
    border: 1px solid var(--fx-border);
    border-radius: 9px;
    background-color: #fff;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='none' stroke='%2327251F' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1.2 1.6 6 6.4l4.8-4.8'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    box-shadow: inset 0 1px 2px rgba(39, 37, 31, .04);
    -webkit-appearance: none;
    appearance: none;
    font-size: 14px;
    font-weight: 600;
    color: var(--fx-text);
    cursor: pointer;
    text-overflow: ellipsis;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.fx-filters select.facetwp-dropdown:hover { border-color: rgba(180, 129, 3, .45); }

.fx-filters select.facetwp-dropdown:focus {
    outline: none;
    border-color: var(--fx-accent);
    box-shadow: 0 0 0 3px var(--fx-accent-soft);
}

/* "more filters" toggle – a pill, so it reads as the bar's own control rather
   than a stray link under it */
.fx-filters .fx-filters-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 16px;
    padding: 8px 16px;
    border: 1px solid var(--fx-border);
    border-radius: 999px;
    background: #fff;
    color: var(--fx-text);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .04em;
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease, color .2s ease;
}

/* a chevron that flips once the extra facets are open */
.fx-filters .fx-filters-toggle::after {
    content: "";
    width: 9px;
    height: 9px;
    border-right: 1.6px solid currentColor;
    border-bottom: 1.6px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform .25s ease;
}

.fx-filters.show-all .fx-filters-toggle::after { transform: translateY(2px) rotate(-135deg); }

.fx-filters .fx-filters-toggle:hover {
    border-color: var(--fx-accent);
    background: var(--fx-accent-soft);
    color: var(--fx-accent);
    text-decoration: none;
}
.fx-filters .fx-filters-toggle[hidden] { display: none; }
.fx-filters .fx-toggle-less { display: none; }
.fx-filters.show-all .fx-toggle-more { display: none; }
.fx-filters.show-all .fx-toggle-less { display: inline; }

/* active selections (shown/hidden by the snippet in post 12040) */
.fx-filters .facet-selections-box {
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--fx-border);
}

.fx-filters .facetwp-selections-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.fx-filters .facetwp-selections ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.fx-filters .facetwp-selections li { margin: 0; }

/* chips carry the gold tint so the active filters are the first thing the eye
   lands on when it comes back to the bar */
.fx-filters .facetwp-selections .facetwp-selection-value {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 13px;
    border: 1px solid rgba(180, 129, 3, .32);
    border-radius: 999px;
    background: var(--fx-accent-soft);
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--fx-text);
    transition: border-color .2s ease, background .2s ease;
}

.fx-filters .facetwp-selections .facetwp-selection-value:hover {
    border-color: var(--fx-accent);
    background: rgba(180, 129, 3, .18);
}

.fx-filters .facetwp-clear-btn {
    padding: 6px 13px;
    border: 1px solid var(--fx-border);
    border-radius: 999px;
    background: #fff;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--fx-muted);
    cursor: pointer;
    transition: border-color .2s ease, color .2s ease;
}

.fx-filters .facetwp-clear-btn:hover {
    border-color: var(--fx-accent);
    color: var(--fx-accent);
}


/* ==========================================================================
   Header – top bar
   Utility row on charcoal: promise on the left, contact + account on the
   right. Gold icons tie it to the cart icon and the category strip.
   ========================================================================== */

.fx-topbar {
    --tb-text: #C9C5BC;
    --tb-gold: #B48103;
    font-size: 12.5px;
}

/* All three header tiers are boxed to 85%, the same column the page content
   uses, so the logo lines up with the products below. Boxed containers carry
   their flex layout on .e-con-inner, not on the outer element.

   These have to be set as Elementor's own custom properties, not as plain
   longhands. Elementor lays containers out with `.e-con.e-flex{flex-direction:
   var(--flex-direction)}` — two classes — and writes the property itself from
   `.elementor-12721 .elementor-element.elementor-element-c1994bd` — three. A
   longhand on `.fx-topbar` is one class and loses to both, so the row layout
   only held while the generated file happened to say `row`; the moment the
   header was re-saved in Elementor and the file regenerated as `column`, the
   whole top bar stacked. Setting the variable, flagged, survives a regenerate. */
.fx-topbar,
.fx-topbar > .e-con-inner {
    --flex-direction: row !important;
    --justify-content: space-between !important;
    --align-items: center !important;
    --flex-wrap: wrap !important;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    column-gap: 20px;
    row-gap: 6px;
}

.elementor-element-ca49ad3 > .e-con-inner {
    --flex-direction: row !important;
    --align-items: center !important;
    flex-direction: row;
    align-items: center;
    column-gap: 32px;
}

@media (max-width: 767px) {
    .elementor-element-ca49ad3 > .e-con-inner {
        flex-wrap: wrap;
        row-gap: 10px;
        column-gap: 12px;              /* 32px left logo + actions 12px too wide */
    }
}

.fx-topbar-left,
.fx-topbar-right {
    --flex-direction: row !important;
    --flex-wrap: nowrap !important;
    --align-items: center !important;
    --flex-grow: 0;
    --flex-shrink: 1;
    --flex-basis: auto;
    --width: auto;
    align-items: center;
    column-gap: 18px;
}

.fx-topbar-right { justify-content: flex-end; }

.fx-topbar .elementor-icon-list-item,
.fx-topbar .elementor-icon-list-text,
.fx-topbar a {
    color: var(--tb-text);
    font-size: 12.5px;
    line-height: 1.4;
}

.fx-topbar .elementor-icon-list-icon i,
.fx-topbar .elementor-icon-list-icon svg { color: var(--tb-gold); fill: var(--tb-gold); }

.fx-topbar a:hover,
.fx-topbar .elementor-icon-list-item:hover .elementor-icon-list-text { color: #fff; }

/* the phone should read as the one thing worth calling */
.fx-topbar-right .elementor-icon-list-item .elementor-icon-list-text { white-space: nowrap; }
.fx-topbar-right > .elementor-element:first-child .elementor-icon-list-text {
    font-weight: 600;
    color: #EDEAE4;
    letter-spacing: .3px;
}

.fx-topbar .wpml-ls-legacy-list-horizontal { padding: 0; border: 0; background: none; }
.fx-topbar .wpml-ls-legacy-list-horizontal a { padding: 0 4px; }

/* The switcher widget paints its links with the global text colour (#27251F),
   which is invisible on the charcoal bar. Its rule is deeply nested, so match
   the same path one level deeper. */
.fx-topbar .elementor-widget-wpml-language-switcher .wpml-elementor-ls .wpml-ls-item .wpml-ls-link,
.fx-topbar .elementor-widget-wpml-language-switcher .wpml-elementor-ls .wpml-ls-legacy-dropdown a,
.fx-topbar .elementor-widget-wpml-language-switcher .wpml-ls-item a,
.fx-topbar .wpml-ls-item a span {
    color: var(--tb-text);
}

.fx-topbar .elementor-widget-wpml-language-switcher .wpml-ls-item a:hover,
.fx-topbar .elementor-widget-wpml-language-switcher .wpml-ls-current-language > a {
    color: #EDEAE4;
}

@media (max-width: 767px) {
    .fx-topbar { justify-content: center !important; text-align: center; }
    .fx-topbar-left, .fx-topbar-right { justify-content: center !important; }
}


/* ==========================================================================
   Header – main row: logo | search | actions
   ========================================================================== */

/* Three zones: logo holds its size, search absorbs the slack, actions hug the
   right. Elementor sizes containers through --flex-* / --width variables on
   .e-con.e-flex, which outranks a plain `flex:` shorthand — so set those. */
/* The logo and the search sit inside one wrapper, which would peg the search
   to the left half. Dissolving the wrapper makes logo / search / actions three
   siblings of the row, so the search can be centred against the full width. */
.elementor-location-header .elementor-element-a1aadaa { display: contents !important; }

/* Logo and actions flex from a zero basis, so they claim equal slack on either
   side and the fixed-width search lands dead centre of the row. */
/* Elementor's own stylesheet loads after the child theme, so an equal-specificity
   rule loses the tie. Match its `.elementor-12721 .elementor-element.…` pattern.

   Logo and actions stay content-sized; the search takes `margin: auto`, which
   hands it all the free space evenly on both sides. Since the two side zones
   are close in width (147px / 171px), it lands within ~12px of true centre —
   and it degrades gracefully if either side changes. */
.elementor-location-header .elementor-element.elementor-element-bc86e45 {
    --flex-grow: 0;                    /* logo – left */
    --flex-shrink: 0;
    --flex-basis: auto;
    --width: auto;
    align-items: flex-start;
}

.elementor-element-bc86e45 .elementor-widget-image { max-width: 190px; }

.elementor-location-header .elementor-element.fx-header-search {
    --flex-grow: 0;                    /* search – centred */
    --flex-shrink: 1;
    --flex-basis: auto;
    --width: 560px;
    min-width: 0;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
}

.elementor-location-header .elementor-element.elementor-element-86d9f47 {
    --flex-grow: 0;                    /* actions – right */
    --flex-shrink: 0;
    --flex-basis: auto;
    --width: auto;
    align-items: flex-end;
}

/* the search input was 148px wide on a shop with 1.300 products */
.fx-header-search .aws-container,
.fx-header-search .aws-search-form { width: 100%; max-width: 560px; }

.fx-header-search .aws-search-field {
    height: 44px;
    border: 1px solid #d8dee3;
    border-radius: 6px;
    font-size: 14px;
    padding-left: 14px;
}

.fx-header-search .aws-search-field:focus {
    border-color: var(--e-global-color-accent, #449FBD);
    box-shadow: 0 0 0 2px rgba(68, 159, 189, .18);
    outline: none;
}

.fx-header-search .aws-search-btn { border-radius: 0 6px 6px 0; }

/* actions line up on one baseline with even spacing */
.fx-header-actions .elementor-widget { margin: 0; }
.fx-header-actions .elementor-icon-list-item { white-space: nowrap; }

.fx-header-actions .elementor-menu-cart__toggle_wrapper,
.fx-header-actions .elementor-menu-cart__toggle,
.fx-header-actions .elementor-button-wrapper { margin: 0; }

/* the cart sat at 20px wide with the qty badge crowding it */
.fx-header-actions .elementor-menu-cart__toggle_button {
    padding: 0 2px;
    display: inline-flex;
    align-items: center;
}

/* Mobile: logo and actions share the first line, search gets its own.
   `display: contents` dissolves the left wrapper so all three become
   siblings of the row and can be reordered. */
@media (max-width: 767px) {
    .elementor-element-ca49ad3 { flex-wrap: wrap; row-gap: 10px; }

    /* Elementor's `@media .e-con.e-flex{--width:100%}` is 0,2,0, so these need
       to be at least as specific to keep logo and actions on one line. */
    .elementor-location-header .elementor-element.elementor-element-bc86e45 {
        order: 1;
        max-width: 150px;
        --width: auto;
        --flex-grow: 0;
        --flex-shrink: 0;
        --flex-basis: auto;
    }

    .elementor-location-header .elementor-element.elementor-element-86d9f47 {
        order: 2;
        margin-left: auto;
        --width: auto;
        --flex-grow: 0;
        --flex-shrink: 0;
        --flex-basis: auto;
    }

    .elementor-location-header .elementor-element.fx-header-actions { --width: auto; }

    .elementor-location-header .elementor-element.fx-header-search {
        order: 3;
        max-width: none;
        --width: 100%;
        --flex-basis: 100%;
        --flex-grow: 1;
        --flex-shrink: 1;
        margin-left: 0;                /* full width on mobile, not centred */
        margin-right: 0;
    }

    .fx-header-search .aws-container,
    .fx-header-search .aws-search-form { max-width: none; }

    .fx-header-actions { justify-content: flex-end; }
}


/* ==========================================================================
   Header category strip – "ΛΑΔΙΑ - ΧΗΜΙΚΑ - ΛΙΠΑΝΤΙΚΑ"
   Charcoal band with crisp white cards: high contrast reads as premium and
   keeps the product shots legible. Gold picks up the header cart icon.
   Band colour / hairline / label live in the Elementor settings (12721, 13161).
   ========================================================================== */

.elementor-element-ee4c02f {
    --cat-gold: #B48103;
    --cat-line: rgba(255, 255, 255, .14);
    --cat-text: #27251F;
}

.elementor-element-ee4c02f .elementor-element-0aaca0a { margin-bottom: 1px; }

/* Swiper clips to its own box, so the card hairline, the hover lift and the
   shadow were all being cut off. Pad the clip box out and pull the extra
   height back with a negative margin, leaving the layout height unchanged. */
.elementor-element-19d0cad .e-n-carousel.swiper {
    padding: 10px 0;
    margin: -10px 0;
}

.elementor-element-79147f3 > .e-con-inner { padding-top: 0; padding-bottom: 0; }

.elementor-element-19d0cad .swiper-slide > .e-con,
.elementor-element-19d0cad .swiper-slide > .elementor-element {
    height: 100%;
    padding-top: 0;
    padding-bottom: 0;
}

.elementor-element-19d0cad .swiper-slide > .e-con > .e-con-inner {
    padding-top: 0;
    padding-bottom: 0;
    height: 100%;
}

/* the card */
.elementor-element-19d0cad .swiper-slide .e-con-inner > .e-con,
.elementor-element-19d0cad .swiper-slide .e-con-inner > .elementor-element {
    height: 100%;
    padding: 10px 6px 8px;
    background: #fff;
    border: 1px solid var(--cat-line);
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
    transition: box-shadow .2s ease, transform .2s ease;
}

.elementor-element-19d0cad .swiper-slide .e-con-inner > .e-con:hover,
.elementor-element-19d0cad .swiper-slide .e-con-inner > .elementor-element:hover {
    box-shadow: 0 0 0 2px var(--cat-gold), 0 6px 16px rgba(0, 0, 0, .45);
    transform: translateY(-2px);
}

.elementor-element-19d0cad .swiper-slide .elementor-widget-image img {
    width: 48px;
    height: 48px;
    object-fit: contain;
    margin: 0 auto;
    display: block;
}

.elementor-element-19d0cad .swiper-slide .elementor-widget-heading .elementor-heading-title,
.elementor-element-19d0cad .swiper-slide .elementor-widget-heading .elementor-heading-title a {
    font-family: "Open Sans", sans-serif;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--cat-text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color .2s ease;
}

.elementor-element-19d0cad .swiper-slide .e-con-inner > *:hover .elementor-heading-title,
.elementor-element-19d0cad .swiper-slide .e-con-inner > *:hover .elementor-heading-title a {
    color: var(--cat-gold);
}

/* the widget binds the arrow colour to the global accent, which fights the
   dark band – restate it one level deeper so the icon inherits ours */
.elementor-element-ee4c02f .elementor-element-19d0cad .elementor-swiper-button,
.elementor-element-ee4c02f .elementor-element-19d0cad .elementor-swiper-button i,
.elementor-element-ee4c02f .elementor-element-19d0cad .elementor-swiper-button svg {
    color: #EDEAE4;
    fill: #EDEAE4;
}

.elementor-element-ee4c02f .elementor-element-19d0cad .elementor-swiper-button:hover,
.elementor-element-ee4c02f .elementor-element-19d0cad .elementor-swiper-button:hover i,
.elementor-element-ee4c02f .elementor-element-19d0cad .elementor-swiper-button:hover svg {
    color: #27251F;
    fill: #27251F;
}

/* arrows tuned for the dark band */
.elementor-element-19d0cad .elementor-swiper-button {
    width: 26px;
    height: 26px;
    background: rgba(255, 255, 255, .10);
    border: 1px solid var(--cat-line);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #EDEAE4;
    transition: background .2s ease, border-color .2s ease, color .2s ease;
}

.elementor-element-19d0cad .elementor-swiper-button:hover {
    background: var(--cat-gold);
    border-color: var(--cat-gold);
    color: #27251F;
}

@media (max-width: 767px) {
    .elementor-element-19d0cad .swiper-slide .elementor-widget-image img { width: 42px; height: 42px; }
    .elementor-element-19d0cad .swiper-slide .e-con-inner > .e-con { padding: 8px 5px 7px; }
}


/* ==========================================================================
   Header cart toggle
   The global kit paints every .elementor-button with the accent colour, which
   leaks onto the cart icon and gives it a blue square behind it. The widget's
   own rule asks for transparent but loses on load order, so restate it here
   at a higher specificity. The icon keeps its own gold colour.
   ========================================================================== */

.elementor-menu-cart__toggle .elementor-button.elementor-menu-cart__toggle_button,
.elementor-menu-cart__toggle .elementor-button.elementor-menu-cart__toggle_button:hover,
.elementor-menu-cart__toggle .elementor-button.elementor-menu-cart__toggle_button:focus {
    background-color: transparent;
    box-shadow: none;
}



/* ==========================================================================
   Home – "ΔΡΑΣΤΗΡΙΟΤΗΤΕΣ & DIY" (.fx-activities)
   The carousel was built for 128px transparent icons: 8 across, no card, the
   label underneath. Photographs need room and a dark base to sit on, so the
   slide is turned into a fixed-ratio photo card with the label burned into
   the bottom of the image. Any upload works – object-fit crops it to the same
   4:3 box, so mixed portrait/landscape shots still line up.
   Slides per view (4 / 3 / 2) and the 24px gutter live in the widget settings.
   ========================================================================== */

.fx-activities {
    --act-radius: 12px;
    --act-ratio: 4 / 3;
    --act-gold: #B48103;
    --act-ink: #27251F;

    /* the arrows are positioned inside – pull them off the card edge */
    --e-n-carousel-arrow-prev-left-position: 12px !important;
    --e-n-carousel-arrow-next-right-position: 12px !important;
}

/* Swiper clips to its own box, so the hover lift and its shadow were being
   cut off. Pad the clip box out and pull the extra height back with a
   negative margin, leaving the layout height unchanged. */
.fx-activities .e-n-carousel.swiper {
    padding: 14px 0;
    margin: -14px 0;
}

/* the slide wrappers carry Elementor's boxed padding – the card wants the
   full slide width, so flatten them and let the card own the box */
.fx-activities .swiper-slide > .e-con,
.fx-activities .swiper-slide > .e-con > .e-con-inner {
    height: 100%;
    padding: 0;
}

/* the card */
.fx-activities .swiper-slide .e-con-inner > .e-con {
    position: relative;
    height: 100%;
    padding: 0;
    overflow: hidden;
    border-radius: var(--act-radius);
    background: var(--act-ink);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
    transition: box-shadow .25s ease, transform .25s ease;
}

.fx-activities .swiper-slide .e-con-inner > .e-con:hover {
    transform: translateY(-3px);
    box-shadow: 0 0 0 2px var(--act-gold), 0 10px 24px rgba(0, 0, 0, .28);
}

/* the photo fills the card at a fixed ratio, whatever shape the upload is */
.fx-activities .swiper-slide .elementor-widget-image {
    width: 100%;
    aspect-ratio: var(--act-ratio);
}

.fx-activities .swiper-slide .elementor-widget-image > .elementor-widget-container,
.fx-activities .swiper-slide .elementor-widget-image a {
    display: block;
    height: 100%;
}

.fx-activities .swiper-slide .elementor-widget-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
    transition: transform .5s ease;
}

.fx-activities .swiper-slide .e-con-inner > .e-con:hover .elementor-widget-image img {
    transform: scale(1.06);
}

/* gradient veil so the label stays readable over a bright photo */
.fx-activities .swiper-slide .e-con-inner > .e-con::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(to top,
        rgba(0, 0, 0, .82) 0%,
        rgba(0, 0, 0, .44) 38%,
        rgba(0, 0, 0, 0) 68%);
}

/* the label sits on the photo, bottom left */
.fx-activities .swiper-slide .elementor-widget-heading {
    position: absolute;
    z-index: 2;
    right: 0;
    bottom: 0;
    left: 0;
    text-align: left !important;
}

.fx-activities .swiper-slide .elementor-widget-heading > .elementor-widget-container {
    margin: 0 !important;
    padding: 12px 14px;
}

/* the widget's own font-size rule is three classes deep and loads after this
   file, so match its weight to win the label back */
.fx-activities .swiper-slide .elementor-widget-heading .elementor-heading-title,
.fx-activities .swiper-slide .elementor-widget-heading .elementor-heading-title a {
    font-family: "Open Sans", sans-serif;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.25;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* a gold rule that wipes in under the label on hover */
.fx-activities .swiper-slide .elementor-widget-heading > .elementor-widget-container::before {
    content: "";
    position: absolute;
    left: 14px;
    bottom: 6px;
    width: 28px;
    height: 2px;
    background: var(--act-gold);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .3s ease;
}

.fx-activities .swiper-slide .e-con-inner > .e-con:hover .elementor-widget-heading > .elementor-widget-container::before {
    transform: scaleX(1);
}

/* the widget binds the arrow colour to the global accent, which disappears
   against a photo – restate it on a white pill instead */
.fx-activities .elementor-swiper-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .22);
    font-size: 16px;
    transition: background .2s ease, color .2s ease;
}

.fx-activities .elementor-swiper-button,
.fx-activities .elementor-swiper-button i,
.fx-activities .elementor-swiper-button svg {
    color: var(--act-ink);
    fill: var(--act-ink);
}

.fx-activities .elementor-swiper-button:hover { background: var(--act-gold); }

.fx-activities .elementor-swiper-button:hover,
.fx-activities .elementor-swiper-button:hover i,
.fx-activities .elementor-swiper-button:hover svg {
    color: #fff;
    fill: #fff;
}

@media (max-width: 1024px) {
    .fx-activities .swiper-slide .elementor-widget-heading .elementor-heading-title,
    .fx-activities .swiper-slide .elementor-widget-heading .elementor-heading-title a { font-size: 14px; }
}

@media (max-width: 767px) {
    .fx-activities {
        --act-radius: 10px;
        --act-ratio: 3 / 4;
    }

    .fx-activities .swiper-slide .elementor-widget-heading > .elementor-widget-container { padding: 10px 11px; }

    .fx-activities .swiper-slide .elementor-widget-heading .elementor-heading-title,
    .fx-activities .swiper-slide .elementor-widget-heading .elementor-heading-title a { font-size: 13px; }

    .fx-activities .swiper-slide .elementor-widget-heading > .elementor-widget-container::before { left: 11px; }

    .fx-activities .elementor-swiper-button { width: 32px; height: 32px; font-size: 14px; }
}

/* ==========================================================================
   Home – oil finder ([fluxotic_oil_finder])
   A dark band directly under the hero so the tool reads as the first thing
   you can *do* on the page, against the cream and white sections below it.
   The form is a plain GET to /shop/ – the selects are named after the FacetWP
   query args, so the archive does the filtering and we keep no second grid.
   ========================================================================== */

.fx-oil-finder {
    --of-gold: #B48103;
    --of-ink: #27251F;
    --of-line: rgba(255, 255, 255, .16);
    --of-text: #EDEAE4;

    padding: 42px 0 46px;
    background: var(--of-ink);
    color: var(--of-text);
}

.fx-oil-finder .fx-of-form {
    width: 85%;
    max-width: 1400px;
    margin: 0 auto;
}

.fx-oil-finder .fx-of-head { margin-bottom: 22px; }

.fx-oil-finder .fx-of-title {
    margin: 0 0 6px;
    font-family: "Open Sans", sans-serif;
    font-size: 27px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: .01em;
    color: #fff;
}

/* gold rule under the title, same device as the section headings elsewhere */
.fx-oil-finder .fx-of-title::after {
    content: "";
    display: block;
    width: 46px;
    height: 3px;
    margin-top: 12px;
    background: var(--of-gold);
}

.fx-oil-finder .fx-of-intro {
    margin: 14px 0 0;
    font-size: 14.5px;
    line-height: 1.5;
    color: rgba(237, 234, 228, .75);
}

/* five fields plus the buttons: one row on desktop, folding down from there */
.fx-oil-finder .fx-of-fields {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr)) auto;
    gap: 14px 16px;
    align-items: end;
}

.fx-oil-finder .fx-of-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.fx-oil-finder .fx-of-label {
    font-family: "Open Sans", sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: rgba(237, 234, 228, .82);
}

.fx-oil-finder .fx-of-select {
    width: 100%;
    max-width: 100%;
    height: 46px;
    padding: 0 34px 0 12px;
    border: 1px solid var(--of-line);
    border-radius: 4px;
    background-color: #fff;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='%2354595F' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    -webkit-appearance: none;
    appearance: none;
    font-size: 14px;
    color: var(--of-ink);
    text-overflow: ellipsis;
    cursor: pointer;
}

.fx-oil-finder .fx-of-select:focus {
    outline: none;
    border-color: var(--of-gold);
    box-shadow: 0 0 0 2px rgba(180, 129, 3, .35);
}

.fx-oil-finder .fx-of-actions {
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

.fx-oil-finder .fx-of-submit {
    height: 46px;
    padding: 0 30px;
    border: 0;
    border-radius: 4px;
    background: var(--of-gold);
    font-family: "Open Sans", sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .02em;
    color: #fff;
    cursor: pointer;
    transition: background .2s ease, transform .15s ease;
}

.fx-oil-finder .fx-of-submit:hover { background: #cc9310; }
.fx-oil-finder .fx-of-submit:active { transform: translateY(1px); }

.fx-oil-finder .fx-of-reset {
    height: 46px;
    padding: 0 6px;
    border: 0;
    background: none;
    font-size: 13.5px;
    color: rgba(237, 234, 228, .7);
    cursor: pointer;
}

.fx-oil-finder .fx-of-reset:hover {
    color: var(--of-text);
    text-decoration: underline;
}

@media (max-width: 1200px) {
    .fx-oil-finder .fx-of-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .fx-oil-finder .fx-of-actions { grid-column: 1 / -1; }
}

@media (max-width: 767px) {
    .fx-oil-finder { padding: 32px 0 34px; }
    .fx-oil-finder .fx-of-form { width: 90%; }
    .fx-oil-finder .fx-of-title { font-size: 22px; }
    .fx-oil-finder .fx-of-fields { grid-template-columns: 1fr; }
    .fx-oil-finder .fx-of-submit { flex: 1; }
}

/* locked steps: the field is visible so the user can see what is coming, but
   it reads as inert until the one before it is answered */
.fx-oil-finder .fx-of-field.is-locked .fx-of-label { color: rgba(237, 234, 228, .45); }

.fx-oil-finder .fx-of-select:disabled {
    background-color: rgba(255, 255, 255, .07);
    border-color: rgba(255, 255, 255, .10);
    background-image: none;
    color: rgba(237, 234, 228, .5);
    cursor: not-allowed;
}

.fx-oil-finder .fx-of-submit:disabled {
    background: rgba(180, 129, 3, .35);
    color: rgba(255, 255, 255, .6);
    cursor: not-allowed;
}

.fx-oil-finder .fx-of-submit:disabled:hover { background: rgba(180, 129, 3, .35); }

/* ==========================================================================
   Header variant B (.fx-hv2) – the second look for the client presentation
   Toggled with ?hv=2 / ?hv=1, cleared with ?hv=off. Everything here is scoped
   to the body class, so variant A is byte-for-byte untouched and both run off
   the same Elementor header (12721 / 13161).

   The brief: more premium, smaller icons, easier navigation, and a page title
   that is not a photograph.
   ========================================================================== */

.fx-hv2 {
    --v2-ink: #1C1A17;
    --v2-gold: #B48103;
    --v2-gold-lift: #D9A518;
    --v2-paper: #FCFBF9;
    --v2-line: rgba(39, 37, 31, .10);
    --v2-line-dark: rgba(255, 255, 255, .10);
}

/* --- tier 1: utility bar -------------------------------------------------
   Half a step quieter than variant A: smaller, wider letter spacing, and a
   gold hairline instead of a hard edge. */

.fx-hv2 .fx-topbar {
    --tb-gold: var(--v2-gold-lift);
    background-color: var(--v2-ink);
    border-bottom: 1px solid rgba(180, 129, 3, .28);
    font-size: 11.5px;
}

.fx-hv2 .fx-topbar,
.fx-hv2 .fx-topbar > .e-con-inner { padding-top: 3px; padding-bottom: 3px; }

.fx-hv2 .fx-topbar .elementor-icon-list-text {
    font-size: 11.5px;
    letter-spacing: .045em;
}

.fx-hv2 .fx-topbar .elementor-icon-list-icon i { font-size: 11px; }

/* --- tier 2: logo / search / actions -------------------------------------
   Warm paper rather than flat white, and a single hairline carrying the
   whole row instead of a shadow. */

.fx-hv2 .elementor-element-ca49ad3 {
    background: linear-gradient(180deg, #fff 0%, var(--v2-paper) 100%);
    border-bottom: 1px solid var(--v2-line);
}

/* variant A runs this row at 41px; keep B in the same ballpark so the extra
   polish does not cost the visitor a taller header */
.fx-hv2 .elementor-element-ca49ad3 > .e-con-inner {
    padding-top: 9px;
    padding-bottom: 9px;
}

.fx-hv2 .elementor-element-18c72ee img {
    max-height: 28px;
    width: auto;
}

/* search: a pill, narrower so it stops dominating the row */
.fx-hv2 .fx-header-search { max-width: 460px; }

.fx-hv2 .fx-header-search input[type="text"],
.fx-hv2 .fx-header-search input[type="search"],
.fx-hv2 .fx-header-search .aws-search-field {
    height: 36px;
    padding-left: 16px;
    border: 1px solid var(--v2-line);
    border-radius: 999px;
    background: #fff;
    box-shadow: inset 0 1px 2px rgba(39, 37, 31, .04);
    font-size: 13.5px;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.fx-hv2 .fx-header-search input[type="text"]:focus,
.fx-hv2 .fx-header-search input[type="search"]:focus,
.fx-hv2 .fx-header-search .aws-search-field:focus {
    outline: none;
    border-color: var(--v2-gold);
    box-shadow: 0 0 0 3px rgba(180, 129, 3, .14);
}

/* actions: small stacked icon buttons, icon above a quiet caps label, so the
   row reads as a set of controls rather than a list of links */
.fx-hv2 .fx-header-actions {
    align-items: center;
    column-gap: 2px;
}

.fx-hv2 .fx-header-actions .elementor-icon-list-item > a,
.fx-hv2 .fx-header-actions .elementor-icon-list-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
}

.fx-hv2 .fx-header-actions .elementor-icon-list-item > a {
    padding: 5px 10px;
    border-radius: 6px;
    transition: background .2s ease, color .2s ease;
}

.fx-hv2 .fx-header-actions .elementor-icon-list-item > a:hover {
    background: rgba(180, 129, 3, .09);
    color: var(--v2-gold);
}

.fx-hv2 .fx-header-actions .elementor-icon-list-icon { margin: 0; }
.fx-hv2 .fx-header-actions .elementor-icon-list-icon i { font-size: 14px; }

.fx-hv2 .fx-header-actions .elementor-icon-list-text {
    padding: 0;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    line-height: 1;
}

/* hairlines between the action groups */
.fx-hv2 .fx-header-actions > .elementor-widget + .elementor-widget {
    border-left: 1px solid var(--v2-line);
}

.fx-hv2 .fx-header-actions .elementor-menu-cart__toggle .elementor-button {
    padding: 5px 10px;
}

/* --- tier 3: category navigation ----------------------------------------
   Same carousel as variant A, but the tiles are rebuilt below: one big white
   disc per category that swaps for its name on hover. */

.fx-hv2 .elementor-element-ee4c02f {
    background: var(--v2-ink);
    border-top: 1px solid rgba(180, 129, 3, .28);
}

.fx-hv2 .elementor-element-ee4c02f > .e-con-inner {
    padding-top: 5px;
    padding-bottom: 5px;
}

/* The carousel stays exactly as Elementor built it – sliding, arrows, loop.
   What changes is the slide: the disc and the category name occupy the SAME
   cell and trade places on hover, so the name costs no vertical room at all.
   That is what pays for a 64px disc in a band shorter than variant A's.
   Grid rather than flex because two children in one cell is the whole trick. */

.fx-hv2 .elementor-element-19d0cad .swiper-slide > .e-con,
.fx-hv2 .elementor-element-19d0cad .swiper-slide > .e-con > .e-con-inner {
    height: 100%;
    padding: 0;
}

.fx-hv2 .elementor-element-19d0cad .swiper-slide .e-con-inner > .e-con {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    place-items: center;
    gap: 0;
    height: 100%;
    padding: 3px 2px;
    background: none;
    border: 0;
    border-radius: 10px;
    box-shadow: none;
    transition: background .2s ease;
}

/* both stacked into the single cell – neither one reserves its own space */
.fx-hv2 .elementor-element-19d0cad .swiper-slide .e-con-inner > .e-con > .elementor-widget-image,
.fx-hv2 .elementor-element-19d0cad .swiper-slide .e-con-inner > .e-con > .elementor-widget-heading {
    grid-area: 1 / 1;
}

/* --- category icons: white disc ------------------------------------------
   The artwork is solid near-black on transparent and the band is near-black,
   so in variant A the icons are effectively invisible – sampling one gives
   1752 opaque pixels, every one of them dark, with no filter applied. Setting
   them on a white disc is the first time they actually read. */
.fx-hv2 .elementor-element-19d0cad .swiper-slide .elementor-widget-image {
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 38px 38px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .3);
    transition: opacity .18s ease, transform .18s ease, box-shadow .2s ease;
}

.fx-hv2 .elementor-element-19d0cad .swiper-slide .elementor-widget-image img {
    width: 38px;
    height: 38px;
    margin: 0;
}

/* Three of the seventeen do not survive being shown at 19px: the automatic
   and manual gearbox icons are near-identical funnel compositions that cannot
   be told apart, and the handling-equipment one collapses into a blob. They
   are swapped here rather than in the media library so variant A keeps the
   originals and the comparison stays honest. Replace the PNGs for real if the
   client picks B. */
.fx-hv2 .elementor-element-19d0cad .elementor-widget-image:has(img[src*="YGRA-XEIROKINITON"]),
.fx-hv2 .elementor-element-19d0cad .elementor-widget-image:has(img[src*="ygra_automatwn_kivotion"]),
.fx-hv2 .elementor-element-19d0cad .elementor-widget-image:has(img[src*="/17.png"]) {
    background-size: 38px 38px;
}

.fx-hv2 .elementor-element-19d0cad .elementor-widget-image:has(img[src*="YGRA-XEIROKINITON"]) img,
.fx-hv2 .elementor-element-19d0cad .elementor-widget-image:has(img[src*="ygra_automatwn_kivotion"]) img,
.fx-hv2 .elementor-element-19d0cad .elementor-widget-image:has(img[src*="/17.png"]) img {
    visibility: hidden;
}

/* manual gearbox: the H-pattern shift diagram */
.fx-hv2 .elementor-element-19d0cad .elementor-widget-image:has(img[src*="YGRA-XEIROKINITON"]) {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2327251F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 6v12M12 6v12M19 6v12M5 12h14'/%3E%3Ccircle cx='5' cy='6' r='2.4' fill='%2327251F' stroke='none'/%3E%3C/svg%3E");
}

/* automatic gearbox: the straight selector gate, so the two read apart */
.fx-hv2 .elementor-element-19d0cad .elementor-widget-image:has(img[src*="ygra_automatwn_kivotion"]) {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2327251F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='3' width='8' height='18' rx='4'/%3E%3Ccircle cx='12' cy='7' r='2.3' fill='%2327251F' stroke='none'/%3E%3Ccircle cx='12' cy='13' r='1.1' fill='%2327251F' stroke='none'/%3E%3Ccircle cx='12' cy='17.5' r='1.1' fill='%2327251F' stroke='none'/%3E%3C/svg%3E");
}

/* handling equipment: a dispensing nozzle */
.fx-hv2 .elementor-element-19d0cad .elementor-widget-image:has(img[src*="/17.png"]) {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2327251F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 21V6a2 2 0 0 1 2-2h5a2 2 0 0 1 2 2v15'/%3E%3Cpath d='M3 21h11M4 10h9'/%3E%3Cpath d='M13 8h3.6a1.9 1.9 0 0 1 1.9 1.9V15a1.6 1.6 0 0 0 3.2 0V9.2L19.4 6'/%3E%3C/svg%3E");
}

/* --- hover: make the choice unmistakable --------------------------------- */
.fx-hv2 .elementor-element-19d0cad .swiper-slide .e-con-inner > .e-con { position: relative; }

.fx-hv2 .elementor-element-19d0cad .swiper-slide .e-con-inner > .e-con::after {
    content: "";
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 1px;
    height: 2px;
    background: var(--v2-gold);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .25s ease;
}

.fx-hv2 .elementor-element-19d0cad .swiper-slide .e-con-inner > .e-con:hover::after {
    transform: scaleX(1);
}

.fx-hv2 .elementor-element-19d0cad .swiper-slide .e-con-inner > .e-con:hover {
    transform: none;
    background: rgba(255, 255, 255, .10);
    box-shadow: none;
}

/* On hover the disc gets out of the way entirely and the name takes its cell.
   It shrinks slightly as it goes so the swap reads as one movement rather
   than a blink. */
.fx-hv2 .elementor-element-19d0cad .swiper-slide .e-con-inner > .e-con:hover .elementor-widget-image {
    opacity: 0;
    transform: scale(.82);
    pointer-events: none;
}

/* The name sits in the same cell as the disc, so it costs zero height at rest
   and revealing it cannot nudge the row. pointer-events stay off at rest so
   an invisible label can never intercept the pointer; they come back on hover
   only so the link underneath stays clickable across the whole tile. */
.fx-hv2 .elementor-element-19d0cad .swiper-slide .elementor-widget-heading {
    margin: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(.94);
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
}

.fx-hv2 .elementor-element-19d0cad .swiper-slide .e-con-inner > .e-con:hover .elementor-widget-heading {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

.fx-hv2 .elementor-element-19d0cad .swiper-slide .elementor-widget-heading > .elementor-widget-container {
    margin: 0 !important;
    width: 100%;
}

/* Sized for the 12-per-view tile: 95px of usable width, so the label wraps to
   three lines on the longest names and still clears the 64px cell at 35px.
   Letter-spacing goes to zero and overflow-wrap is loosened because single
   Greek compounds ("Συναρμολογιτικά") are wider than the tile on their own and
   would otherwise be clipped rather than wrapped. */
.fx-hv2 .elementor-element-19d0cad .swiper-slide .elementor-widget-heading .elementor-heading-title,
.fx-hv2 .elementor-element-19d0cad .swiper-slide .elementor-widget-heading .elementor-heading-title a {
    font-size: 10px;
    font-weight: 700;
    line-height: 1.22;
    letter-spacing: 0;
    text-transform: uppercase;
    text-align: center;
    color: #fff;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
    overflow-wrap: anywhere;
    hyphens: auto;
}

.fx-hv2 .elementor-element-19d0cad .swiper-slide .e-con-inner > .e-con:hover .elementor-heading-title,
.fx-hv2 .elementor-element-19d0cad .swiper-slide .e-con-inner > .e-con:hover .elementor-heading-title a {
    color: var(--v2-gold-lift);
}

/* --- page title ----------------------------------------------------------
   Variant A drops a stock photo behind the H1. Here the photo goes and the
   band is built from light instead: ink base, a low gold glow off the top
   right, and hairline diagonals for texture. A gold rule above the title and
   one under the band close it off. */

.fx-hv2 .elementor-6418 .elementor-element-2be617,
.fx-hv2 .elementor-5965 > .e-con {
    background-image:
        repeating-linear-gradient(
            115deg,
            rgba(255, 255, 255, .022) 0 1px,
            rgba(255, 255, 255, 0) 1px 7px
        ),
        radial-gradient(
            120% 150% at 88% -30%,
            rgba(180, 129, 3, .30) 0%,
            rgba(180, 129, 3, .07) 42%,
            rgba(28, 26, 23, 0) 72%
        ),
        linear-gradient(180deg, #241F1A 0%, var(--v2-ink) 100%) !important;
    background-color: var(--v2-ink) !important;
    background-position: center !important;
    background-size: auto, auto, auto !important;
    border-bottom: 1px solid rgba(180, 129, 3, .35);

    /* Elementor writes these custom properties from the widget settings in a
       stylesheet that loads after this one, so they need the flag to stick. */
    --min-height: 190px !important;
    --justify-content: center !important;
    --align-items: flex-start !important;
    --padding-left: 0px !important;
    --padding-right: 0px !important;
}

/* pull the title into the same 85% column the rest of the page uses */
.fx-hv2 .elementor-6418 .elementor-element-82e2d0a,
.fx-hv2 .elementor-5965 > .e-con > .e-con {
    width: 85%;
    max-width: 1400px;
    margin: 0 auto;
    align-items: flex-start;
}

.fx-hv2 .elementor-6418 .elementor-widget-heading,
.fx-hv2 .elementor-5965 .elementor-widget-heading { position: relative; }

.fx-hv2 .elementor-6418 .elementor-widget-heading::before,
.fx-hv2 .elementor-5965 .elementor-widget-heading::before {
    content: "";
    display: block;
    width: 38px;
    height: 2px;
    margin-bottom: 16px;
    background: var(--v2-gold);
}

.fx-hv2 .elementor-6418 h1.elementor-heading-title,
.fx-hv2 .elementor-5965 h1.elementor-heading-title {
    font-family: "Open Sans", sans-serif;
    font-size: 38px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.01em;
    text-align: left;
    color: #fff;
}

@media (max-width: 767px) {
    .fx-hv2 .elementor-6418 .elementor-element-2be617,
    .fx-hv2 .elementor-5965 > .e-con { --min-height: 140px !important; }

    .fx-hv2 .elementor-6418 .elementor-element-82e2d0a,
    .fx-hv2 .elementor-5965 > .e-con > .e-con { width: 90%; }

    .fx-hv2 .elementor-6418 h1.elementor-heading-title,
    .fx-hv2 .elementor-5965 h1.elementor-heading-title { font-size: 26px; }

    .fx-hv2 .fx-header-actions .elementor-icon-list-text { display: none; }
}

/* --- the A/B switcher ----------------------------------------------------
   Only rendered while a variant is active (see fluxotic_header_variant()), so
   it never reaches a normal visitor. */

.fx-hv-switch {
    position: fixed;
    z-index: 99999;
    left: 18px;
    bottom: 18px;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 8px 6px 12px;
    border-radius: 999px;
    background: rgba(28, 26, 23, .94);
    box-shadow: 0 6px 22px rgba(0, 0, 0, .3);
    font-family: "Open Sans", sans-serif;
    backdrop-filter: blur(6px);
}

.fx-hv-switch__label {
    margin-right: 4px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(237, 234, 228, .6);
}

.fx-hv-switch__opt,
.fx-hv-switch__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 700;
    color: rgba(237, 234, 228, .8);
    text-decoration: none;
    transition: background .2s ease, color .2s ease;
}

.fx-hv-switch__opt:hover,
.fx-hv-switch__close:hover { background: rgba(255, 255, 255, .12); color: #fff; }

.fx-hv-switch__opt.is-on {
    background: #B48103;
    color: #fff;
}

.fx-hv-switch__close {
    margin-left: 4px;
    font-size: 15px;
    color: rgba(237, 234, 228, .45);
}


/* ==========================================================================
   Shop archive – the band the catalogue sits on

   Filter bar and product cards are both white. On a white page they float with
   nothing holding them; a light warm wash behind the whole section turns them
   into cards laid on a surface, which is what makes the grid read as a
   catalogue rather than a list. Kept very close to white – it should register
   as a change of surface, not as a colour.

   The container is boxed, so the tint paints full width on the outer .e-con
   while the content stays in its 85% column.
   ========================================================================== */

.elementor-location-archive.elementor-4389 .elementor-element.elementor-element-50fb62e {
    background-color: #F5F4F1;
    border-top: 1px solid rgba(39, 37, 31, .07);
    --padding-top: 42px;
    --padding-bottom: 56px;
}

@media (max-width: 767px) {
    .elementor-location-archive.elementor-4389 .elementor-element.elementor-element-50fb62e {
        --padding-top: 28px;
        --padding-bottom: 36px;
    }
}

/* The filter bar and the product column are siblings in the same 85% column,
   but the product column carried a 5% left / 1% right inset – a leftover from
   the vertical sidebar this bar replaced. That inset is what made the two
   blocks start and end on different lines, and it is already zeroed on mobile.
   Dropping it on desktop too lines the bar up with the grid edge for edge, and
   hands the 6% back to the products. */
.elementor.elementor-location-archive.elementor-4389 .elementor-element.elementor-element-d9a8568 {
    --padding-top: 0px;
    --padding-bottom: 0px;
    --padding-left: 0px;
    --padding-right: 0px;
}


/* ==========================================================================
   Shop archive – the product card (Elementor loop template 6022)

   The card was a 1px grey rectangle with the price above the title, a full
   bleed grey "add to cart" slab at the bottom and everything centred. What is
   changed here is the hierarchy, not the content: image, title, description,
   price, action – left aligned, on one raised card with the same ink/gold
   language the header and the oil finder use.

   Elementor writes its own settings as `.elementor-6022 .elementor-element.…`
   (0,3,0) from a stylesheet that loads after this file, so every rule below
   carries the `.ecs-post-loop` scope to outrank it on specificity rather than
   on load order. That scope also keeps this to the ECS loop – the single
   product page is untouched.

   Container padding is set through Elementor's own `--padding-*` custom
   properties, which is what its `padding:var(--padding-top)…` shorthand reads.
   ========================================================================== */

.elementor-posts-container .ecs-post-loop,
.ecs-post-loop {
    --pl-ink: #27251F;
    --pl-gold: #B48103;
    --pl-gold-lift: #D9A518;
    --pl-paper: #FAF9F7;
    --pl-line: rgba(39, 37, 31, .11);
    --pl-muted: #7A756D;

    display: flex;                 /* the article is the grid cell – let the
                                      card stretch to the tallest in the row */
}

.elementor-posts-container .ecs-post-loop > .elementor-6022 { display: flex; width: 100%; }

/* --- the card ------------------------------------------------------------ */

.ecs-post-loop .elementor-6022 .elementor-element.elementor-element-b2480fa {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-color: var(--pl-line);
    --border-color: var(--pl-line);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(39, 37, 31, .05);
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.ecs-post-loop .elementor-6022 .elementor-element.elementor-element-b2480fa:hover {
    transform: translateY(-4px);
    border-color: rgba(180, 129, 3, .40);
    --border-color: rgba(180, 129, 3, .40);
    box-shadow: 0 16px 34px -12px rgba(39, 37, 31, .28);
}

/* a gold rule that wipes across the top edge on hover – the same device as the
   activities cards on the home page */
.ecs-post-loop .elementor-6022 .elementor-element.elementor-element-b2480fa::after {
    content: "";
    position: absolute;
    z-index: 3;
    top: 0;
    right: 0;
    left: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--pl-gold), var(--pl-gold-lift));
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .35s ease;
    pointer-events: none;
}

.ecs-post-loop .elementor-6022 .elementor-element.elementor-element-b2480fa:hover::after {
    transform: scaleX(1);
}

/* the body of the card fills the leftover height so the price and the button
   land on the same line across every card in the row */
.ecs-post-loop .elementor-6022 .elementor-element.elementor-element-515193a {
    flex: 1 1 auto;
    --padding-top: 0px;
    --padding-right: 0px;
    --padding-bottom: 0px;
    --padding-left: 0px;
}

/* --- image tile ---------------------------------------------------------- */

/* A fixed band rather than a square: at three columns the card is ~430px wide,
   so a 1:1 tile pushed the price and the button below the fold. `contain` keeps
   every bottle whole – the shots are mixed portrait/landscape – and the fixed
   height keeps the cards lined up.

   No tint and no dividing hairline: the product shots are already cut out on
   white, so anything behind them only shows up as a visible edge around the
   photo. The card's own border is what holds the composition.

   The clipping for the hover zoom lives on the image widget, not here, so the
   wishlist disc that floats over this tile cannot be cut by it. */
.ecs-post-loop .elementor-6022 .elementor-element.elementor-element-0a80bd4 {
    order: 1;
    position: relative;
    --min-height: 0px;
    height: 212px;
    flex: 0 0 auto;
    justify-content: center;
    overflow: visible;
    background: none;
    border-bottom: 0;
}

.ecs-post-loop .elementor-6022 .elementor-element.elementor-element-e60c2ff,
.ecs-post-loop .elementor-6022 .elementor-element.elementor-element-e60c2ff > .elementor-widget-container,
.ecs-post-loop .elementor-6022 .elementor-element.elementor-element-e60c2ff a {
    display: block;
    width: 100%;
    height: 100%;
}

.ecs-post-loop .elementor-6022 .elementor-element.elementor-element-e60c2ff > .elementor-widget-container {
    padding: 16px 22px;
    overflow: hidden;              /* clips the hover zoom, and nothing else */
}

.ecs-post-loop .elementor-6022 .elementor-element.elementor-element-e60c2ff img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform .5s ease;
}

.ecs-post-loop .elementor-6022 .elementor-element.elementor-element-b2480fa:hover .elementor-element-e60c2ff img {
    transform: scale(1.06);
}

/* --- wishlist ------------------------------------------------------------
   YITH renders a full width button with its label; on a card only the heart
   is wanted, as a small disc floating over the image. */

.ecs-post-loop .elementor-6022 .elementor-element.elementor-element-474aea0 {
    z-index: 4;                    /* over the product shot, which is opaque */
    top: 10px;
    width: auto;
    line-height: 0;                /* no inline leading under the disc */
}

body:not(.rtl) .ecs-post-loop .elementor-6022 .elementor-element.elementor-element-474aea0 { right: 10px; }
body.rtl .ecs-post-loop .elementor-6022 .elementor-element.elementor-element-474aea0 { left: 10px; }

/* YITH and Astra both put a margin, a min-height and a button border on this
   link; every one of them showed up as a clipped edge on the disc. */
.ecs-post-loop .elementor-element-474aea0 > .elementor-widget-container,
.ecs-post-loop .elementor-element-474aea0 .yith-wcwl-add-to-wishlist,
.ecs-post-loop .elementor-element-474aea0 .yith-wcwl-add-button {
    margin: 0;
    padding: 0;
    overflow: visible;
    line-height: 0;
}

.ecs-post-loop .elementor-element-474aea0 .yith-wcwl-add-to-wishlist a {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 36px;
    height: 36px;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 1px solid var(--pl-line);
    border-radius: 50%;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 1px 4px rgba(39, 37, 31, .12);
    color: var(--pl-ink);
    font-size: 0;                  /* kills the label's whitespace, not the svg */
    line-height: 1;
    text-decoration: none;
    transition: background .2s ease, border-color .2s ease, color .2s ease;
}

.ecs-post-loop .elementor-element-474aea0 .yith-wcwl-add-to-wishlist a:hover {
    background: var(--pl-gold);
    border-color: var(--pl-gold);
    color: #fff;
}

.ecs-post-loop .elementor-element-474aea0 .yith-wcwl-add-to-wishlist a > span,
.ecs-post-loop .elementor-element-474aea0 .yith-wcwl-add-to-wishlist .yith-wcwl-icon-svg + span { display: none; }

.ecs-post-loop .elementor-element-474aea0 .yith-wcwl-add-to-wishlist svg {
    width: 18px;
    height: 18px;
    margin: 0;
}

/* --- title --------------------------------------------------------------- */

.ecs-post-loop .elementor-6022 .elementor-element.elementor-element-7a73794 {
    order: 2;
    text-align: left;
}

.ecs-post-loop .elementor-6022 .elementor-element.elementor-element-7a73794 > .elementor-widget-container {
    padding: 18px 20px 0;
}

/* two lines held open, so titles of one and two lines still leave the
   descriptions underneath on the same baseline */
.ecs-post-loop .elementor-6022 .elementor-element.elementor-element-7a73794 .elementor-heading-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.7em;
    font-size: 16.5px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -.005em;
    color: var(--pl-ink);
}

.ecs-post-loop .elementor-6022 .elementor-element.elementor-element-7a73794 .elementor-heading-title a {
    color: inherit;
    transition: color .2s ease;
}

.ecs-post-loop .elementor-6022 .elementor-element.elementor-element-b2480fa:hover .elementor-element-7a73794 .elementor-heading-title a {
    color: var(--pl-gold);
}

/* --- description --------------------------------------------------------- */

/* Dropped from the card. The excerpts on this catalogue run 200+ characters of
   application detail, which is what the product page is for – on a grid of
   1.300 products it was height, not information. The widget stays in the loop
   template so nothing has to be rebuilt in Elementor if it is wanted back. */
.ecs-post-loop .elementor-6022 .elementor-element.elementor-element-af99964,
.ecs-post-loop .elementor-6022 .elementor-element.elementor-element-4c823cd {
    display: none;
}

/* --- price --------------------------------------------------------------- */

.ecs-post-loop .elementor-6022 .elementor-element.elementor-element-0281beb {
    order: 4;
    margin-top: auto;
    text-align: left;
}

.ecs-post-loop .elementor-6022 .elementor-element.elementor-element-0281beb > .elementor-widget-container {
    padding: 16px 20px 0;
}

.woocommerce .ecs-post-loop .elementor-6022 .elementor-element.elementor-element-0281beb .price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    font-size: 20px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.01em;
}

/* the struck-through original reads as a footnote next to the live price */
.woocommerce .ecs-post-loop .elementor-6022 .elementor-element.elementor-element-0281beb .price del {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--pl-muted);
    opacity: 1;
}

.woocommerce .ecs-post-loop .elementor-6022 .elementor-element.elementor-element-0281beb .price ins {
    text-decoration: none;
    font-size: 20px;
}

/* --- add to cart ---------------------------------------------------------
   The grey slab across the bottom becomes an outlined button inside the card's
   padding, filling with gold on hover – the same promotion the category cards
   and the oil finder submit use. */

.ecs-post-loop .elementor-6022 .elementor-element.elementor-element-eed452b > .elementor-widget-container {
    padding: 16px 20px 20px;
}

.ecs-post-loop .elementor-6022 .elementor-element.elementor-element-eed452b .uael-button,
.ecs-post-loop .elementor-6022 .elementor-element.elementor-element-eed452b .uael-add-to-cart button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 13px 16px;
    border: 1px solid var(--pl-ink);
    border-radius: 9px;
    background-color: transparent;
    font-family: "Open Sans", sans-serif;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .07em;
    line-height: 1.2;
    text-transform: uppercase;
    color: var(--pl-ink);
    transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}

.ecs-post-loop .elementor-6022 .elementor-element.elementor-element-eed452b .uael-button:hover,
.ecs-post-loop .elementor-6022 .elementor-element.elementor-element-eed452b .uael-button:focus,
.ecs-post-loop .elementor-6022 .elementor-element.elementor-element-eed452b .uael-add-to-cart button:hover {
    background-color: var(--pl-gold);
    border-color: var(--pl-gold);
    color: #fff;
}

/* once the card itself is hovered the action is already the obvious next step,
   so it fills in without needing to be pointed at directly */
.ecs-post-loop .elementor-6022 .elementor-element.elementor-element-b2480fa:hover .elementor-element-eed452b .uael-button {
    border-color: var(--pl-gold);
    color: var(--pl-gold);
}

.ecs-post-loop .elementor-6022 .elementor-element.elementor-element-b2480fa:hover .elementor-element-eed452b .uael-button:hover {
    color: #fff;
}

@media (max-width: 767px) {
    .ecs-post-loop .elementor-6022 .elementor-element.elementor-element-7a73794 .elementor-heading-title { font-size: 15px; }
    .ecs-post-loop .elementor-6022 .elementor-element.elementor-element-e60c2ff > .elementor-widget-container { padding: 16px 18px; }
}


/* ==========================================================================
   Shop archive – pagination
   Numbered pills on a hairline instead of bare numerals, with the current page
   carried in ink so the position in 1.300 products is readable at a glance.
   ========================================================================== */

.elementor-location-archive .elementor-pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 42px;
}

/* Elementor spaces the numerals with its own 5px side margins, which stacked on
   top of the flex gap above. Its rule is 8 classes deep, so match the widget
   scope rather than try to win on load order. */
body:not(.rtl) .elementor.elementor-location-archive.elementor-4389 .elementor-element.elementor-element-c88bc78 .elementor-pagination .page-numbers,
body.rtl .elementor-location-archive.elementor-4389 .elementor-element.elementor-element-c88bc78 .elementor-pagination .page-numbers {
    margin: 0;
}

.elementor-location-archive .elementor-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border: 1px solid rgba(39, 37, 31, .11);
    border-radius: 9px;
    background: #fff;
    font-size: 14px;
    font-weight: 600;
    color: #27251F;
    text-decoration: none;
    transition: border-color .2s ease, background .2s ease, color .2s ease;
}

.elementor-location-archive .elementor-pagination a.page-numbers:hover {
    border-color: #B48103;
    background: rgba(180, 129, 3, .10);
    color: #B48103;
}

.elementor-location-archive .elementor-pagination .page-numbers.current {
    border-color: #27251F;
    background: #27251F;
    color: #fff;
}

.elementor-location-archive .elementor-pagination .page-numbers.dots {
    border-color: transparent;
    background: none;
    color: #7A756D;
}


/* ==========================================================================
   Footer – Elementor templates 6150 (el) / 7502 (en)

   The template holds the content as ordinary Elementor widgets so it stays
   editable in the builder. Everything here is the polish the builder has no
   control for: the gradient edges, the underline wipe, the badge pills and the
   grid that the flex container cannot express.
   ========================================================================== */

.fx-footer {
    --fxf-gold: #B48103;
    --fxf-gold-lift: #D9A518;
    --fxf-line: rgba(255, 255, 255, .09);

    position: relative;
    overflow: hidden;
}

/* gold hairline along the top edge – the same seam the header bands use, and
   what replaces the old 3px solid blue border */
.fx-footer::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: linear-gradient(90deg,
        rgba(180, 129, 3, 0),
        var(--fxf-gold) 18%,
        var(--fxf-gold-lift) 50%,
        var(--fxf-gold) 82%,
        rgba(180, 129, 3, 0));
}

/* One soft glow behind the brand column. A flat dark panel reads cheap; this is
   the cheapest possible depth cue and costs no image request – the old
   footer-bg.jpg was a 1920px photo doing less. */
.fx-footer::after {
    content: "";
    position: absolute;
    z-index: 0;
    left: -12%;
    top: -45%;
    width: 680px;
    height: 680px;
    background: radial-gradient(circle, rgba(180, 129, 3, .17), rgba(180, 129, 3, 0) 68%);
    pointer-events: none;
}

/* both the boxed inner wrapper and any direct child have to clear the glow */
.fx-footer > .e-con-inner,
.fx-footer > .e-con {
    position: relative;
    z-index: 1;
}

/* --- columns ------------------------------------------------------------ */

/* Grid rather than the container's flex: the brand column needs to be wider
   than the link columns and to span the full row once it wraps, which flex
   basis alone cannot do without hard widths on every column. */
.fx-footer__main {
    display: grid !important;
    grid-template-columns: 1.7fr 1fr 1fr 1.25fr;
    gap: 48px 40px !important;
    align-items: start;
}

.fx-footer__main > .e-con {
    width: auto !important;
    max-width: none !important;
}

.fx-footer__logo img {
    filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .45));
}

.fx-footer__about p:last-child {
    margin-bottom: 0;
}

/* --- column headings ---------------------------------------------------- */

.fx-footer__title {
    position: relative;
    padding-bottom: 14px;
}

.fx-footer__title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 26px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--fxf-gold-lift), var(--fxf-gold));
}

/* --- link lists --------------------------------------------------------- */

.fx-footer__links .elementor-icon-list-item > a,
.fx-footer__links .elementor-icon-list-item > span {
    align-items: flex-start;
}

/* icons sit on the cap height of the first line, not centred on a block of
   wrapped text – the address runs to two lines on most widths */
.fx-footer__links .elementor-icon-list-icon {
    padding-top: 4px;
}

/* A rule that wipes in under the label on hover. Drawn as a background so it
   follows the text across wrapped lines instead of underlining the whole box. */
.fx-footer__links .elementor-icon-list-text {
    background-image: linear-gradient(var(--fxf-gold), var(--fxf-gold));
    background-size: 0 1px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    padding-bottom: 2px;
    transition: background-size .3s ease, color .2s ease;
}

.fx-footer__links a:hover .elementor-icon-list-text {
    background-size: 100% 1px;
}

/* the three stacked lists in the account column have to read as one list */
.fx-footer__col > .elementor-widget-icon-list {
    margin: 0;
}

/* --- social ------------------------------------------------------------- */

.fx-footer__social .elementor-icon-list-items {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.fx-footer__social .elementor-icon-list-item {
    margin: 0 !important;
}

/* A glass disc: the ring is an inset shadow rather than a border so it can go
   gold on hover without the 1px shifting the glyph. */
.fx-footer__social .elementor-icon-list-item a {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(150deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .02));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15);
    transition: transform .25s cubic-bezier(.2, .7, .3, 1), box-shadow .25s ease;
}

/* The gold fill is its own layer so it fades in under the glyph. Swapping the
   button's background instead would step through a flat colour mid-transition,
   which is what made the old square version look cheap. */
.fx-footer__social .elementor-icon-list-item a::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: linear-gradient(145deg, var(--fxf-gold-lift), var(--fxf-gold));
    opacity: 0;
    transition: opacity .25s ease;
}

.fx-footer__social .elementor-icon-list-icon {
    position: relative;
    z-index: 1;
    margin: 0;
    padding: 0;
}

.fx-footer__social .elementor-icon-list-item a:hover {
    transform: translateY(-4px);
    box-shadow: inset 0 0 0 1px rgba(217, 165, 24, .55), 0 12px 26px rgba(180, 129, 3, .34);
}

.fx-footer__social .elementor-icon-list-item a:hover::before {
    opacity: 1;
}

/* dark glyph on the gold fill, otherwise the white icon disappears */
.fx-footer__social .elementor-icon-list-item a:hover .elementor-icon-list-icon i,
.fx-footer__social .elementor-icon-list-item a:hover .elementor-icon-list-icon svg {
    color: #1A1814;
    fill: #1A1814;
}

/* --- trust band ---------------------------------------------------------- */

.fx-footer__trust {
    margin-top: 56px !important;
    padding: 0 !important;
}

.fx-footer__trust > .elementor-widget {
    width: 100%;
}

/* One strip split by a hairline, not two chips floating at opposite ends of the
   row. Each claim centres itself in its own half, so the band stays balanced
   however long the labels get in either language. */
.fx-footer__badges .elementor-icon-list-items {
    display: flex;
    width: 100%;
    border: 1px solid var(--fxf-line);
    border-radius: 14px;
    background: rgba(255, 255, 255, .025);
    overflow: hidden;
}

/* the widget's own spacing control writes side margins that would break the
   seam between the halves */
.fx-footer__badges .elementor-icon-list-item {
    flex: 1 1 0;
    margin: 0 !important;
}

.fx-footer__badges .elementor-icon-list-item + .elementor-icon-list-item {
    border-left: 1px solid var(--fxf-line);
}

.fx-footer__badges .elementor-icon-list-item > a,
.fx-footer__badges .elementor-icon-list-item > span {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 18px 16px;
    transition: background .22s ease;
}

.fx-footer__badges .elementor-icon-list-icon {
    margin: 0;
    padding: 0;
}

.fx-footer__badges .elementor-icon-list-item > a:hover {
    background: rgba(180, 129, 3, .1);
}

/* --- bottom bar --------------------------------------------------------- */

.fx-footer__bottom {
    margin-top: 24px !important;
    justify-content: space-between;
    flex-wrap: wrap;
}

.fx-footer__bottom > .e-con {
    width: auto !important;
    flex: 1 1 auto !important;
}

.fx-footer__legal {
    align-items: flex-end;
}

/* --- responsive --------------------------------------------------------- */

@media (max-width: 1024px) {

    .fx-footer__main {
        grid-template-columns: repeat(3, 1fr);
        gap: 40px 32px !important;
    }

    /* the brand block keeps its own row rather than being squeezed to a third */
    .fx-footer__brand {
        grid-column: 1 / -1;
    }

    .fx-footer__about {
        max-width: 60ch;
    }
}

@media (max-width: 767px) {

    .fx-footer__main {
        grid-template-columns: 1fr 1fr;
    }

    /* the halves stack, so the seam between them moves to the top edge */
    .fx-footer__badges .elementor-icon-list-items {
        flex-direction: column;
    }

    .fx-footer__badges .elementor-icon-list-item + .elementor-icon-list-item {
        border-left: 0;
        border-top: 1px solid var(--fxf-line);
    }

    .fx-footer__badges .elementor-icon-list-item > a,
    .fx-footer__badges .elementor-icon-list-item > span {
        padding: 15px 16px;
    }

    .fx-footer__bottom {
        justify-content: center;
        text-align: center;
    }

    .fx-footer__legal,
    .fx-footer__bottom > .e-con {
        align-items: center;
    }

    .fx-footer__copy .elementor-heading-title {
        justify-content: center;
    }
}

@media (max-width: 480px) {

    .fx-footer__main {
        grid-template-columns: 1fr;
        gap: 34px !important;
    }
}