/*
 * Forest Fairies
 * Global Foundation CSS
 *
 * Stack:
 * WordPress
 * WooCommerce
 * Oxygen Builder 6
 *
 * Adobe XD is the visual reference, not a literal
 * technical specification.
 *
 * Oxygen variables are the source of truth for
 * reusable design tokens.
 */

/* =========================================================
   LAYOUT TOKENS — DESKTOP FOUNDATION
   ========================================================= */

:root {
    /* Main page content (body + footer inner grid) */
    --ff-content-width: 1280px;

    /* Global chrome */
    --ff-header-width: 100%;
    --ff-footer-width: 100%;

    /* Shared desktop edge inset; collapses to the existing minimum gutter on small screens */
    --ff-header-inset: clamp(var(--ff-gutter-min), 3.75vw, 48px);
    --ff-footer-inset: var(--ff-header-inset);
}

/* =========================================================
   TYPOGRAPHY
   ========================================================= */
/* H1 */
.ff-h1,
.ff-heading-hero {
    margin: 0;
    font-family: var(--ff-font-primary);
    font-size: clamp(
        var(--ff-font-size-h1-min),
        calc(1.25rem + 1.5625vw),
        var(--ff-font-size-h1-max)
    );
    font-weight: var(--ff-weight-semibold);
    line-height: 1.2;
    letter-spacing: 0.01em;
    color: var(--ff-colour-dark);
}
/* H2 */
.ff-h2,
.ff-heading-section {
    margin: 0;
    font-family: var(--ff-font-primary);
    font-size: clamp(
        var(--ff-font-size-h2-min),
        calc(1.375rem + 0.78125vw),
        var(--ff-font-size-h2-max)
    );
    font-weight: var(--ff-weight-semibold);
    line-height: 1.25;
    letter-spacing: 0.01em;
    color: var(--ff-colour-dark);
}
/* H3 */
.ff-h3 {
    margin: 0;
    font-family: var(--ff-font-primary);
    font-size: clamp(
        var(--ff-font-size-h3-min),
        calc(1.25rem + 0.625vw),
        var(--ff-font-size-h3-max)
    );
    font-weight: var(--ff-weight-semibold);
    line-height: 1.3;
    letter-spacing: 0.01em;
    color: var(--ff-colour-dark);
}
/* H4 */
.ff-h4 {
    margin: 0;
    font-family: var(--ff-font-primary);
    font-size: clamp(
        var(--ff-font-size-h4-min),
        calc(1.125rem + 0.46875vw),
        var(--ff-font-size-h4-max)
    );
    font-weight: var(--ff-weight-semibold);
    line-height: 1.3;
    letter-spacing: 0.01em;
    color: var(--ff-colour-dark);
}
/* Standard body */
.ff-body,
.ff-text-body {
    margin: 0;
    font-family: var(--ff-font-primary);
    font-size: var(--ff-font-size-body);
    font-weight: var(--ff-weight-regular);
    line-height: 1.6;
    letter-spacing: 0;
    color: var(--ff-colour-dark);
}
/* Light body / testimonial */
.ff-body-light,
.ff-text-light {
    margin: 0;
    font-family: var(--ff-font-primary);
    font-size: var(--ff-font-size-body);
    font-weight: var(--ff-weight-light);
    line-height: 1.6;
    letter-spacing: 0;
    color: var(--ff-colour-dark);
}
/* Medium label */
.ff-label,
.ff-label-medium {
    margin: 0;
    font-family: var(--ff-font-primary);
    font-size: var(--ff-font-size-body);
    font-weight: var(--ff-weight-medium);
    line-height: 1.35;
    letter-spacing: 0;
    color: var(--ff-colour-dark);
}
/* Bold label */
.ff-label-bold {
    margin: 0;
    font-family: var(--ff-font-primary);
    font-size: var(--ff-font-size-body);
    font-weight: var(--ff-weight-bold);
    line-height: 1.35;
    letter-spacing: 0.005em;
    color: var(--ff-colour-dark);
}
/* Small / metadata text */
.ff-small {
    margin: 0;
    font-family: var(--ff-font-primary);
    font-size: var(--ff-font-size-small);
    font-weight: var(--ff-weight-regular);
    line-height: 1.55;
    letter-spacing: 0;
    color: var(--ff-colour-dark);
}
/* =========================================================
   BUTTONS
   ========================================================= */
/*
 * Primary button
 *
 * XD:
 * Roboto SemiBold
 * 15px
 * #252523
 * white text
 */
.ff-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: var(--ff-button-min-height);
    padding:
        var(--ff-button-padding-y)
        var(--ff-button-padding-x);
    border: 0;
    border-radius: var(--ff-radius-sm);
    background-color: var(--ff-colour-button-dark, #252523);
    color: var(--ff-colour-white);
    font-family: var(--ff-font-secondary);
    font-size: var(--ff-font-size-button);
    font-weight: var(--ff-weight-semibold);
    line-height: var(--ff-line-height-button);
    letter-spacing: var(--ff-letter-spacing-button);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}
/* =========================================================
   PRODUCT TYPOGRAPHY
   ========================================================= */
.ff-product-title {
    margin: 0;
    font-family: var(--ff-font-primary);
    font-size: var(--ff-font-size-body);
    font-weight: var(--ff-weight-regular);
    line-height: var(--ff-line-height-body);
    letter-spacing: var(--ff-letter-spacing-base);
    color: var(--ff-colour-dark);
}
.ff-product-price {
    margin: 0;
    font-family: var(--ff-font-primary);
    font-size: var(--ff-font-size-body);
    font-weight: var(--ff-weight-regular);
    line-height: var(--ff-line-height-body);
    letter-spacing: var(--ff-letter-spacing-base);
    color: var(--ff-colour-dark);
}
/* =========================================================
   FOOTER TYPOGRAPHY
   ========================================================= */
.ff-footer-heading {
    margin: 0;
    font-family: var(--ff-font-primary);
    font-size: var(--ff-font-size-body);
    font-weight: var(--ff-weight-bold);
    line-height: var(--ff-line-height-label);
    letter-spacing: var(--ff-letter-spacing-label);
    color: var(--ff-colour-warm-white);
}
.ff-footer-text {
    margin: 0;
    font-family: var(--ff-font-primary);
    font-size: var(--ff-font-size-button);
    font-weight: var(--ff-weight-regular);
    line-height: var(--ff-line-height-button);
    letter-spacing: var(--ff-letter-spacing-base);
    color: var(--ff-colour-warm-white);
}
/* =========================================================
   FOOTER LAYOUT
   ========================================================= */

.ff-site-footer {
    width: var(--ff-footer-width);
    max-width: none;
}

.ff-site-footer *,
.ff-site-footer *::before,
.ff-site-footer *::after {
    box-sizing: border-box;
}

.ff-footer-inner {
    width: 100%;
    max-width: calc(var(--ff-content-width) + 2 * var(--ff-footer-inset));
    margin-inline: auto;
    padding-inline: var(--ff-footer-inset);
}

/* =========================================================
   FORMS
   ========================================================= */
.ff-input-text {
    font-family: var(--ff-font-primary);
    font-size: var(--ff-font-size-button);
    font-weight: var(--ff-weight-regular);
    line-height: var(--ff-line-height-body);
    letter-spacing: var(--ff-letter-spacing-base);
    color: var(--ff-colour-dark);
}
/* =========================================================
   LAYOUT — SECTIONS
   ========================================================= */
/*
 * Base full-width section.
 *
 * No automatic vertical padding.
 * Add a section-spacing modifier where required.
 */
.ff-section {
    width: 100%;
}
/*
 * Compact section
 * 32px → 48px
 */
.ff-section-compact {
    padding-block: clamp(
        var(--ff-space-4),
        4vw,
        var(--ff-space-5)
    );
}
/*
 * Standard section
 * 48px → 80px
 */
.ff-section-standard {
    padding-block: clamp(
        var(--ff-space-5),
        6vw,
        var(--ff-space-7)
    );
}
/*
 * Large editorial section
 * 64px → 96px
 */
.ff-section-large {
    padding-block: clamp(
        var(--ff-space-6),
        8vw,
        var(--ff-space-8)
    );
}
/* =========================================================
   LAYOUT — CONTENT CONTAINER
   ========================================================= */

/*
 * Main page content container.
 *
 * Desktop content width: 1140px.
 * Responsive gutters remain outside the content area:
 * minimum 20px / maximum 32px.
 */
.ff-container-content {
    width: min(
        var(--ff-content-width),
        calc(
            100% -
            (
                2 *
                clamp(
                    var(--ff-gutter-min),
                    3vw,
                    var(--ff-gutter-max)
                )
            )
        )
    );
    max-width: var(--ff-content-width);
    margin-inline: auto;
}

/*
 * Full-bleed banner helper.
 * Use on outer banner/hero strips that must span the viewport,
 * while keeping their inner content independently constrained.
 */
.ff-banner-full {
    width: 100vw;
    max-width: none;
    margin-inline: calc(50% - 50vw);
}

/* =========================================================
   STACK / CONTENT SPACING
   ========================================================= */
/*
 * Heading + paragraph relationship.
 *
 * 15px is retained because it came from the XD relationship
 * rather than being forced onto the 8px spacing scale.
 */
.ff-stack-heading-copy {
    display: flex;
    flex-direction: column;
    gap: var(--ff-gap-heading-copy);
}
/*
 * General small stack
 */
.ff-stack-sm {
    display: flex;
    flex-direction: column;
    gap: var(--ff-space-2);
}
/*
 * General medium stack
 */
.ff-stack-md {
    display: flex;
    flex-direction: column;
    gap: var(--ff-space-3);
}
/*
 * General large stack
 */
.ff-stack-lg {
    display: flex;
    flex-direction: column;
    gap: var(--ff-space-4);
}
/* =========================================================
   TRANSITION / LEGACY ALIASES
   ========================================================= */
/*
 * Existing aliases retained temporarily:
 *
 * .ff-heading-hero
 * .ff-heading-section
 * .ff-text-body
 * .ff-text-light
 * .ff-label-medium
 *
 * New production builds should use:
 *
 * .ff-h1
 * .ff-h2
 * .ff-h3
 * .ff-h4
 *
 * .ff-body
 * .ff-body-light
 *
 * .ff-label
 * .ff-label-bold
 *
 * .ff-small
 *
 * .ff-btn-primary
 *
 * .ff-section
 * .ff-section-compact
 * .ff-section-standard
 * .ff-section-large
 *
 * .ff-container-content
 *
 * .ff-stack-heading-copy
 * .ff-stack-sm
 * .ff-stack-md
 * .ff-stack-lg
 */
 /* =========================================================
   BUTTON STATES
   ========================================================= */
.ff-btn-primary {
    transition:
        background-color 0.25s ease,
        box-shadow 0.25s ease,
        opacity 0.2s ease,
        transform 0.25s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.ff-btn-primary:hover,
.ff-btn-primary:focus-visible {
    background-color: var(--ff-colour-dark);
    color: var(--ff-colour-warm-white);
    box-shadow: 0 8px 18px -8px rgba(37, 37, 35, 0.45);
    transform: translateY(-1px);
}
.ff-btn-primary:focus-visible {
    outline: 2px solid var(--ff-colour-dark);
    outline-offset: 3px;
}
.ff-btn-primary:active {
    box-shadow: 0 3px 8px -4px rgba(37, 37, 35, 0.4);
    transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
    .ff-btn-primary,
    .ff-btn-primary:hover,
    .ff-btn-primary:focus-visible,
    .ff-btn-primary:active {
        transform: none;
        transition: background-color 0.2s ease, color 0.2s ease;
    }
}
/* =========================================================
   CONTENT LINKS
   ========================================================= */
/*
 * Plain text links in page content (no class): brand colour, no browser blue/purple, restrained animated underline.
 * Zero-specificity selectors so every classed component (buttons, cards, Oxygen elements) keeps its own styling;
 * the header (navigation, mini cart) and the approved footer are excluded.
 */
:where(body) a:where(:not([class])):not(:where(.ff-site-header *, .ff-site-footer *)),
:where(body) a:where(:not([class])):not(:where(.ff-site-header *, .ff-site-footer *)):visited {
    color: var(--ff-colour-dark);
    text-decoration: none;
    background-image: linear-gradient(currentColor, currentColor);
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-size: 100% 1px;
    transition: background-size 0.3s ease, color 0.2s ease;
}
:where(body) a:where(:not([class])):not(:where(.ff-site-header *, .ff-site-footer *)):hover {
    color: var(--ff-colour-button-dark);
    background-size: 100% 2px;
}
:where(body) a:where(:not([class])):not(:where(.ff-site-header *, .ff-site-footer *)):focus-visible {
    outline: 2px solid var(--ff-colour-dark);
    outline-offset: 2px;
    border-radius: 1px;
}
.ff-btn-primary[aria-disabled="true"],
.ff-btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}
/* =========================================================
   MINI CART (ESSENTIAL ELEMENTS) BASE
   ========================================================= */
/*
 * Native base CSS of the Essential Elements Mini Cart, copied verbatim from
 * Oxygen 6.1.3: subplugins/breakdance-woocommerce/css/breakdance-woocommerce.css
 * (only selectors containing "bde-mini-cart"; generated by
 * scripts/oxygen/extract_minicart_css.py).
 *
 * Why it lives here: Oxygen disables its WooCommerce integration in Oxygen
 * mode (plugin/breakdance-oxygen/woo.php), so that stylesheet is never
 * enqueued. Without it the mini-cart panel has no closed state or
 * positioning and renders inside the header flow.
 *
 * Original specificity is kept so the element's generated CSS (e.g. its
 * full-screen mode at <= 767px) still overrides it as designed.
 * The relative url(icons/cart.svg) mask was dropped: the element supplies
 * its own icon mask.
 */
.bde-mini-cart-offcanvas .woocommerce-Price-amount {
    font-weight: var(--bde-woo-typography-font-weight-heavy);
    color: var(--bde-woo-base-headings-color);
    display: inline;
    text-decoration: none;
    line-height: var(--bde-woo-base-heading-line-height);
}
.bde-mini-cart-offcanvas .woocommerce-Price-currencySymbol {
    display: inline;
    line-height: var(--bde-woo-base-heading-line-height);
}
.breakdance .bde-mini-cart-offcanvas-title {
    color: var(--bde-woo-base-headings-color);
    font-weight: var(--bde-woo-typography-font-weight-normal);
    font-size: var(--bde-woo-typography__size-large);
    font-family: var(--bde-woo-typography__size-large-font-family);
    line-height: var(--bde-woo-base-heading-line-height);
    text-align: left;
    margin: 0;
    padding: 0;
}
.bde-mini-cart-offcanvas .button {
    background: var(--bde-button-primary-background-color);
    color: var(--bde-button-primary-text-color);
    border-color: var(--bde-button-primary-border-color);
    border-radius: var(--bde-button-border-radius);
    border-width: var(--bde-button-border-width);
    box-shadow: none;
    font-size: var(--bde-button-font-size);
    font-weight: var(--bde-button-font-weight);
    line-height: var(--bde-button-line-height);
    transition: var(--bde-woo-base-transition);
    transition-duration: var(--bde-transition-duration);
    display: inline-flex;
    text-transform: capitalize;
    border-style: solid;
    padding: var(--bde-button-padding-base);
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    justify-content: center;
    align-items: center;
    width: max-content;
    flex-direction: row;
    gap: var(--bde-woo-base-small-gaps);
}
.bde-mini-cart-offcanvas .button:hover {
    background-color: var(--bde-button-primary-background-color-hover);
    color: var(--bde-button-primary-text-color-hover);
    border-color: var(--bde-button-primary-border-color-hover);
}
.bde-mini-cart .variation {
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 5px;
    column-gap: 8px;
    margin-bottom: var(--bde-woo-base-standard-gaps);
    margin-top: var(--bde-woo-base-standard-gaps);
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    color: var(--bde-woo-base-text-color);
    font-size: var(--bde-woo-typography__size-small);
    font-family: var(--bde-woo-typography__size-small-font-family);
    line-height: 1;
    word-break: break-all;
}
.bde-mini-cart dl dd {
    font-weight: var(--bde-woo-typography-font-weight-normal);
    color: var(--bde-woo-base-text-color);
    margin: 0;
    padding: 0;
}
.bde-mini-cart dl dd p {
    color: var(--bde-woo-base-headings-color);
    font-weight: var(--bde-woo-typography-font-weight-medium);
    font-size: var(--bde-woo-typography__size-small) !important;
    line-height: 1 !important;
    margin: 0;
}
.bde-mini-cart {
    position: relative;
    --bde-mini-cart-padding-top: 20px;
    --bde-mini-cart-padding-right: 20px;
    --bde-mini-cart-padding-bottom: 20px;
    --bde-mini-cart-padding-left: 20px;
}
.bde-mini-cart-toggle {
    display: flex;
    align-items: center;
    color: #4b5563;
    text-decoration: none !important;
    padding: 13px;
}
.bde-mini-cart-toggle:hover .bde-mini-cart-toggle__counter {
    background-color: var(--bde-woo-base-primary-color-hover);
    color: var(--bde-woo-base-text-on-primary-color);
}
.bde-mini-cart-toggle__subtotal {
    margin-right: var(--bde-woo-base-standard-gaps);
}
.bde-mini-cart-toggle__icon {
    position: relative;
    display: inline-block;
    align-items: center;
    background-color: var(--bde-woo-base-text-color);
    content: "";
    width: 28px;
    height: 28px;
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: 0 2px;
    -webkit-mask-position: 0 2px;
    transition: var(--bde-woo-base-transition);
}
.bde-mini-cart-toggle__counter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: var(--bde-woo-typography__size-standard);
    font-family: var(--bde-woo-typography__size-standard-font-family);
    color: var(--bde-woo-base-text-on-primary-color);
    line-height: 1;
    background-color: var(--bde-woo-base-primary-color);
    border-radius: 100px;
    margin-left: var(--bde-woo-base-standard-gaps);
    padding: 4px 8px 4px 8px;
    font-weight: var(--bde-woo-typography-font-weight-medium);
    transition: var(--bde-woo-base-transition);
    flex-shrink: 0;
}
.bde-mini-cart-offcanvas-body {
    --cart-image-size: 80px;
    position: absolute;
    top: 100%;
    z-index: var(--bde-z-index-minicart);
    display: flex;
    flex-direction: column;
    width: 420px;
    background-color: #fff;
    box-shadow: rgb(255, 255, 255) 0 0 0 0, rgba(0, 0, 0, 0.05) 0 0 0 1px, rgba(0, 0, 0, 0.1) 0 10px 15px -3px, rgba(0, 0, 0, 0.05) 0 4px 6px -2px;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: transform cubic-bezier(0.4, 0, 0.2, 1), opacity cubic-bezier(0.4, 0, 0.2, 1), visibility cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: var(--bde-transition-duration);
    overflow: hidden;
}
.bde-mini-cart-offcanvas-body > * {
    margin-bottom: 0;
}
.bde-mini-cart-offcanvas-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: var(--bde-mini-cart-padding-top);
    padding-bottom: var(--bde-mini-cart-padding-top);
    padding-left: var(--bde-mini-cart-padding-left);
    padding-right: var(--bde-mini-cart-padding-right);
}
.bde-mini-cart-offcanvas-overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: var(--bde-z-index-minicart-backdrop);
    display: none;
    background-color: rgba(0, 0, 0, 0.3);
    opacity: 0;
    pointer-events: none;
    transition: var(--bde-woo-base-transition);
}
.bde-mini-cart-offcanvas--active .bde-mini-cart-offcanvas-body,
.bde-mini-cart-offcanvas--active .bde-mini-cart-offcanvas-overlay {
    --cart-scale: 1 !important;
    --cart-translate-3d: 0, 0, 0 !important;
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
}
.bde-mini-cart-offcanvas__close-button {
    position: relative;
    font-size: var(--bde-woo-typography__size-large);
    font-family: var(--bde-woo-typography__size-large-font-family);
    line-height: 0.5;
    color: var(--bde-woo-widgets__remove-item-from-cart-color);
    opacity: 0.5;
    border: none;
    background-color: transparent;
    transition: var(--bde-woo-base-transition);
    cursor: pointer;
    padding: 0 10px;
    height: 100%;
    margin-right: -10px;
}
.bde-mini-cart-offcanvas__close-button:hover {
    opacity: 1;
}
.bde-mini-cart-offcanvas .widget_shopping_cart_content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: hidden;
}
.bde-mini-cart-offcanvas .woocommerce-mini-cart {
    padding: 0;
    margin: 0;
    list-style-type: none;
    overflow-y: auto;
    height: 100%;
}
.bde-mini-cart-offcanvas .woocommerce-mini-cart .remove {
    grid-column: 3;
    grid-row: 1;
    transition: var(--bde-woo-base-defult-transition);
    color: var(--bde-woo-widgets__remove-item-from-cart-color);
    opacity: 0.5;
    text-decoration: none;
    font-weight: var(--bde-woo-typography-font-weight-normal);
    line-height: 0.5;
    text-align: right;
}
.bde-mini-cart-offcanvas .woocommerce-mini-cart .remove:hover {
    opacity: 1;
    text-decoration: none;
}
.bde-mini-cart-offcanvas .woocommerce-mini-cart__total {
    position: relative;
    display: flex;
    justify-content: space-between;
    padding-bottom: 16px;
    margin: 0;
}
.bde-mini-cart-offcanvas .woocommerce-mini-cart__total strong {
    font-weight: var(--bde-woo-typography-font-weight-normal);
    font-size: var(--bde-woo-typography__size-standard);
    font-family: var(--bde-woo-typography__size-standard-font-family);
    color: var(--bde-woo-base-text-color);
}
.bde-mini-cart-offcanvas .woocommerce-mini-cart__buttons {
    display: flex;
    justify-content: space-between;
    gap: var(--bde-woo-base-standard-gaps);
    margin: 0;
}
.bde-mini-cart-offcanvas .woocommerce-mini-cart__buttons .button {
    flex: 1;
}
.bde-mini-cart-offcanvas .woocommerce-mini-cart-item {
    position: relative;
    display: grid;
    grid-template-columns: var(--cart-image-size) 1fr 20px;
    grid-template-rows: 1fr auto;
    column-gap: var(--bde-woo-base-big-gaps);
    row-gap: var(--bde-woo-base-medium-gaps);
    align-items: flex-start;
    padding-top: var(--bde-woo-base-medium-gaps);
    padding-bottom: var(--bde-woo-base-medium-gaps);
    padding-left: var(--bde-mini-cart-padding-left);
    padding-right: var(--bde-mini-cart-padding-right);
    clear: both;
}
.bde-mini-cart-offcanvas .woocommerce-mini-cart-item a.remove {
    transition: var(--bde-woo-base-transition);
}
.bde-mini-cart-offcanvas .woocommerce-mini-cart-item + .woocommerce-mini-cart-item {
    border-top: 1px solid var(--grey-200);
}
.bde-mini-cart-offcanvas .bde-mini-cart-item-title {
    color: var(--bde-woo-buttons-and-links__text-link-color);
    transition: var(--bde-woo-base-transition);
    font-size: var(--bde-woo-typography__size-standard);
    font-family: var(--bde-woo-typography__size-standard-font-family);
    text-decoration: none;
    font-weight: var(--bde-woo-typography-font-weight-medium);
}
.bde-mini-cart-offcanvas .bde-mini-cart-item-title:hover {
    color: var(--bde-woo-buttons-and-links__text-link-color-hover);
    text-decoration: none !important;
}
.bde-mini-cart-offcanvas .bde-mini-cart-item-thumbnail {
    grid-area: span 2;
}
.bde-mini-cart-offcanvas .bde-mini-cart-item-thumbnail img {
    display: block;
    width: var(--cart-image-size);
    height: var(--cart-image-size);
    object-fit: cover;
    transition: var(--bde-woo-base-transition);
    border-color: var(--bde-woo-product-images__border-color);
    border-style: solid;
    border-width: var(--bde-woo-product-images__border-width);
    border-radius: var(--bde-woo-product-images__border-radius);
}
.bde-mini-cart-offcanvas .woocommerce-mini-cart__empty-message {
    text-align: center;
    border-top: solid 1px var(--grey-200);
    margin: 0;
    padding: 35px 0;
}
.bde-mini-cart-offcanvas .blockOverlay {
    opacity: 0.3 !important;
}
.bde-mini-cart-quantity,
.bde-mini-cart-quantity-simple {
    grid-column: span 2;
}
.bde-mini-cart-quantity {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    font-size: var(--bde-woo-typography__size-standard);
    font-family: var(--bde-woo-typography__size-standard-font-family);
    color: var(--bde-woo-base-text-color);
}
.bde-mini-cart-quantity .quantity input {
    padding-top: 8px;
    padding-bottom: 8px;
}
.bde-mini-cart-quantity-simple {
    display: none;
}
.bde-mini-cart-quantity-simple .quantity {
    align-self: flex-end;
    display: flex;
    justify-content: flex-end;
    width: 100%;
    max-width: none;
    font-size: var(--bde-woo-typography__size-standard);
    font-family: var(--bde-woo-typography__size-standard-font-family);
    color: var(--bde-woo-base-text-color);
    transform: translateY(-5px);
    gap: 5px;
}
.bde-mini-cart-continue-link {
    display: block;
    font-size: var(--bde-woo-typography__size-standard);
    font-family: var(--bde-woo-typography__size-standard-font-family);
    text-align: center;
    color: var(--bde-button-primary-background-color);
    text-decoration: none;
    font-weight: var(--bde-woo-typography-font-weight-medium);
    padding-bottom: var(--bde-mini-cart-padding-bottom);
}
.bde-mini-cart-continue-link:after {
    content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    vertical-align: middle;
    mask: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww\.w3.org%2F2000%2Fsvg%22%20id%3D%22icon-arrow-right2%22%20viewBox%3D%220%200%2032%2032%22%3E%0A%3Cpath%20d%3D%22M19.414%2027.414l10-10c0.781-0.781%200.781-2.047%200-2.828l-10-10c-0.781-0.781-2.047-0.781-2.828%200s-0.781%202.047%200%202.828l6.586%206.586h-19.172c-1.105%200-2%200.895-2%202s0.895%202%202%202h19.172l-6.586%206.586c-0.39%200.39-0.586%200.902-0.586%201.414s0.195%201.024%200.586%201.414c0.781%200.781%202.047%200.781%202.828%200z%22%2F%3E%0A%3C%2Fsvg%3E);
    -webkit-mask: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww\.w3.org%2F2000%2Fsvg%22%20id%3D%22icon-arrow-right2%22%20viewBox%3D%220%200%2032%2032%22%3E%0A%3Cpath%20d%3D%22M19.414%2027.414l10-10c0.781-0.781%200.781-2.047%200-2.828l-10-10c-0.781-0.781-2.047-0.781-2.828%200s-0.781%202.047%200%202.828l6.586%206.586h-19.172c-1.105%200-2%200.895-2%202s0.895%202%202%202h19.172l-6.586%206.586c-0.39%200.39-0.586%200.902-0.586%201.414s0.195%201.024%200.586%201.414c0.781%200.781%202.047%200.781%202.828%200z%22%2F%3E%0A%3C%2Fsvg%3E);
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
}
.bde-mini-cart-offcanvas--primary-cart .wc-forward.checkout,
.bde-mini-cart-offcanvas--primary-checkout .wc-forward:not(.checkout) {
    display: none !important;
}
.bde-mini-cart-offcanvas .woocommerce-Price-amount bdi,
.bde-mini-cart-toggle__subtotal .woocommerce-Price-amount bdi {
    font-weight: var(--bde-woo-typography-font-weight-heavy);
    color: var(--bde-woo-base-headings-color);
    display: inline;
    text-decoration: none;
    line-height: var(--bde-woo-base-heading-line-height);
    font-size: var(--bde-woo-typography__size-standard);
    font-family: var(--bde-woo-typography__size-standard-font-family);
}
.bde-mini-cart-offcanvas-footer {
    padding-top: var(--bde-mini-cart-padding-bottom);
    padding-bottom: var(--bde-mini-cart-padding-bottom);
    padding-left: var(--bde-mini-cart-padding-left);
    padding-right: var(--bde-mini-cart-padding-right);
}
.bde-mini-cart-offcanvas--dropdown .bde-mini-cart-offcanvas-body {
    --cart-scale: 0.95;
    --cart-translate-x: 0px;
    --cart-image-size: 60px;
    transform: scale(var(--cart-scale)) translateX(var(--cart-translate-x));
    border-radius: 8px;
}
.bde-mini-cart-offcanvas--dropdown.bde-mini-cart-offcanvas--right .bde-mini-cart-offcanvas-body {
    transform-origin: top left;
    left: 0;
}
.bde-mini-cart-offcanvas--dropdown.bde-mini-cart-offcanvas--left .bde-mini-cart-offcanvas-body {
    transform-origin: top right;
    right: 0;
}
.bde-mini-cart-offcanvas--dropdown.bde-mini-cart-offcanvas--center .bde-mini-cart-offcanvas-body {
    --cart-translate-x: -50%;
    transform-origin: top center;
    left: 50%;
}
.bde-mini-cart-offcanvas--dropdown .woocommerce-mini-cart {
    max-height: 250px;
}
.bde-mini-cart-offcanvas--dropdown .woocommerce-mini-cart__buttons .button {
    padding: 10px;
}
/* =========================================================
   SITE HEADER
   ========================================================= */
/*
 * Global header (Oxygen import: oxygen-imports/global/forest-fairies-header-v1.json).
 *
 * XD (1280 artboard):
 * announcement bar  #303030, 50px, Jost Regular 15px #FAF9F7, centred
 * main bar          white, full width, logo 149px with up to 48px inset
 * navigation        Jost Medium 16px #303030, centred
 * utility icons     ~20px line icons, WhatsApp in a 26px dark circle
 *
 * The header is full-width and is not constrained by --ff-content-width.
 * Its inner content uses a shared responsive inset capped at 48px on desktop.
 *
 * Structure:
 * .ff-site-header > .ff-announcement-bar > .ff-announcement-text
 *                 > .ff-header-main > .ff-header-inner
 *                     > .ff-header-logo > .ff-header-logo-image
 *                     > .ff-main-nav > .ff-main-nav-menu (Essential Elements Menu Builder)
 *                     > .ff-header-actions > .ff-header-action (+ modifier per action)
 *
 * The Menu Builder switches to the burger / off-canvas menu at
 * Oxygen's Tablet Landscape breakpoint (max-width: 1119px).
 */
.ff-site-header {
    --ff-header-height: 92px;
    --ff-header-action-size: 40px;
    --ff-header-icon-size: 20px;
    /*
     * Sticky: the whole header sticks at "admin bar - announcement height", so the dismissible announcement scrolls
     * away and the main bar stays pinned. --ff-announcement-h is measured by the site script (46px fallback) and is 0
     * once the bar is dismissed, so there is never an empty gap. Sticky keeps its place in the flow (no layout jump)
     * and creates no containing block for the fixed mini cart / search overlay / off-canvas menu inside it.
     */
    position: sticky;
    top: calc(var(--ff-sticky-admin-offset, 0px) - var(--ff-announcement-h, 46px));
    z-index: var(--bde-z-index-header-sticky, 200);
    width: var(--ff-header-width);
    max-width: none;
    background-color: var(--ff-colour-white);
    font-family: var(--ff-font-primary);
    color: var(--ff-colour-dark);
}
.ff-site-header *,
.ff-site-header *::before,
.ff-site-header *::after {
    box-sizing: border-box;
}
/* Announcement bar */
.ff-announcement-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100vw;
    max-width: none;
    min-height: 46px;
    margin-inline: calc(50% - 50vw);
    padding: var(--ff-space-1) var(--ff-header-inset);
    background-color: var(--ff-colour-dark);
    color: var(--ff-colour-warm-white);
}
.ff-announcement-bar[hidden],
.ff-announcement-dismissed .ff-announcement-bar {
    display: none;
}
.ff-announcement-bar--dismissible {
    position: relative;
    padding-inline: calc(var(--ff-header-inset) + 36px);
}
.ff-announcement-close {
    position: absolute;
    top: 50%;
    right: max(4px, calc(var(--ff-header-inset) - 10px));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin: -18px 0 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--ff-colour-warm-white);
    cursor: pointer;
    opacity: 0.8;
    transition: opacity 0.2s ease, background-color 0.2s ease;
}
.ff-announcement-close:hover {
    opacity: 1;
    background-color: rgba(250, 249, 247, 0.12);
}
.ff-announcement-close:focus-visible {
    opacity: 1;
    outline: 2px solid var(--ff-colour-warm-white);
    outline-offset: 0;
}
.ff-announcement-text {
    margin: 0;
    font-family: var(--ff-font-primary);
    font-size: 0.9375rem; /* XD: 15px */
    font-weight: var(--ff-weight-regular);
    line-height: 1.4;
    letter-spacing: var(--ff-letter-spacing-base);
    text-align: center;
    text-wrap: balance;
    color: inherit;
}
/* Main bar */
.ff-header-main {
    width: var(--ff-header-width);
    max-width: none;
    background-color: var(--ff-colour-white);
    transition: box-shadow 0.3s ease;
}
/* logged-in: stick below the WordPress admin bar (which is not fixed at 600px and below) */
.admin-bar .ff-site-header {
    --ff-sticky-admin-offset: var(--wp-admin--admin-bar--height, 0px);
}
@media (max-width: 600px) {
    .admin-bar .ff-site-header {
        --ff-sticky-admin-offset: 0px;
    }
}
.ff-announcement-dismissed .ff-site-header {
    --ff-announcement-h: 0px;
}
/* stuck state: a single hairline, no heavy shadow */
.ff-site-header.ff-header-stuck .ff-header-main {
    box-shadow: 0 1px 0 rgba(48, 48, 48, 0.08);
}
.ff-header-inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--ff-space-3);
    width: 100%;
    max-width: none;
    min-height: var(--ff-header-height);
    margin-inline: auto;
    padding-inline: var(--ff-header-inset);
}
/* Logo */
.ff-header-logo {
    display: block;
    flex: 0 0 auto;
    width: 150px;
    line-height: 0;
    text-decoration: none;
}
.ff-header-logo-image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1200 / 436; /* reserves space before the image loads */
}
/* Main navigation (Essential Elements Menu Builder) */
.ff-main-nav {
    display: flex;
    flex: 1 1 auto;
    justify-content: center;
    min-width: 0;
}
.ff-site-header .ff-main-nav-menu .breakdance-menu {
    --menu-base-font-size: var(--ff-font-size-base);
    --links-gap: 24px;
    --link-padding-top: 12px;
    --link-padding-bottom: 12px;
    --link-padding-left: 0px;
    --link-padding-right: 0px;
    --link-color: var(--ff-colour-dark);
    --link-color-hover: var(--ff-colour-button-dark);
    --link-color-active: var(--ff-colour-dark);
    --link-arrow-color: var(--ff-colour-button-dark);
    --link-arrow-color-hover: var(--ff-colour-button-dark);
    --link-arrow-size: 9px;
    --link-arrow-gap: 5px;
    --link-border-color: var(--ff-colour-warm-grey);
    --dropdown-background-color: var(--ff-colour-white);
    --dropdown-link-color: var(--ff-colour-dark);
    --dropdown-border-radius: var(--ff-radius-sm);
    --dropdown-section-padding: var(--ff-space-3);
    --dropdown-links-gap: var(--ff-space-1);
    --dropdown-custom-offset-y: 8px;
    --menu-background: var(--ff-colour-white);
    --mobile-offcanvas-width: min(360px, 88vw);
    --toggle-layer-color: var(--ff-colour-dark);
    --toggle-layer-width: 24px;
    --toggle-layer-height: 2px;
    --toggle-layer-spacing: 6px;
    --toggle-padding: 10px;
    --mobile-topbar-close-button-color: var(--ff-colour-dark);
    font-family: var(--ff-font-primary);
}
.ff-site-header .ff-main-nav-menu .breakdance-menu-link {
    font-family: var(--ff-font-primary);
    font-weight: var(--ff-weight-medium);
    letter-spacing: var(--ff-letter-spacing-base);
    text-underline-offset: 6px;
    text-decoration-thickness: 1px;
}
.ff-site-header .ff-main-nav-menu .breakdance-menu-link:hover {
    color: var(--link-color-hover);
    text-decoration: underline;
}
.ff-site-header .ff-main-nav-menu .breakdance-menu-item--active > .breakdance-menu-link {
    text-decoration: underline;
}
.ff-site-header .ff-main-nav-menu .breakdance-dropdown-link {
    font-family: var(--ff-font-primary);
    font-size: var(--ff-font-size-base);
    font-weight: var(--ff-weight-regular);
    color: var(--ff-colour-dark);
    text-decoration: none;
}
.ff-site-header .ff-main-nav-menu .breakdance-dropdown-link:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
}
/* Utility actions */
.ff-header-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 2px;
}
.ff-site-header .ff-header-actions .ff-header-action {
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Icon element (account, wishlist, WhatsApp) */
.ff-site-header .ff-header-actions .ff-header-action .bde-icon-icon.breakdance-icon-atom {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--ff-header-action-size);
    height: var(--ff-header-action-size);
    font-size: var(--ff-header-icon-size);
    color: var(--ff-colour-dark);
    text-decoration: none;
}
.ff-site-header .ff-header-actions .ff-header-action .bde-icon-icon.breakdance-icon-atom svg {
    width: 1em;
    height: 1em;
    fill: currentColor;
}
/* Search (Essential Elements Search Form, full-screen) */
.ff-site-header .ff-header-actions .ff-header-action--search {
    --searchFormSize: var(--ff-header-action-size);
}
.ff-site-header .ff-header-actions .ff-header-action--search .search-form__button--full-screen {
    width: var(--ff-header-action-size);
    height: var(--ff-header-action-size);
    padding: 0;
    font-size: var(--ff-header-icon-size);
    color: var(--ff-colour-dark);
    background-color: transparent;
}
.ff-site-header .ff-header-actions .ff-header-action--search .search-form__field {
    font-family: var(--ff-font-primary);
}
/* Cart (Essential Elements Mini Cart: live count via WooCommerce cart fragments) */
.ff-site-header .ff-header-actions .ff-header-action--cart .bde-mini-cart-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--ff-header-action-size);
    height: var(--ff-header-action-size);
    padding: 0;
    gap: 0;
    color: var(--ff-colour-dark);
    text-decoration: none;
}
.ff-site-header .ff-header-actions .ff-header-action--cart .bde-mini-cart-toggle__icon {
    flex: 0 0 var(--ff-header-icon-size);
    width: var(--ff-header-icon-size);
    height: var(--ff-header-icon-size);
    background-color: var(--ff-colour-dark);
    /* the bag icon is a CSS mask: scale it to the icon box like the other icons */
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}
.ff-site-header .ff-header-actions .ff-header-action--cart .bde-mini-cart-toggle__counter[data-count="0"] {
    display: none;
}
.ff-site-header .ff-header-actions .ff-header-action--cart .bde-mini-cart-toggle__counter {
    position: absolute;
    top: 3px;
    right: 1px;
    box-shadow: 0 0 0 2px var(--ff-colour-white);
    min-width: 17px;
    height: 17px;
    margin: 0;
    padding: 0 4px;
    border-radius: 999px;
    background-color: var(--ff-colour-dark);
    color: var(--ff-colour-white);
    font-family: var(--ff-font-primary);
    font-size: 11px;
    font-weight: var(--ff-weight-semibold);
    line-height: 17px;
    text-align: center;
}
/*
 * Mini-cart drawer: the Mini Cart uses its native Sidebar mode (right), set on the element
 * (design.cart.style = sidebar). The element's generated CSS makes the panel fixed, full
 * height and right-anchored, sliding translate3d(100%) -> 0 over --bde-transition-duration
 * (300ms), with its overlay and page scroll lock. Only reduced motion is added here.
 */
@media (prefers-reduced-motion: reduce) {
    .ff-site-header .ff-header-action--cart .bde-mini-cart-offcanvas-body,
    .ff-site-header .ff-header-action--cart .bde-mini-cart-offcanvas-overlay {
        transition: none;
    }
}
/* Wishlist: visual placeholder only (no wishlist system yet) */
.ff-site-header .ff-header-actions .ff-header-action--wishlist .bde-icon-icon.breakdance-icon-atom {
    cursor: default;
}
/* WhatsApp: 26px dark circle (XD) inside a full-size tap target */
.ff-site-header .ff-header-actions .ff-header-action--whatsapp .bde-icon-icon.breakdance-icon-atom {
    font-size: 15px;
    color: var(--ff-colour-warm-white);
    background:
        radial-gradient(
            circle closest-side,
            var(--ff-colour-dark) 12.5px,
            transparent 13.5px
        );
}
/* Focus */
.ff-site-header a:focus-visible,
.ff-site-header button:focus-visible,
.ff-site-header [role="button"]:focus-visible,
.ff-site-header input:focus-visible {
    outline: 2px solid var(--ff-colour-dark);
    outline-offset: 2px;
    border-radius: var(--ff-radius-sm);
}
.ff-announcement-bar a:focus-visible {
    outline-color: var(--ff-colour-warm-white);
}
/* Small desktop (1120-1279px): keep the full menu on one line beside logo and icons */
@media (min-width: 1120px) and (max-width: 1279px) {
    .ff-site-header {
        --ff-header-action-size: 36px;
    }
    .ff-header-inner {
        gap: var(--ff-space-2);
    }
    .ff-header-logo {
        width: 140px;
    }
    .ff-site-header .ff-main-nav-menu .breakdance-menu {
        --menu-base-font-size: 0.9375rem; /* 15px */
        --links-gap: 16px;
        --link-padding-left: 0px;
        --link-padding-right: 0px;
    }
}
/* Tablet landscape and below: burger menu (Oxygen breakpoint 1119px) */
@media (max-width: 1119px) {
    .ff-site-header {
        --ff-header-height: 72px;
        --ff-header-action-size: 44px;
    }
    .ff-header-inner {
        gap: var(--ff-space-1);
    }
    .ff-header-logo {
        width: 130px;
    }
    /* logo | actions | burger */
    .ff-header-actions {
        order: 2;
        margin-left: auto;
    }
    .ff-main-nav {
        order: 3;
        flex: 0 0 auto;
    }
    .ff-site-header .ff-main-nav-menu .breakdance-menu {
        --links-gap: 0px; /* burger list: keep items flush (desktop gap is 12px) */
        --link-padding-top: 14px;
        --link-padding-bottom: 14px;
        --link-padding-left: var(--ff-space-3);
        --link-padding-right: var(--ff-space-3);
    }
}
/* Phone landscape and below */
@media (max-width: 767px) {
    .ff-site-header {
        --ff-header-height: 64px;
    }
    .ff-announcement-text {
        font-size: 0.8125rem; /* 13px */
    }
    .ff-header-logo {
        width: 112px;
    }
    /* wishlist is a placeholder: hidden where space is tight */
    .ff-site-header .ff-header-actions .ff-header-action--wishlist {
        display: none;
    }
}
/* Phone portrait */
@media (max-width: 479px) {
    .ff-site-header {
        --ff-header-action-size: 40px;
        --ff-header-icon-size: 19px;
    }
    .ff-header-inner {
        gap: 4px;
    }
    .ff-header-logo {
        width: 100px;
    }
    .ff-header-actions {
        gap: 0;
    }
}

/* =========================================================
   SITE FOOTER
   ========================================================= */
/*
 * Global footer (Oxygen import: oxygen-imports/global/forest-fairies-footer-v1.json).
 * Builds on FOOTER TYPOGRAPHY (.ff-footer-heading / .ff-footer-text) and
 * FOOTER LAYOUT (.ff-site-footer / .ff-footer-inner: full width, --ff-footer-inset).
 *
 * XD (1280 artboard, ~360px high):
 * background #303030, text #FAF9F7
 * headings Jost Bold 16px, links Jost Regular 15px / 20px
 * 3 columns: Get in Touch + Follow Us | Shop + Newsletter | Useful Links
 * bottom row: copyright (14px) | Secure payments panel (#F2F0ED)
 *
 * The footer is not constrained by --ff-content-width (1140px).
 */
.ff-site-footer {
    background-color: var(--ff-colour-dark);
    color: var(--ff-colour-warm-white);
    font-family: var(--ff-font-primary);
}
.ff-site-footer .ff-footer-inner {
    padding-top: var(--ff-space-5);
    padding-bottom: 20px;
}
/* Columns */
.ff-footer-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr) minmax(0, 0.75fr);
    column-gap: var(--ff-space-6);
    row-gap: var(--ff-space-5);
    align-items: start;
}
.ff-footer-column {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
}
.ff-site-footer .ff-footer-heading {
    margin: 0 0 10px;
    text-transform: uppercase;
}
/* Link lists */
.ff-site-footer .ff-footer-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}
.ff-site-footer .ff-footer-list > li {
    margin: 0;
    padding: 0;
}
.ff-site-footer .ff-footer-contact .ff-footer-list {
    gap: 6px;
}
.ff-site-footer a.ff-footer-link {
    display: inline-block;
    color: var(--ff-colour-warm-white);
    text-decoration: none;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    overflow-wrap: anywhere;
}
.ff-site-footer a.ff-footer-link:hover {
    color: var(--ff-colour-warm-white);
    text-decoration: underline;
}
/* Follow us */
.ff-site-footer .ff-footer-contact .ff-footer-heading + .ff-footer-list + .ff-footer-heading {
    margin-top: 26px;
}
.ff-footer-social {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 4px;
}
.ff-site-footer .ff-footer-social .ff-footer-social-link .bde-icon-icon.breakdance-icon-atom {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--ff-colour-warm-white);
    border-radius: 50%;
    font-size: 15px;
    color: var(--ff-colour-white);
    text-decoration: none;
    transition: background-color 0.2s ease;
}
.ff-site-footer .ff-footer-social .ff-footer-social-link .bde-icon-icon.breakdance-icon-atom svg {
    width: 1em;
    height: 1em;
    fill: currentColor;
}
.ff-site-footer .ff-footer-social .ff-footer-social-link .bde-icon-icon.breakdance-icon-atom:hover {
    background-color: rgba(250, 249, 247, 0.14);
}
/* Shop: two link columns */
.ff-footer-shop-links {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    column-gap: var(--ff-space-6);
    row-gap: 0;
}
/* Newsletter (WPForms "Forest Fairies Footer Newsletter") */
.ff-footer-newsletter {
    width: 100%;
    max-width: 304px;
    margin-top: 26px;
}
.ff-site-footer .ff-footer-newsletter-label {
    margin: 0 0 6px;
}
.ff-site-footer .ff-footer-newsletter .wpforms-container {
    --wpforms-field-border-radius: 0;
    --wpforms-field-background-color: var(--ff-colour-warm-white);
    --wpforms-field-border-color: #707070;
    --wpforms-field-text-color: var(--ff-colour-dark);
    --wpforms-field-size-input-height: 40px;
    --wpforms-field-size-font-size: 15px;
    --wpforms-field-size-padding-h: 14px;
    margin: 0;
    padding: 0;
}
.ff-site-footer .ff-footer-newsletter .wpforms-container .wpforms-form {
    position: relative;
    margin: 0;
    padding: 0;
}
.ff-site-footer .ff-footer-newsletter .wpforms-container .wpforms-field-container,
.ff-site-footer .ff-footer-newsletter .wpforms-container .wpforms-field {
    margin: 0;
    padding: 0;
}
.ff-site-footer .ff-footer-newsletter .wpforms-container .wpforms-form input[type="email"] {
    width: 100%;
    max-width: none;
    height: 40px;
    margin: 0;
    padding: 0 48px 0 14px;
    border: 1px solid #707070;
    border-radius: 0;
    background-color: var(--ff-colour-warm-white);
    color: var(--ff-colour-dark);
    font-family: var(--ff-font-primary);
    font-size: 15px;
    line-height: 19px;
    box-shadow: none;
}
.ff-site-footer .ff-footer-newsletter .wpforms-container .wpforms-form input[type="email"]::placeholder {
    color: var(--ff-colour-dark);
    opacity: 1;
}
.ff-site-footer .ff-footer-newsletter .wpforms-container .wpforms-form input[type="email"]:focus {
    outline: 2px solid var(--ff-colour-warm-white);
    outline-offset: 2px;
    border-color: var(--ff-colour-dark);
    box-shadow: none;
}
/* arrow submit inside the right edge of the field; text kept for its accessible name */
.ff-site-footer .ff-footer-newsletter .wpforms-container .wpforms-submit-container {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
}
.ff-site-footer .ff-footer-newsletter .wpforms-container .wpforms-form button.wpforms-submit {
    position: relative;
    width: 40px;
    height: 40px;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: transparent;
    font-size: 0;
    line-height: 0;
    overflow: hidden;
    cursor: pointer;
}
.ff-site-footer .ff-footer-newsletter .wpforms-container .wpforms-form button.wpforms-submit::before {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 16px;
    height: 16px;
    background-color: #202020;
    -webkit-mask: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"%3E%3Cpath d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z"/%3E%3C/svg%3E') center / contain no-repeat;
    mask: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"%3E%3Cpath d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z"/%3E%3C/svg%3E') center / contain no-repeat;
}
.ff-site-footer .ff-footer-newsletter .wpforms-container .wpforms-form button.wpforms-submit:hover::before {
    background-color: var(--ff-colour-dark);
}
.ff-site-footer .ff-footer-newsletter .wpforms-container .wpforms-form button.wpforms-submit:focus-visible {
    outline: 2px solid var(--ff-colour-dark);
    outline-offset: -4px;
}
.ff-site-footer .ff-footer-newsletter .wpforms-container .wpforms-submit-spinner {
    position: absolute;
    top: 7px;
    right: 44px;
}
.ff-site-footer .ff-footer-newsletter .wpforms-container .wpforms-error,
.ff-site-footer .ff-footer-newsletter .wpforms-container em.wpforms-error {
    margin-top: 6px;
    color: #ffb3ae;
    font-family: var(--ff-font-primary);
    font-size: 14px;
    font-style: normal;
}
.ff-site-footer .ff-footer-newsletter .wpforms-confirmation-container-full {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ff-colour-warm-white);
    font-family: var(--ff-font-primary);
    font-size: 15px;
}
.ff-site-footer .ff-footer-newsletter .wpforms-confirmation-container-full p {
    margin: 0;
    color: inherit;
}
/* Bottom row */
.ff-footer-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--ff-space-2) var(--ff-space-4);
    margin-top: var(--ff-space-4);
}
.ff-site-footer .ff-footer-copyright {
    margin: 0;
    font-family: var(--ff-font-primary);
    font-size: var(--ff-font-size-small);
    font-weight: var(--ff-weight-regular);
    line-height: 1.4;
    color: var(--ff-colour-warm-grey);
}
.ff-footer-payments {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    max-width: 100%;
    min-height: 51px;
    padding: 8px 20px;
    background-color: var(--ff-colour-warm-grey);
    color: var(--ff-colour-dark);
}
.ff-site-footer .ff-footer-payments-label {
    margin: 0;
    font-family: var(--ff-font-primary);
    font-size: var(--ff-font-size-small);
    line-height: 1.4;
    color: var(--ff-colour-dark);
}
.ff-site-footer .ff-footer-payment-marks {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.ff-site-footer .ff-footer-payment-mark {
    display: flex;
    margin: 0;
    padding: 0;
}
.ff-site-footer .ff-footer-payment-mark img {
    display: block;
    width: auto;
    height: 24px;
    max-width: none;
}
.ff-site-footer .ff-footer-payment-mark img[src*="mastercard"] {
    height: 20px;
}
/* Focus */
.ff-site-footer a:focus-visible,
.ff-site-footer button:focus-visible {
    outline: 2px solid var(--ff-colour-warm-white);
    outline-offset: 2px;
    border-radius: var(--ff-radius-sm);
}
/* Tablet landscape: keep three columns, tighter gap */
@media (max-width: 1119px) {
    .ff-footer-main {
        column-gap: var(--ff-space-5);
    }
}
/* Tablet portrait (Oxygen tablet portrait and below): two columns, Useful Links below */
@media (max-width: 1023px) {
    .ff-footer-main {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    }
}
/* Phone: stack in reading order, payments above copyright */
@media (max-width: 767px) {
    .ff-site-footer .ff-footer-inner {
        padding-top: var(--ff-space-4);
    }
    .ff-footer-main {
        grid-template-columns: minmax(0, 1fr);
        row-gap: var(--ff-space-4);
    }
    .ff-footer-newsletter {
        max-width: none;
    }
    .ff-footer-shop-links {
        column-gap: var(--ff-space-4);
    }
    .ff-footer-bottom {
        flex-direction: column;
        align-items: flex-start;
    }
    .ff-footer-payments {
        order: -1;
        width: 100%;
    }
}

/* =========================================================
   SITE — HOMEPAGE
   ========================================================= */
/*
 * Homepage (Oxygen import: oxygen-imports/pages/forest-fairies-homepage-v1.json).
 * Everything is scoped to the page root .ff-home so the shared selectors keep their global
 * behaviour elsewhere (.ff-container-content / .ff-home-hero carry Oxygen selector margins).
 *
 * Rhythm (approved): heading -> paragraph 12px · paragraph -> paragraph 16px · paragraph -> CTA 20px
 * section description -> major content 32px · major content -> section CTA 32px
 * product image -> title 16px · title -> price 8px
 * Section top spacing: 80px desktop · 64px tablet (<=1119px) · 56px mobile (<=767px)
 * The space above a coloured band is the band's own top margin (white shows through), so a section that is
 * conditionally absent (Seasonal while its category is empty) never leaves a double or missing gap.
 */
.ff-home {
    --ff-home-section-space: var(--ff-space-7);
    --ff-home-card-gap: var(--ff-space-3);
    --ff-home-arrow-size: 37px;
    background-color: var(--ff-colour-white);
    color: var(--ff-colour-dark);
}
.ff-home ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.ff-home li {
    margin: 0;
}
/* Sections: top spacing always; coloured bands add the same space above (margin) and inside (padding); last section closes */
.ff-home .ff-home-section {
    width: 100%;
    padding-top: var(--ff-home-section-space);
    background-color: var(--ff-colour-white);
}
.ff-home .ff-home-categories,
.ff-home .ff-home-story {
    margin-top: var(--ff-home-section-space);
    padding-bottom: var(--ff-home-section-space);
}
.ff-home .ff-home-testimonials {
    padding-bottom: var(--ff-home-section-space);
}
.ff-home .ff-home-section-inner,
.ff-home .ff-home-story-inner {
    margin-bottom: 0;
}
.ff-home .ff-home-section-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ff-space-4);
    text-align: center;
}
.ff-home .ff-section-header {
    display: flex;
    flex-direction: column;

    gap: 12px;
    width: 100%;
    max-width: 950px;
}
.ff-home .ff-section-title {
    margin: 0;
}
.ff-home .ff-section-intro {
    margin: 0;
}
.ff-home .ff-section-cta {
    display: flex;
    justify-content: center;
    width: 100%;
}
/* 01 Hero (approved artwork + layout from the ff-home-hero selectors; sizes per the homepage brief) */
.ff-home .ff-home-hero {
    min-height: 500px;
    margin-bottom: 0;
}
.ff-home .ff-home-hero > .ff-container-content {
    margin-bottom: 0;
}
.ff-home .ff-home-hero-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}
.ff-home .ff-home-hero-badge {
    width: 75px;
    max-width: 75px;
    height: auto;
    margin: 0 0 20px;
}
.ff-home .ff-home-hero-title {
    margin: 0 0 12px;
}
.ff-home .ff-home-hero-copy {
    margin: 0 0 20px;
}
/* 02 More than just sweets (shared .ff-section-header + .ff-stack-sm for the two paragraphs) */
.ff-home .ff-home-intro .ff-section-header {
    max-width: 900px;
}
/* 03 / 05 Product carousels (native Oxygen Post Loop slider + FF Product Card v2) */
.ff-home .ff-product-carousel {
    position: relative;
    width: 100%;
}
.ff-home .ff-product-carousel .breakdance-swiper-wrapper {
    container-type: inline-size;
    padding: 0;
}
.ff-home .ff-product-carousel .swiper-slide {
    height: auto;
}
.ff-home .ff-product-carousel .swiper-button-prev,
.ff-home .ff-product-carousel .swiper-button-next {
    display: flex;
    width: var(--ff-home-arrow-size);
    height: var(--ff-home-arrow-size);
    /* centred on the square product image: (column width - gaps) / cards visible / 2 */
    top: calc((100cqw - 3 * 24px) / 4 / 2);
    margin-top: calc(var(--ff-home-arrow-size) / -2);
    border-radius: 50%;
    transition: opacity 0.2s ease;
}
.ff-home .ff-product-carousel .swiper-button-prev > svg,
.ff-home .ff-product-carousel .swiper-button-next > svg {
    width: 46px;
    height: 46px;
    flex: 0 0 auto;
    stroke-width: revert;
    stroke: revert;
}
.ff-home .ff-product-carousel .swiper-button-prev {
    left: calc(-1 * (var(--ff-home-arrow-size) + 15px));
}
.ff-home .ff-product-carousel .swiper-button-next {
    right: calc(-1 * (var(--ff-home-arrow-size) + 15px));
}
.ff-home .ff-product-carousel .swiper-button-prev:focus-visible,
.ff-home .ff-product-carousel .swiper-button-next:focus-visible {
    outline: 2px solid var(--ff-colour-dark);
    outline-offset: 2px;
}
.ff-home .ff-product-carousel .swiper-button-disabled {
    opacity: 0.35;
}
/* Product card (component "FF Product Card v2") */
.ff-product-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    text-align: center;
    /* product titles and any Oxygen link default inside the card resolve to the brand dark (never browser blue) */
    --bde-links-color: var(--ff-colour-dark);
    --bde-links-color-hover: var(--ff-colour-dark);
}
.ff-product-card-media {
    position: relative;
    aspect-ratio: 1 / 1;
    margin-bottom: 16px;
    overflow: hidden;
    background-color: var(--ff-colour-white);
}
/* fixed square frame: every image (portrait packs, wide boxes, small cut-outs) is contained, never cropped */
.ff-product-card-image,
.ff-product-card-hover img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: contain;
    object-position: center;
    transition: opacity 0.45s ease, transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* first gallery image: same frame, cross-faded in on desktop hover (empty when the product has no gallery) */
.ff-product-card-hover {
    position: absolute;
    inset: 0;
    display: block;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.45s ease;
}
@media (hover: hover) and (pointer: fine) {
    /* flat hover: no lift, no shadow - image scale, gallery-image crossfade and the title underline only */
    .ff-product-card:hover .ff-product-card-image,
    .ff-product-card:hover .ff-product-card-hover img {
        transform: scale(1.02);
    }
    .ff-product-card:hover .ff-product-card-hover:has(img) {
        opacity: 1;
    }
    .ff-product-card:hover .ff-product-card-media:has(.ff-product-card-image-alt) .ff-product-card-image {
        opacity: 0;
    }
}
@media (prefers-reduced-motion: reduce) {
    .ff-product-card-image,
    .ff-product-card-hover,
    .ff-product-card-hover img {
        transition: none;
    }
    .ff-product-card:hover .ff-product-card-image,
    .ff-product-card:hover .ff-product-card-hover img {
        transform: none;
    }
}
/*
 * Product badges (Change 21): On Sale (automatic, WooCommerce) + Product Badges terms, max 2, top-right of the media
 * frame, stacked downwards. Plain text labels. Every badge uses the same neutral XD style for now; each label also
 * carries a ff-product-badge--{term-slug} modifier for future per-badge styling.
 */
.ff-product-badge {
    position: absolute;
    z-index: 2;                /* above the hover image crossfade; the "+" sits bottom-right, well clear */
    top: 12px;
    right: 12px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    max-width: calc(100% - 24px);
    pointer-events: none;
}
.ff-product-badge__label {
    display: block;
    max-width: 100%;
    padding: 5px 10px;
    border: 1px solid var(--ff-colour-warm-grey);
    border-radius: 2px;
    background-color: var(--ff-colour-white);
    font-family: var(--ff-font-primary);
    font-size: 13px;
    font-weight: var(--ff-weight-regular);
    line-height: 1.2;
    letter-spacing: 0.01em;
    color: var(--ff-colour-dark);
    overflow-wrap: anywhere;
}
@media (max-width: 767px) {
    .ff-product-badge {
        top: 10px;
        right: 10px;
        gap: 4px;
        max-width: calc(100% - 20px);
    }
    .ff-product-badge__label {
        padding: 4px 8px;
        font-size: 12px;
    }
}
.ff-product-card-action {
    position: absolute;
    z-index: 2;
    right: 8px;
    bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid #E0DCD7;
    border-radius: 50%;
    background-color: var(--ff-colour-white);
    color: transparent;
    font-size: 0;
    line-height: 0;
    text-decoration: none;
    transition: border-color 0.2s ease;
}
.ff-product-card-action::before {
    content: "";
    width: 11px;
    height: 11px;
    background-color: #202020;
    -webkit-mask: url("../images/icons/plus.svg") center / contain no-repeat;
    mask: url("../images/icons/plus.svg") center / contain no-repeat;
}
/* larger touch target without changing the 30px circle */
.ff-product-card-action::after {
    content: "";
    position: absolute;
    inset: -7px;
}
.ff-product-card-action:hover {
    border-color: var(--ff-colour-dark);
}
/* AJAX add to cart states (busy / added / error) */
.ff-product-card-action.is-loading {
    cursor: progress;
    opacity: 0.55;
}
.ff-product-card-action.is-added {
    border-color: var(--ff-colour-dark);
    background-color: var(--ff-colour-dark);
}
.ff-product-card-action.is-added::before {
    width: 6px;
    height: 11px;
    margin-top: -3px;
    border-right: 1.5px solid var(--ff-colour-white);
    border-bottom: 1.5px solid var(--ff-colour-white);
    background: none;
    -webkit-mask: none;
    mask: none;
    transform: rotate(45deg);
}
.ff-product-card-action.is-error {
    border-color: #b3261e;
}
.ff-product-card-action:focus-visible {
    outline: 2px solid var(--ff-colour-dark);
    outline-offset: 2px;
}
/* the title is the card's single product link, stretched over the whole card (image included) */
.ff-product-card-title::after {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
}
.ff-product-card-title:focus-visible {
    outline: none;
}
.ff-product-card-title:focus-visible::after {
    outline: 2px solid var(--ff-colour-dark);
    outline-offset: 2px;
}
.ff-product-card-heading {
    display: -webkit-box;
    min-height: calc(2 * var(--ff-line-height-body));   /* two lines reserved: card bottoms stay aligned */
    margin: 0 0 8px;
    overflow: hidden;
    font: inherit;
    line-height: var(--ff-line-height-body);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.ff-product-card .ff-product-card-title,
.ff-product-card .ff-product-card-title:link,
.ff-product-card .ff-product-card-title:visited,
.ff-product-card .ff-product-card-title:hover,
.ff-product-card .ff-product-card-title:active,
.ff-product-card .ff-product-card-title:focus-visible {
    color: var(--ff-colour-dark);
}
.ff-product-card-title,
.ff-product-card-title:visited {
    display: inline;
    font-family: var(--ff-font-primary);
    font-size: var(--ff-font-size-body);
    font-weight: var(--ff-weight-regular);
    line-height: var(--ff-line-height-body);
    color: var(--ff-colour-dark);
    text-decoration: none;
    /* refined content-link underline (grows on hover/focus) */
    background-image: linear-gradient(currentColor, currentColor);
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-size: 0 1px;
    transition: background-size 0.35s ease;
}
.ff-product-card:hover .ff-product-card-title,
.ff-product-card-title:focus-visible {
    background-size: 100% 1px;
}
.ff-product-card-price {
    min-height: var(--ff-line-height-body);
    margin: 0;
    font-family: var(--ff-font-primary);
    font-size: var(--ff-font-size-body);
    font-weight: var(--ff-weight-regular);
    line-height: var(--ff-line-height-body);
    color: var(--ff-colour-dark);
}
.ff-product-card-price del {
    margin-right: 6px;
    opacity: 0.6;
}
.ff-product-card-price ins {
    text-decoration: none;
}
/* 04 Shop by category */
.ff-home .ff-home-categories {
    background-color: var(--ff-colour-warm-grey);
}
.ff-home .ff-category-track {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--ff-home-card-gap);
    width: 100%;
}
.ff-home .ff-category-card {
    display: flex;
    flex-direction: column;
    gap: var(--ff-space-3);
    color: var(--ff-colour-dark);
    text-decoration: none;
}
.ff-home .ff-category-card-media {
    display: block;
    aspect-ratio: 377 / 550;
    overflow: hidden;
    background-color: var(--ff-colour-warm-white);
}
.ff-home .ff-category-card-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.ff-home .ff-category-card:hover .ff-category-card-image {
    transform: scale(1.03);
}
.ff-home .ff-category-card-title {
    align-self: center;
    padding-bottom: 5px;
    font-family: var(--ff-font-primary);
    font-size: var(--ff-font-size-body);
    font-weight: var(--ff-weight-medium);
    line-height: var(--ff-line-height-label);
    letter-spacing: var(--ff-letter-spacing-label);
    text-transform: uppercase;
    /* underline belongs to the linked title; strengthens on hover/focus */
    background-image: linear-gradient(currentColor, currentColor);
    background-position: 50% 100%;
    background-repeat: no-repeat;
    background-size: 100% 1px;
    transition: background-size 0.3s ease;
}
.ff-home .ff-category-card:hover .ff-category-card-title,
.ff-home .ff-category-card:focus-visible .ff-category-card-title {
    background-size: 100% 2px;
}
.ff-home .ff-category-card:focus-visible {
    outline: 2px solid var(--ff-colour-dark);
    outline-offset: 4px;
}
/* 06 Our happy customers (logos: exact XD vectors, #77756F) */
.ff-home .ff-client-track {
    display: flex;
    justify-content: center;
    gap: var(--ff-space-5);
    width: 100%;
}
.ff-home .ff-client-logo {
    display: flex;
    flex: 0 0 169px;
    align-items: center;
    justify-content: center;
    height: 169px;
    background-color: var(--ff-colour-white);
}
.ff-home .ff-client-logo-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.ff-home .ff-client-logo img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    opacity: 0.85;
    transition: opacity 0.35s ease, filter 0.35s ease;
}
.ff-home .ff-client-logo-link:hover,
.ff-home .ff-client-logo-link:focus-visible {
    transform: translateY(-3px) scale(1.03);
}
.ff-home .ff-client-logo-link:hover img,
.ff-home .ff-client-logo-link:focus-visible img {
    opacity: 1;
    filter: contrast(1.15);
}
.ff-home .ff-client-logo-link:focus-visible {
    outline: 2px solid var(--ff-colour-dark);
    outline-offset: 4px;
}
.ff-home .ff-client-track:focus-visible {
    outline: 2px solid var(--ff-colour-dark);
    outline-offset: 4px;
}
/* 07 The Forest Fairies story: FULL-WIDTH band (no .ff-container-content). The artwork column runs to the band's
   left edge (XD: 594 of 1280); the content column carries its own padding (XD content 581 -> 1224 of 1280). */
.ff-home .ff-home-story {
    overflow: hidden;
    background-color: var(--ff-colour-warm-white);
    --ff-home-story-pad: clamp(40px, 4.4vw, 64px);
}
.ff-home .ff-home-story-inner {
    display: grid;
    grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
    align-items: center;
    gap: 0;
    width: 100%;
    text-align: left;
}
/* image composite, positioned from the XD layers (box 594 x 605) */
.ff-home .ff-home-story-media {
    position: relative;
    isolation: isolate;
    width: 100%;
    max-width: 720px;
    aspect-ratio: 594 / 605;
}
.ff-home .ff-home-story-media::before {
    content: "";
    position: absolute;
    z-index: 1;
    left: -5.56%;
    top: 4.96%;
    width: 86.2%;
    height: 66.12%;
    border-radius: 50%;
    background-color: var(--ff-colour-white);
    opacity: 0.5;
    filter: blur(34px);
    mix-blend-mode: screen;
    pointer-events: none;
}
.ff-home .ff-home-story-media img {
    position: absolute;
    display: block;
    max-width: none;
    object-fit: cover;
}
.ff-home .ff-home-story-bg {
    z-index: 0;
    left: 0;
    top: 0;
    width: 85.02%;
    height: 71.07%;
    translate: 0 var(--ff-parallax-bg, 0px);
}
.ff-home .ff-home-story-cutout-squares-2 {
    z-index: 2;
    left: -10.27%;
    top: 29.75%;
    width: 46.44%;
    height: 53.3%;
}
.ff-home .ff-home-story-cutout-squares {
    z-index: 3;
    left: 20.03%;
    top: 37.02%;
    width: 46.7%;
    height: 53.92%;
}
.ff-home .ff-home-story-cutout-bar {
    z-index: 4;
    /* moved in from the page edge: the pack's right edge sits just inside the content column's padding,
       bridging artwork and copy without reaching the text (XD position was left 10.44%) */
    left: calc(10.46% + var(--ff-home-story-pad) - 16px);
    top: 67.11%;
    width: 89.54%;
    height: 32.9%;
    translate: 0 var(--ff-parallax-fg, 0px);
    transition: opacity 0.9s ease 0.2s, transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) 0.2s;
}
.ff-home .ff-home-story-media.ff-reveal:not(.ff-reveal--in) .ff-home-story-cutout-bar {
    opacity: 0;
    transform: translateX(28px);
}
.ff-home .ff-home-story-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-inline: var(--ff-home-story-pad);
}
.ff-home .ff-home-story-content > * {
    width: 100%;
    max-width: 643px;
}
.ff-home .ff-home-story-eyebrow {
    margin: 0 0 8px;
    font-family: var(--ff-font-primary);
    font-size: var(--ff-font-size-body);
    font-weight: var(--ff-weight-regular);
    line-height: var(--ff-line-height-label);
    letter-spacing: 0.01em;
    color: var(--ff-colour-dark);
    opacity: 0.47;
}
.ff-home .ff-home-story-content .ff-section-title {
    margin-bottom: 12px;
}
/* Story accordion (native Essential Elements Advanced Accordion): minimal, editorial - thin separators between
   items (XD Path 559/560: 1px #303030), XD chevron (Path 561/563) at the right, no boxes or backgrounds */
.ff-home .ff-home-story-accordion {
    margin-top: 8px;
}
.ff-home .ff-home-story-accordion .bde-accordion__content-wrapper + .bde-accordion__content-wrapper {
    border-top: 1px solid var(--ff-colour-dark);
}
.ff-home .ff-home-story-accordion .bde-accordion__button {
    gap: var(--ff-space-2);
    padding: 16px 0;
    border-radius: 0;
    background: transparent;
}
.ff-home .ff-home-story-accordion .bde-accordion__title {
    font-family: var(--ff-font-primary);
    font-size: var(--ff-font-size-body);
    font-weight: var(--ff-weight-bold);
    line-height: var(--ff-line-height-label);
    letter-spacing: var(--ff-letter-spacing-label);
    color: var(--ff-colour-dark);
}
.ff-home .ff-home-story-accordion .bde-accordion__icon {
    flex: 0 0 auto;
    width: 12px;
    height: 7px;
    background: url("../images/icons/chevron-down.svg") center / contain no-repeat;
    -webkit-mask: none;
    mask: none;
}
.ff-home .ff-home-story-accordion .bde-accordion__button .bde-accordion__icon--active {
    display: none;
}
.ff-home .ff-home-story-accordion .bde-accordion__button .bde-accordion__icon--default {
    display: flex;
    transform: none;
}
.ff-home .ff-home-story-accordion .bde-accordion__button[aria-expanded="true"] .bde-accordion__icon--default {
    transform: rotate(180deg);
}
.ff-home .ff-home-story-accordion .bde-accordion__button:focus-visible {
    outline: 2px solid var(--ff-colour-dark);
    outline-offset: 2px;
}
.ff-home .ff-home-story-accordion .bde-accordion__panel-content {
    padding: 0 0 20px;
}
.ff-home .ff-home-story-cta {
    margin-top: 20px;
}
/* 08 Testimonials (exact XD reviews) */
.ff-home .ff-testimonial-track {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--ff-space-4);
    width: 100%;
    text-align: left;
}
.ff-home .ff-testimonial-card {
    display: flex;
    flex-direction: column;
}
.ff-home .ff-testimonial-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
    margin-top: 16px;
}
.ff-home .ff-testimonial-rating {
    display: block;
    width: 99px;
    height: 17px;
    margin: 0;
    overflow: hidden;
    background-color: #C2C0BB;
    -webkit-mask: url("../images/icons/star.svg") 0 0 / 18px 17px space no-repeat;
    mask: url("../images/icons/star.svg") 0 0 / 18px 17px space no-repeat;
    -webkit-mask-repeat: space no-repeat;
    mask-repeat: space no-repeat;
    color: transparent;
    font-size: 0;
    line-height: 0;
}
.ff-home .ff-testimonial-quote {
    margin: 20px 0 0;
    padding: 0;
    border: 0;
    quotes: none;
}
/* Reduced motion: no slide/zoom animation */
@media (prefers-reduced-motion: reduce) {
    .ff-home .swiper-wrapper {
        transition-duration: 0ms !important;
    }
    .ff-home .ff-category-card-image,
    .ff-home .ff-home-story-accordion .bde-accordion__button,
    .ff-home .ff-home-story-accordion .bde-accordion__icon,
    .ff-home .ff-product-carousel .swiper-button-prev,
    .ff-home .ff-product-carousel .swiper-button-next {
        transition: none;
    }
    .ff-home .ff-category-card:hover .ff-category-card-image {
        transform: none;
    }
    .ff-home .ff-home-story-accordion .bde-accordion__content-wrapper.is-collapsing .bde-accordion__panel {
        transition: none;
    }
    .ff-home .ff-category-track,
    .ff-home .ff-client-track,
    .ff-home .ff-testimonial-track {
        scroll-behavior: auto;
    }
}
/* Below 1384px (1280 grid + arrow + gap each side) the gutter is narrower than an arrow: arrows sit over the image edges */
@media (max-width: 1383px) {
    .ff-home .ff-product-carousel .swiper-button-prev {
        left: 4px;
    }
    .ff-home .ff-product-carousel .swiper-button-next {
        right: 4px;
    }
}
/* Tablet landscape and below (Oxygen breakpoint 1119px) */
@media (max-width: 1119px) {
    .ff-home {
        --ff-home-section-space: var(--ff-space-6);
        --ff-home-card-gap: 20px;
    }
    .ff-home .ff-product-carousel .swiper-button-prev,
    .ff-home .ff-product-carousel .swiper-button-next {
        top: calc((100cqw - 2 * 20px) / 3 / 2);
    }
    .ff-home .ff-client-track {
        gap: var(--ff-space-3);
    }
    .ff-home .ff-testimonial-track {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: var(--ff-space-5);
    }
}
/* Tablet portrait and below (Oxygen breakpoint 1023px): horizontal swipe rows */
@media (max-width: 1023px) {
    .ff-home .ff-home-hero {
        min-height: 450px;
    }
    .ff-home .ff-home-intro .ff-section-header {
        max-width: 700px;
    }
    .ff-home .ff-product-carousel .swiper-button-prev,
    .ff-home .ff-product-carousel .swiper-button-next {
        top: calc((100cqw - 2 * 20px) / 2.4 / 2);
    }
    .ff-home .ff-category-track,
    .ff-home .ff-client-track {
        display: grid;
        grid-auto-flow: column;
        grid-template-columns: none;
        justify-content: start;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        scrollbar-width: thin;
        -webkit-overflow-scrolling: touch;
    }
    .ff-home .ff-category-track {
        grid-auto-columns: calc((100% - 2 * 20px) / 2.3);
        padding-bottom: 8px;
    }
    .ff-home .ff-client-track {
        grid-auto-columns: 169px;
        padding-bottom: 8px;
    }
    .ff-home .ff-category-item,
    .ff-home .ff-client-logo {
        scroll-snap-align: start;
    }
    .ff-home .ff-home-story-inner {
        grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
    }
    .ff-home .ff-home-story {
        --ff-home-story-pad: clamp(32px, 4vw, 40px);
    }
}
/* Phone landscape and below (Oxygen breakpoint 767px) */
@media (max-width: 767px) {
    .ff-home {
        --ff-home-section-space: 56px;
        --ff-home-card-gap: var(--ff-space-2);
    }
    .ff-home .ff-home-hero {
        min-height: 520px;
    }
    .ff-home .ff-product-carousel .swiper-button-prev,
    .ff-home .ff-product-carousel .swiper-button-next {
        top: calc((100cqw - 16px) / 1.6 / 2);
    }
    .ff-home .ff-category-track {
        grid-auto-columns: 85%;
        gap: var(--ff-space-2);
    }
    .ff-home .ff-client-track {
        grid-auto-columns: 150px;
        gap: var(--ff-space-2);
    }
    .ff-home .ff-client-logo {
        height: 150px;
    }
    .ff-home .ff-home-story-inner {
        grid-template-columns: minmax(0, 1fr);
    }
    .ff-home .ff-home-story {
        --ff-home-story-pad: 24px;
    }
    .ff-home .ff-home-story-inner {
        row-gap: var(--ff-space-4);
    }
    .ff-home .ff-home-story-media {
        max-width: none;
    }
    .ff-home .ff-testimonial-track {
        display: grid;
        grid-auto-flow: column;
        grid-template-columns: none;
        grid-auto-columns: 85%;
        gap: var(--ff-space-3);
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        scrollbar-width: thin;
        padding-bottom: 8px;
    }
    .ff-home .ff-testimonial-card {
        scroll-snap-align: start;
    }
}
/* Phone portrait (Oxygen breakpoint 479px) */
@media (max-width: 479px) {
    .ff-home .ff-product-carousel .swiper-button-prev,
    .ff-home .ff-product-carousel .swiper-button-next {
        top: calc((100cqw - 16px) / 1.2 / 2);
    }
}

/* =========================================================
   SITE — MOTION (shared section entrance)
   ========================================================= */
/*
 * Applied by the site script (initReveal) to section content that starts below the fold: soft fade + 16px rise,
 * once, with a short capped stagger (--ff-reveal-delay). Never applied for prefers-reduced-motion.
 */
.ff-reveal {
    opacity: 0;
    transform: translateY(16px);
    transition:
        opacity 0.7s ease var(--ff-reveal-delay, 0ms),
        transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) var(--ff-reveal-delay, 0ms);
}
.ff-reveal.ff-reveal--in {
    opacity: 1;
    transform: none;
}
@media (prefers-reduced-motion: reduce) {
    .ff-reveal,
    .ff-reveal.ff-reveal--in {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .ff-home .ff-home-story-bg,
    .ff-home .ff-home-story-cutout-bar {
        translate: none;
        transition: none;
    }
}
/* visually hidden (live regions, status text) */
.ff-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* =========================================================
   SITE — SEARCH (full-screen search additions)
   ========================================================= */
/*
 * The full-screen overlay is the native Essential Elements Search Form. The site script adds, below the field:
 * popular searches and predictive results (listbox). Styles stay within the overlay.
 */
.ff-site-header .ff-search-panel {
    position: relative;
    z-index: 1;
    width: min(100%, var(--ff-search-panel-width, 720px));
    margin: var(--ff-space-3) auto 0;
    padding-inline: var(--ff-gutter-min);
    font-family: var(--ff-font-primary);
    color: var(--ff-colour-dark);
    text-align: left;
}
.ff-site-header .ff-search-loading {
    display: none;
    margin: 0 0 12px;
    font-size: var(--ff-font-size-small);
    opacity: 0.7;
}
.ff-site-header .ff-search-panel.is-loading .ff-search-loading {
    display: block;
}
.ff-site-header .ff-search-heading {
    margin: 0 0 12px;
    font-size: 12px;
    font-weight: var(--ff-weight-medium);
    line-height: 1.4;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 0.7;
}
.ff-site-header .ff-search-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.ff-site-header .ff-search-chip {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 6px 14px;
    border: 1px solid #E0DCD7;
    border-radius: 999px;
    background-color: var(--ff-colour-white);
    color: var(--ff-colour-dark);
    font-size: var(--ff-font-size-small);
    line-height: 1.2;
    text-decoration: none;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}
.ff-site-header .ff-search-chip:hover {
    border-color: var(--ff-colour-dark);
    background-color: var(--ff-colour-warm-white);
}
.ff-site-header .ff-search-chip:focus-visible,
.ff-site-header .ff-search-item a:focus-visible,
.ff-site-header .ff-search-all:focus-visible {
    outline: 2px solid var(--ff-colour-dark);
    outline-offset: 2px;
}
.ff-site-header .ff-search-results {
    margin-top: var(--ff-space-3);
    border: 1px solid #E0DCD7;
    background-color: var(--ff-colour-white);
    box-shadow: 0 18px 40px -24px rgba(48, 48, 48, 0.35);
}
.ff-site-header .ff-search-results[hidden] {
    display: none;
}
.ff-site-header .ff-search-list {
    max-height: min(56vh, 460px);
    margin: 0;
    padding: 6px 0;
    overflow-y: auto;
    list-style: none;
}
.ff-site-header .ff-search-item a {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--ff-space-2);
    padding: 8px var(--ff-space-2);
    color: var(--ff-colour-dark);
    text-decoration: none;
}
.ff-site-header .ff-search-item--category a {
    grid-template-columns: minmax(0, 1fr);
}
.ff-site-header .ff-search-item.is-active a,
.ff-site-header .ff-search-item a:hover {
    background-color: var(--ff-colour-warm-grey);
}
.ff-site-header .ff-search-item img {
    width: 48px;
    height: 48px;
    object-fit: contain;
    background-color: var(--ff-colour-white);
}
.ff-site-header .ff-search-item-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.ff-site-header .ff-search-item-name {
    overflow: hidden;
    font-size: var(--ff-font-size-body);
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ff-site-header .ff-search-item-meta {
    font-size: 13px;
    line-height: 1.3;
    opacity: 0.65;
}
.ff-site-header .ff-search-item-price {
    font-size: var(--ff-font-size-small);
    white-space: nowrap;
}
.ff-site-header .ff-search-item-price del {
    margin-right: 4px;
    opacity: 0.6;
}
.ff-site-header .ff-search-item-price ins {
    text-decoration: none;
}
.ff-site-header .ff-search-footer:empty {
    display: none;
}
.ff-site-header .ff-search-footer {
    padding: 10px var(--ff-space-2) 12px;
    border-top: 1px solid #EFEBE6;
}
.ff-site-header .ff-search-all,
.ff-site-header .ff-search-all:visited {
    color: var(--ff-colour-dark);
    font-size: var(--ff-font-size-small);
    font-weight: var(--ff-weight-medium);
    letter-spacing: 0.04em;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.ff-site-header .ff-search-empty {
    margin: 0;
    font-size: var(--ff-font-size-small);
    opacity: 0.8;
}
@media (max-width: 767px) {
    .ff-site-header .ff-search-item a {
        grid-template-columns: 40px minmax(0, 1fr);
    }
    .ff-site-header .ff-search-item img {
        width: 40px;
        height: 40px;
    }
    .ff-site-header .ff-search-item-price {
        grid-column: 2;
    }
}
/* search panel text sits on the dark native overlay: keep it legible (desktop layout unchanged) */
.ff-site-header .ff-search-panel {
    color: var(--ff-colour-warm-white);
}
.ff-site-header .ff-search-loading,
.ff-site-header .ff-search-heading {
    color: var(--ff-colour-warm-white);
}
.ff-site-header .ff-search-results {
    color: var(--ff-colour-dark);
}
.ff-site-header .ff-search-footer .ff-search-empty {
    color: var(--ff-colour-dark);
}
/* page behind an open search overlay does not scroll (class set by the site script) */
html.ff-search-open,
html.ff-search-open body {
    overflow: hidden;
}
/*
 * Mobile full-screen search: one vertical flow - field, popular searches, live results.
 * The overlay owns the viewport (near-opaque brand dark), scrolls itself when results are long,
 * and the close button stays fixed top-right.
 */
@media (max-width: 767px) {
    .ff-site-header .search-form--full-screen .search-form__lightbox {
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        height: 100vh;
        height: 100dvh;
        padding: calc(var(--wp-admin--admin-bar--height, 0px) + 76px) var(--ff-gutter-min) var(--ff-space-5);
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        background-color: rgba(48, 48, 48, 0.98);
    }
    .ff-site-header .search-form--full-screen .search-form__lightbox-bg {
        position: fixed;
    }
    .ff-site-header .search-form--full-screen .search-form__lightbox-close {
        position: fixed;
        top: calc(var(--wp-admin--admin-bar--height, 0px) + 16px);
        right: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        z-index: 30;
    }
    .ff-site-header .search-form--full-screen .search-form__lightbox-container {
        flex: 0 0 auto;
        width: 100%;
        min-height: 52px;
    }
    .ff-site-header .search-form--full-screen .search-form__lightbox-container .search-form__field {
        min-width: 0;
        height: 52px;
        font-size: 16px;   /* 16px: no iOS zoom on focus */
    }
    .ff-site-header .ff-search-panel {
        flex: 0 0 auto;
        width: 100%;
        margin: var(--ff-space-3) 0 0;
        padding-inline: 0;
    }
    .ff-site-header .ff-search-results {
        margin-top: var(--ff-space-3);
    }
    .ff-site-header .ff-search-list {
        max-height: none;
        overflow: visible;
    }
    .ff-site-header .ff-search-item a {
        grid-template-columns: 48px minmax(0, 1fr);
        align-items: start;
        row-gap: 2px;
        min-height: 64px;
        padding-block: 10px;
    }
    .ff-site-header .ff-search-item img {
        grid-row: span 2;
        width: 48px;
        height: 48px;
    }
    .ff-site-header .ff-search-item-name {
        white-space: normal;
    }
}

/* =========================================================
   SITE — MINI CART (Forest Fairies CI)
   ========================================================= */
/*
 * Restyle of the Essential Elements Mini Cart drawer (native sidebar behaviour, fragments and removal unchanged).
 * Colours come from the brand tokens through the component's own variables, so no WooCommerce blue remains.
 */
.ff-site-header .ff-header-action--cart .bde-mini-cart-offcanvas {
    --cart-image-size: 76px;
    --grey-200: #EFEBE6;
    --bde-woo-base-text-color: var(--ff-colour-dark);
    --bde-woo-base-headings-color: var(--ff-colour-dark);
    --bde-woo-buttons-and-links__text-link-color: var(--ff-colour-dark);
    --bde-woo-buttons-and-links__text-link-color-hover: var(--ff-colour-dark);
    --bde-woo-widgets__remove-item-from-cart-color: var(--ff-colour-dark);
    --bde-links-color: var(--ff-colour-dark);
    font-family: var(--ff-font-primary);
    color: var(--ff-colour-dark);
}
.ff-site-header .ff-header-action--cart .bde-mini-cart-offcanvas-body {
    background-color: var(--ff-colour-white);
}
.ff-site-header .ff-header-action--cart .bde-mini-cart-offcanvas-title {
    margin: 0;
    font-family: var(--ff-font-primary);
    font-size: 18px;
    font-weight: var(--ff-weight-semibold);
    line-height: 40px;   /* same height as the close button: optically aligned */
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ff-colour-dark);
}
.ff-site-header .ff-header-action--cart .bde-mini-cart-offcanvas__close-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-right: -10px;
    border-radius: 50%;
    font-size: 24px;
    line-height: 1;
    color: var(--ff-colour-dark);
    opacity: 0.6;
    transition: opacity 0.2s ease, background-color 0.2s ease;
}
.ff-site-header .ff-header-action--cart .bde-mini-cart-offcanvas__close-button:hover {
    opacity: 1;
    background-color: var(--ff-colour-warm-grey);
}
/* product rows: flat, thumbnail | title + quantity/price | remove */
.ff-site-header .ff-header-action--cart .bde-mini-cart-offcanvas .woocommerce-mini-cart-item {
    grid-template-columns: var(--cart-image-size) minmax(0, 1fr) 32px;
    grid-template-rows: auto 1fr;
    column-gap: var(--ff-space-2);
    row-gap: 6px;
    align-items: start;
    padding-top: 20px;
    padding-bottom: 20px;
}
.ff-site-header .ff-header-action--cart .bde-mini-cart-offcanvas .woocommerce-mini-cart-item + .woocommerce-mini-cart-item {
    border-top: 1px solid #EFEBE6;
}
.ff-site-header .ff-header-action--cart .bde-mini-cart-offcanvas .bde-mini-cart-item-thumbnail {
    display: block;
    width: var(--cart-image-size);
    height: var(--cart-image-size);
    background-color: var(--ff-colour-white);
}
.ff-site-header .ff-header-action--cart .bde-mini-cart-offcanvas .bde-mini-cart-item-thumbnail img {
    width: 100%;
    height: 100%;
    border: 0;
    object-fit: contain;
    object-position: center;
}
.ff-site-header .ff-header-action--cart .bde-mini-cart-offcanvas .bde-mini-cart-item-title,
.ff-site-header .ff-header-action--cart .bde-mini-cart-offcanvas .bde-mini-cart-item-title:link,
.ff-site-header .ff-header-action--cart .bde-mini-cart-offcanvas .bde-mini-cart-item-title:visited,
.ff-site-header .ff-header-action--cart .bde-mini-cart-offcanvas .bde-mini-cart-item-title:hover,
.ff-site-header .ff-header-action--cart .bde-mini-cart-offcanvas .bde-mini-cart-item-title:active {
    align-self: start;
    font-family: var(--ff-font-primary);
    font-size: var(--ff-font-size-body);
    font-weight: var(--ff-weight-regular);
    line-height: 1.35;
    color: var(--ff-colour-dark);
    text-decoration: none;
    background-image: linear-gradient(currentColor, currentColor);
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-size: 0 1px;
    transition: background-size 0.3s ease;
}
.ff-site-header .ff-header-action--cart .bde-mini-cart-offcanvas .bde-mini-cart-item-title:hover,
.ff-site-header .ff-header-action--cart .bde-mini-cart-offcanvas .bde-mini-cart-item-title:focus-visible {
    background-size: 100% 1px;
}
.ff-site-header .ff-header-action--cart .bde-mini-cart-offcanvas .woocommerce-mini-cart-item .quantity {
    grid-column: 2;
    align-self: start;
    font-family: var(--ff-font-primary);
    font-size: var(--ff-font-size-small);
    line-height: 1.4;
    color: rgba(48, 48, 48, 0.72);
}
.ff-site-header .ff-header-action--cart .bde-mini-cart-offcanvas .woocommerce-mini-cart-item .quantity .amount {
    font-weight: var(--ff-weight-medium);
    color: var(--ff-colour-dark);
}
/* remove x: subtle, 32px target, stronger on hover/focus */
.ff-site-header .ff-header-action--cart .bde-mini-cart-offcanvas .woocommerce-mini-cart .remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: end;
    width: 32px;
    height: 32px;
    margin: -6px -6px 0 0;
    border-radius: 50%;
    font-size: 20px;
    line-height: 1;
    color: var(--ff-colour-dark);
    opacity: 0.45;
    transition: opacity 0.2s ease, background-color 0.2s ease;
}
.ff-site-header .ff-header-action--cart .bde-mini-cart-offcanvas .woocommerce-mini-cart .remove:hover,
.ff-site-header .ff-header-action--cart .bde-mini-cart-offcanvas .woocommerce-mini-cart .remove:focus-visible {
    opacity: 1;
    background-color: var(--ff-colour-warm-grey);
    color: var(--ff-colour-dark);
}
/* subtotal: label left, amount right */
.ff-site-header .ff-header-action--cart .bde-mini-cart-offcanvas .woocommerce-mini-cart__total {
    align-items: baseline;
    padding-bottom: var(--ff-space-2);
    font-family: var(--ff-font-primary);
    font-size: var(--ff-font-size-body);
    color: var(--ff-colour-dark);
}
.ff-site-header .ff-header-action--cart .bde-mini-cart-offcanvas .woocommerce-mini-cart__total strong {
    font-weight: var(--ff-weight-regular);
    color: var(--ff-colour-dark);
}
.ff-site-header .ff-header-action--cart .bde-mini-cart-offcanvas .woocommerce-mini-cart__total .amount {
    font-weight: var(--ff-weight-semibold);
}
/* View cart: the .ff-btn-primary visual language */
.ff-site-header .ff-header-action--cart .bde-mini-cart-offcanvas .woocommerce-mini-cart__buttons .button,
.ff-site-header .ff-header-action--cart .bde-mini-cart-offcanvas .woocommerce-mini-cart__buttons .button:visited {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: var(--ff-button-padding-y) var(--ff-button-padding-x);
    border: 0;
    border-radius: var(--ff-radius-sm);
    background-color: var(--ff-colour-button-dark, #252523);
    color: var(--ff-colour-white);
    font-family: var(--ff-font-secondary);
    font-size: var(--ff-font-size-button);
    font-weight: var(--ff-weight-semibold);
    line-height: var(--ff-line-height-button);
    letter-spacing: var(--ff-letter-spacing-button);
    text-transform: uppercase;
    text-decoration: none;
    transition: background-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.ff-site-header .ff-header-action--cart .bde-mini-cart-offcanvas .woocommerce-mini-cart__buttons .button:hover,
.ff-site-header .ff-header-action--cart .bde-mini-cart-offcanvas .woocommerce-mini-cart__buttons .button:focus-visible {
    background-color: var(--ff-colour-dark);
    color: var(--ff-colour-warm-white);
    box-shadow: 0 8px 18px -8px rgba(37, 37, 35, 0.45);
    transform: translateY(-1px);
}
.ff-site-header .ff-header-action--cart .bde-mini-cart-offcanvas .woocommerce-mini-cart__buttons .button:active {
    transform: translateY(0);
}
.ff-site-header .ff-header-action--cart .bde-mini-cart-offcanvas a:focus-visible,
.ff-site-header .ff-header-action--cart .bde-mini-cart-offcanvas button:focus-visible {
    outline: 2px solid var(--ff-colour-dark);
    outline-offset: 2px;
}
.ff-site-header .ff-header-action--cart .bde-mini-cart-offcanvas .woocommerce-mini-cart__empty-message {
    font-family: var(--ff-font-primary);
    color: var(--ff-colour-dark);
}
@media (prefers-reduced-motion: reduce) {
    .ff-site-header .ff-header-action--cart .bde-mini-cart-offcanvas .woocommerce-mini-cart__buttons .button,
    .ff-site-header .ff-header-action--cart .bde-mini-cart-offcanvas .woocommerce-mini-cart__buttons .button:hover,
    .ff-site-header .ff-header-action--cart .bde-mini-cart-offcanvas .woocommerce-mini-cart__buttons .button:focus-visible {
        transform: none;
    }
}