/*
 * Header - non-critical CSS, loaded normally.
 * Ported verbatim from Avada-Child-Theme/header.php lines 1034-2842.
 */

/* Non-Critical CSS - Below the fold */

.fixfactor-header .ff-menu-item:hover .ff-nav-link .ff-svg-icon { transform: rotate(180deg); opacity: 1; }
.fixfactor-header .ff-menu-item.ff-hover-active .ff-nav-link .ff-svg-icon,
.fixfactor-header .ff-menu-item:focus-within .ff-nav-link .ff-svg-icon { transform: rotate(180deg); opacity: 1; }
.fixfactor-header .ff-menu-item.ff-hover-active .ff-nav-link { color: var(--action); }
.fixfactor-header .ff-menu-item.ff-hover-active .ff-nav-link::after { transform: scaleX(1); }

/* Underline effect removed */

.fixfactor-header .ff-standard-dropdown::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 10px;
}

.fixfactor-header .ff-standard-dropdown > .ff-sub-menu {
    position: absolute;
    top: 51px;
    left: 0;
    min-width: 250px;
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: 0 10px 30px var(--shadow-colour-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    /* Nie `all`: `all` animuje też visibility, przez co zamknięty panel zostaje
       trafialny kursorem przez cały czas trwania przejścia. */
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
    z-index: 30;
    padding: var(--space-3) 0;
    list-style: none;
    border: 1px solid var(--overlay-faint);
    pointer-events: none;
}

.fixfactor-header .ff-standard-dropdown > .ff-sub-menu.ff-sub-menu-wide {
    min-width: 280px;
}

.fixfactor-header .ff-standard-dropdown > .ff-sub-menu.ff-sub-menu-narrow {
    min-width: 220px;
}

/*
 * Otwarciem steruje wyłącznie header.js (.ff-hover-active) plus :focus-within
 * dla klawiatury. Reguła :hover, która tu była, otwierała panel natychmiast i
 * niezależnie od skryptu — dwa mechanizmy na jeden stan, które potrafiły się
 * nie zgadzać.
 */
.fixfactor-header .ff-standard-dropdown:focus-within > .ff-sub-menu,
.fixfactor-header .ff-standard-dropdown.ff-hover-active > .ff-sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s;
}

.fixfactor-header .ff-sub-menu a {
    padding: var(--space-3) var(--space-5);
    display: flex;
    align-items: center;
    color: var(--content);
    font-weight: 500;
    text-decoration: none;
    transition: 0.15s ease;
}

.fixfactor-header .ff-sub-menu a:hover {
    background: var(--chrome-fill-hover);
    color: var(--action);
}

.fixfactor-header .ff-sub-menu .ff-svg-icon {
    margin-right: var(--space-3);
    width: 16px;
    height: 16px;
    text-align: center;
    color: var(--accent);
}


.fixfactor-header .ff-mega-menu-parent { position: static; }

.fixfactor-header .ff-mega-menu-container {
    position: absolute;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    /* patrz wyżej: `all` animowało visibility */
    transition: opacity 0.18s ease, visibility 0s linear 0.18s;
    z-index: 20;
}

.fixfactor-header .ff-mega-menu-bridge {
    position: absolute;
    top: 10px;
    left: 0;
    right: 0;
    height: 15px;
    background: transparent;
    z-index: 30;
}

.fixfactor-header .ff-mega-menu-parent:focus-within .ff-mega-menu-container,
.fixfactor-header .ff-mega-menu-parent.ff-hover-active .ff-mega-menu-container {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.18s ease, visibility 0s;
}

/*
 * Escape has to win against :focus-within.
 *
 * Escape closes the panel and leaves focus on the trigger — which is still inside
 * the item, so :focus-within would re-open it on the spot. This class is set by
 * header.js on Escape and cleared the moment focus leaves the item or a pointer
 * enters it. Same specificity as the rules above, so it has to come after them.
 *
 * visibility: hidden also takes the panel's links out of the tab order, which is
 * what makes Tab-after-Escape land on the next top-level item instead of walking
 * back into the panel the visitor just dismissed.
 */
.fixfactor-header .ff-menu-item.ff-esc-closed .ff-mega-menu-container,
.fixfactor-header .ff-menu-item.ff-esc-closed > .ff-sub-menu {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.fixfactor-header .ff-mega-menu {
    width: 100%;
    top: 10px;
    max-width: 100vw;
    position: relative;
}

.fixfactor-header .ff-mega-menu-wrapper {
    max-width: 1290px;
    margin: 0 auto;
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: 0 0 0 1px var(--overlay-soft), 0 10px 20px var(--shadow-colour-lg);
    box-sizing: border-box;
}

/*
 * Karta dziedziczy pointer-events po kontenerze i nie ustawia własnych.
 *
 * Miała tu `pointer-events: auto`, co jest wzorcem "kontener przepuszcza
 * kliknięcia, dziecko je łapie" — i przy stanie sterowanym przez
 * pointer-events na kontenerze działa dokładnie odwrotnie niż trzeba:
 * `pointer-events: none` na zamkniętym kontenerze nie obejmowało tej karty,
 * więc niewidzialny panel 1290 x 358 px pozostawał trafialny kursorem. Ruch
 * myszy w ten pas otwierał menu, mimo że nic tam nie było widać.
 */

.fixfactor-header .ff-mega-menu-inner {
    display: flex;
    padding: var(--space-6) var(--space-4);
}

.fixfactor-header .ff-mega-menu-column {
    flex: 1;
    padding: 0 var(--space-5);
}

.fixfactor-header .ff-brands-column { flex: 0.85; }
.fixfactor-header .ff-services-column { flex: 1.3; }

.fixfactor-header .ff-device-column {
    border-right: 1px solid var(--border-subtle);
}

.fixfactor-header .ff-menu-heading {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--content-secondary);
    margin: 0 0 var(--space-4) 0;
    padding: 0;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    line-height: 1.4;
    font-family: var(--font-stack);
    border: none;
    background: none;
}

.fixfactor-header .ff-device-column { overflow: visible; flex: 0.85; }

.fixfactor-header .ff-device-categories {
    list-style: none;
    max-height: 350px;
    overflow-y: auto;
    overflow-x: visible;
    margin-right: -5px;
    margin-left: -4px;
    padding-right: var(--space-1);
    padding-left: var(--space-1);
    padding-bottom: var(--space-2);
}

.fixfactor-header .ff-device-categories::-webkit-scrollbar { width: 6px; }
.fixfactor-header .ff-device-categories::-webkit-scrollbar-track { background: var(--overlay-faint); border-radius: 3px; }
.fixfactor-header .ff-device-categories::-webkit-scrollbar-thumb { background: var(--overlay-thumb); border-radius: 3px; }
.fixfactor-header .ff-device-categories::-webkit-scrollbar-thumb:hover { background: var(--overlay-thumb-hover); }

.fixfactor-header .ff-device-category {
    display: flex;
    align-items: center;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
    font-weight: 500;
    font-size: var(--text-sm);
    color: var(--content);
    text-decoration: none;
    white-space: nowrap;
}

.fixfactor-header .ff-device-category:hover,
.fixfactor-header .ff-device-category.ff-active {
    color: var(--action);
    background: var(--chrome-fill-hover);
}

.fixfactor-header .ff-device-category .ff-svg-icon {
    margin-right: var(--space-3);
    width: 18px;
    height: 18px;
    text-align: center;
    color: var(--accent);
    flex-shrink: 0;
}

.fixfactor-header .ff-device-category[data-category="consoles"] .ff-svg-icon {
    width: 21.6px;
    height: 21.6px;
    margin-left: -1.8px;
}

.fixfactor-header .ff-device-category[data-category="computers"] .ff-svg-icon {
    width: 19.8px;
    height: 19.8px;
    margin-left: -0.9px;
}

/* Brands Wrapper - Overflow Control */
.fixfactor-header .ff-brands-wrapper {
    max-height: 350px;
    overflow-y: auto;
    overflow-x: hidden;
    margin-right: -5px;
    padding-right: var(--space-1);
    padding-bottom: var(--space-2);
}

.fixfactor-header .ff-brands-wrapper::-webkit-scrollbar { width: 6px; }
.fixfactor-header .ff-brands-wrapper::-webkit-scrollbar-track { background: var(--overlay-faint); border-radius: 3px; }
.fixfactor-header .ff-brands-wrapper::-webkit-scrollbar-thumb { background: var(--overlay-thumb); border-radius: 3px; }
.fixfactor-header .ff-brands-wrapper::-webkit-scrollbar-thumb:hover { background: var(--overlay-thumb-hover); }

.fixfactor-header .ff-brands-list {
    list-style: none;
    transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.fixfactor-header .ff-brands-list.ff-hidden { display: none; }
/* A hidden list still has to be reachable once its category takes focus — the
   .ff-hidden class is swapped by header.js on both hover and focus. */

.fixfactor-header .ff-brands-badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: flex-start;
    padding-top: 2px;
}

.fixfactor-header .ff-brand-badge {
    display: inline-flex;
    align-items: center;
    padding: var(--space-2) var(--space-4);
    color: var(--content);
    text-decoration: none;
    transition: all 0.25s ease;
    border-radius: var(--radius-pill);
    font-weight: 500;
    font-size: var(--text-xs);
    background: transparent;
    border: 1px solid var(--accent);
}

.fixfactor-header .ff-brand-badge:hover {
    color: var(--surface);
    background: var(--action);
    border-color: var(--action);
}

.fixfactor-header .ff-view-all {
    margin-top: var(--space-2);
    width: 100%;
}

.fixfactor-header .ff-view-all a {
    color: var(--action);
    font-weight: 600;
    font-size: var(--text-sm);
    padding: var(--space-3) var(--space-4);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    border-radius: var(--radius);
    transition: all 0.25s ease;
    background: transparent;
    text-decoration: none;
}

.fixfactor-header .ff-view-all a:hover {
    background: var(--chrome-fill-hover);
}

.fixfactor-header .ff-view-all a .ff-svg-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.fixfactor-header .ff-quote-message {
    background: var(--wash-brand-faint);
    padding: var(--space-5) var(--space-5);
    border-radius: var(--radius);
    text-align: left;
}

.fixfactor-header .ff-quote-message .ff-svg-icon {
    font-size: var(--text-2xl);
    width: 24px;
    height: 24px;
    color: var(--accent);
    margin-bottom: var(--space-4);
}

.fixfactor-header .ff-quote-message p {
    margin-bottom: var(--space-2);
    font-size: var(--text-base);
    color: var(--content);
}

.fixfactor-header .ff-quote-message .ff-question {
    font-weight: 600;
}

.fixfactor-header .ff-quote-message .ff-message-detail {
    font-weight: 400;
}

.fixfactor-header .ff-quote-link {
    display: inline-block;
    margin-top: var(--space-3);
    padding: var(--space-2) var(--space-5);
    background: var(--action);
    color: var(--surface);
    text-decoration: none;
    border-radius: var(--radius);
    font-weight: 600;
    transition: var(--transition);
}

.fixfactor-header .ff-quote-link:hover {
    background: var(--action-hover);
    color: var(--surface);
}

/* Advanced Repairs List - Refined Column 3 */
.fixfactor-header .ff-advanced-repairs-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.fixfactor-header .ff-advanced-repair-card {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius);
    text-decoration: none;
    transition: all 0.2s ease;
    border: 2px solid var(--border-subtle);
    position: relative;
    overflow: hidden;
}

.fixfactor-header .ff-advanced-repair-card:hover {
    background: var(--action);
    border-color: var(--action);
}

.fixfactor-header .ff-advanced-repair-card:hover .ff-repair-name,
.fixfactor-header .ff-advanced-repair-card:hover .ff-repair-meta {
    color: var(--surface);
}

.fixfactor-header .ff-advanced-repair-card:hover .ff-svg-icon {
    color: var(--surface);
}

.fixfactor-header .ff-advanced-repair-card .ff-svg-icon {
    width: 18px;
    height: 18px;
    min-width: 18px;
    margin-top: 2px;
    color: var(--accent);
}

.fixfactor-header .ff-repair-content {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
}

.fixfactor-header .ff-repair-name {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--content);
    line-height: 1.4;
}

.fixfactor-header .ff-repair-meta {
    font-size: var(--text-xs);
    font-weight: 400;
    color: var(--content-secondary);
    line-height: 1.5;
}

.fixfactor-header .ff-repair-image {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 132px;
    background-size: cover;
    background-position: center;
    border-radius: 0 var(--radius) var(--radius) 0;
}

.fixfactor-header .ff-repair-image-zoom {
    background-size: 180%;
    background-position: 35% center;
}

.fixfactor-header .ff-repair-image-zoom-large {
    background-size: 250%;
    background-position: 40% 75%;
}

.fixfactor-header .ff-cta-buttons-row {
    display: flex;
    gap: var(--space-3);
    margin-top: var(--space-4);
}

.fixfactor-header .ff-cta-button {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius);
    font-size: var(--text-sm);
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
    border: 1.5px solid;
}

.fixfactor-header .ff-cta-primary .ff-svg-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.fixfactor-header .ff-cta-secondary {
    background: transparent;
    border-color: transparent;
    color: var(--content);
}

.fixfactor-header .ff-cta-secondary:hover {
    background: var(--chrome-fill-hover);
    border-color: transparent;
    color: var(--action);
}

.fixfactor-header .ff-cta-primary {
    background: transparent;
    border-color: var(--action);
    color: var(--action);
    border-width: 2px;
}

.fixfactor-header .ff-cta-primary .ff-svg-icon {
    color: var(--action);
}

.fixfactor-header .ff-cta-primary:hover {
    background: var(--action-hover);
    border-color: var(--action-hover);
    color: var(--surface);
}

.fixfactor-header .ff-cta-primary:hover .ff-svg-icon {
    color: var(--surface);
}

.fixfactor-header .ff-has-tooltip::before {
    content: attr(data-tooltip);
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%) scale(0.9);
    background: var(--overlay-strong);
    color: var(--content-inverse);
    padding: var(--space-2) var(--space-3);
    border-radius: 6px;
    font-size: var(--text-2xs);
    font-weight: 500;
    white-space: nowrap;
    max-width: 200px;
    text-align: center;
    line-height: 1.3;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    pointer-events: none;
    z-index: 70;
    box-shadow: 0 3px 10px var(--shadow-colour-lg);
    backdrop-filter: blur(8px);
}

.fixfactor-header .ff-has-tooltip::after {
    content: '';
    position: absolute;
    top: calc(100% + 1px);
    left: 50%;
    transform: translateX(-50%);
    border: 4px solid transparent;
    border-bottom-color: var(--overlay-strong);
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
}

.fixfactor-header .ff-has-tooltip:hover::before,
.fixfactor-header .ff-has-tooltip:hover::after {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) scale(1);
}

/* Hide tooltip for Book Your Visit on desktop - text is already visible */
.fixfactor-header .ff-book-button.ff-has-tooltip::before,
.fixfactor-header .ff-book-button.ff-has-tooltip::after {
    display: none;
}


/* A wash, not a fill — the button stays an outline on hover like its neighbours. */
.fixfactor-header .ff-cart-button:hover {
    background: color-mix(in srgb, var(--accent-warm) 16%, var(--surface));
    border-color: var(--accent-warm-hover);
}

/*
 * Count badge: top-right, which is where fifteen years of every other cart in
 * the world has trained people to look for it. It sat bottom-left.
 *
 * Amber fill with --content on it measures 12.9:1, so the number is legible at
 * 10px, and the 2px --surface ring keeps the badge from merging into the amber
 * border it overlaps. This is now the only filled amber in the header, and it
 * appears only when the basket has something in it.
 */
.fixfactor-header .ff-cart-count {
    position: absolute;
    top: 0;
    right: 0;
    background: var(--accent-warm);
    /* The amber is the same in both registers, so the numeral on it cannot
       follow one: --content turns white on ink for 1.46:1. */
    color: var(--on-warm);
    box-shadow: 0 0 0 2px var(--surface);
    font-size: var(--text-2xs);
    font-weight: 700;
    padding: 2px var(--space-1);
    border-radius: 8px;
    min-width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    transform: translate(5px, -5px);
}

.fixfactor-header .ff-search-button:hover {
    background: var(--chrome-fill-hover);
    border-color: var(--action);
    color: var(--action);
}


/*
 * Search panel.
 *
 * What this replaces, and why it felt slower than the quote dialog on the
 * device pages: the overlay was faded in with `transition: opacity 0.3s` while
 * carrying a backdrop-filter. Animating the opacity of a layer that blurs what
 * is behind it means the browser composites scrim and blur through the same
 * ramp, and the two do not arrive together - the darkness lands first and the
 * blur catches up. A second transition on backdrop-filter sat on top of that,
 * animating a value that never changed.
 *
 * Now the panel is the <dialog>. Opened with showModal() it is painted in the
 * top layer, so no z-index and no stacking-context risk; ::backdrop is painted
 * by the browser in the same frame, so the blur cannot lag the scrim. The
 * scrim itself is owned once, in base.css, for every dialog on the site.
 *
 * The UA gives a modal dialog inset: 0 and margin: auto. Overriding the top
 * margin and leaving the rest auto anchors the panel 80px down and centres it.
 */
.fixfactor-header .ff-search-modal {
    display: none;
    flex-direction: column;
    margin: 80px auto auto;
    width: calc(100% - 2 * var(--space-5));
    max-width: 920px;
    max-height: 85vh;
    padding: 0;
    border: none;
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--content);
    box-shadow:
        0 20px 60px var(--shadow-colour-lg),
        0 10px 30px var(--shadow-colour-lg);
    overflow: hidden;
}

.fixfactor-header .ff-search-modal[open] {
    display: flex;
}

/* 44px hit area, 20px glyph. The box used to be 20x20 — under the 24x24 minimum
   target size, on the one control that dismisses a full-screen modal. Offsets are
   pulled in by 12px so the cross itself has not moved. */
.fixfactor-header .ff-search-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 44px;
    height: 44px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--content);
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    padding: 0;
}

.fixfactor-header .ff-search-close .ff-svg-icon {
    width: 20px;
    height: 20px;
}

.fixfactor-header .ff-search-close:hover {
    opacity: 0.5;
}

.fixfactor-header .ff-search-form-wrapper {
    padding: var(--space-16) var(--space-8) var(--space-8);
    background: var(--surface);
    flex-shrink: 0;
    position: relative;
}

.fixfactor-header .ff-search-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.fixfactor-header .ff-search-border-animation {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* Must match .ff-search-input - this layer sits directly underneath it. */
    border-radius: var(--radius-input);
    background: linear-gradient(90deg, var(--accent), var(--accent-warm), var(--accent));
    background-size: 200% 100%;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
    pointer-events: none;
}

.fixfactor-header .ff-search-form.ff-searching .ff-search-border-animation {
    opacity: 1;
    animation: ff-gradient-border 2s linear infinite;
}

@keyframes ff-gradient-border {
    0% { background-position: 200% 0%; }
    100% { background-position: -200% 0%; }
}

.fixfactor-header .ff-search-icon {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--accent);
    pointer-events: none;
    transition: all 0.3s ease;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fixfactor-header .ff-search-icon .ff-svg-icon {
    width: 20px;
    height: 20px;
}

.fixfactor-header .ff-search-input {
    width: 100%;
    padding: var(--space-5) 110px var(--space-5) 56px;
    font-size: var(--text-lg);
    font-weight: 500;
    border: 2.5px solid var(--accent);
    border-radius: var(--radius-input);
    outline: none;
    transition: all 0.3s ease;
    background: var(--surface);
    font-family: inherit;
    position: relative;
    z-index: 2;
    color: var(--content);
    letter-spacing: -0.2px;
    box-shadow: none;
}

/*
 * The search field is the one header control that already wears a permanent
 * 2.5px brand border. The generic header focus ring lands 2px outside it, so
 * clicking into the field drew a second frame around the first - two
 * concentric teal lines with a gap between them.
 *
 * Focus is carried by the border itself instead: darker, and a hair thicker
 * through an inset ring rather than an offset outline. One line around the
 * field, in both states, and the change on focus is still 4.6:1 against white
 * and obvious against the resting #00aac4.
 */
.fixfactor-header .ff-search-input:focus,
.fixfactor-header .ff-search-input:focus-visible {
    outline: none;
    border-color: var(--action);
    box-shadow: inset 0 0 0 1px var(--action);
}

.fixfactor-header .ff-search-input::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
.fixfactor-header .ff-search-input::-webkit-search-decoration { -webkit-appearance: none; display: none; }
.fixfactor-header .ff-search-input::-ms-clear { display: none; }

.fixfactor-header .ff-search-input::placeholder {
    color: var(--content-secondary);
    font-weight: 400;
}

.fixfactor-header .ff-search-input:focus ~ .ff-search-icon { color: var(--accent); }

.fixfactor-header .ff-search-status-indicator {
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    display: none;
    align-items: center;
    color: var(--accent);
    font-size: var(--text-xs);
    font-weight: 500;
    z-index: 3;
}

.fixfactor-header .ff-search-form.ff-searching .ff-search-status-indicator { display: flex; }

.fixfactor-header .ff-search-clear {
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    background: var(--content-secondary);
    border: none;
    cursor: pointer;
    padding: 0;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 3;
    width: 24px;
    height: 24px;
    border-radius: var(--radius-pill);
    transition: background 0.2s ease;
    color: var(--surface);
}

.fixfactor-header .ff-search-clear:hover {
    background: var(--content-strong);
}

/* The glyph used to be a literal '×' in a ::before — the sprite carries a real
   icon, so use it. No unicode icons on this site. */
.fixfactor-header .ff-search-clear .ff-svg-icon {
    width: 13px;
    height: 13px;
}

.fixfactor-header .ff-search-spinner {
    width: 20px;
    height: 20px;
    border: 3px solid var(--wash-brand-med);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: ff-spinner-rotate 0.8s linear infinite;
}

@keyframes ff-spinner-rotate {
    to { transform: rotate(360deg); }
}

.fixfactor-header .ff-search-hints {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-3);
    flex-wrap: wrap;
}

.fixfactor-header .ff-search-hints-label {
    font-size: var(--text-xs);
    color: var(--content-secondary);
    font-weight: 500;
}

.fixfactor-header .ff-search-hint-chip {
    font-size: var(--text-xs);
    padding: var(--space-2) var(--space-3);
    background: var(--wash-brand-soft);
    border: none;
    border-radius: var(--radius-tag);
    color: var(--action);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
}

.fixfactor-header .ff-search-hint-chip:hover {
    background: var(--chrome-fill-hover);
    color: var(--action-hover);
}

.fixfactor-header .ff-search-form.ff-has-input .ff-search-hints {
    display: none;
}

.fixfactor-header .ff-search-results {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
}

.fixfactor-header .ff-search-results::-webkit-scrollbar { width: 8px; }
.fixfactor-header .ff-search-results::-webkit-scrollbar-track { background: var(--surface-alt); }
.fixfactor-header .ff-search-results::-webkit-scrollbar-thumb { background: var(--border-neutral); border-radius: 4px; }
.fixfactor-header .ff-search-results::-webkit-scrollbar-thumb:hover { background: var(--content-secondary); }

.fixfactor-header .ff-search-results-inner { padding: 0 var(--space-8) var(--space-6) var(--space-8); }

.fixfactor-header .ff-search-section:last-child { margin-bottom: 0; }

/*
 * The markup already says "Repair Services" and "Information & Resources" in
 * title case; this used to shout them back in uppercase with tracking. The
 * footer column headings lost the same treatment on 2 Aug for the same reason -
 * SS1 lists UPPERCASE among the things this brand does not do, and a divider
 * rule plus a weight step already separates a section from its rows.
 */
.fixfactor-header .ff-search-section-title {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--content);
    margin-bottom: var(--space-4);
    margin-top: 0;
    display: flex;
    align-items: center;
    gap: var(--space-4);
    font-family: inherit;
}

.fixfactor-header .ff-search-section-title::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border-neutral);
}

.fixfactor-header .ff-search-item {
    display: flex;
    align-items: center;
    padding: var(--space-4) var(--space-5);
    margin-bottom: var(--space-3);
    background: var(--surface);
    border: 2px solid var(--surface-fill);
    border-radius: var(--radius);
    text-decoration: none;
    transition: 0.2s ease;
    position: relative;
}

.fixfactor-header .ff-search-item:hover {
    border-color: var(--action);
    background: var(--chrome-fill-hover);
}

/*
 * No plate. A tinted 48px disc behind a 24px line icon is a second shape
 * competing with the row it labels, and it is not what the rest of the header
 * does - the mega menu sets the same icons bare against the card. Dropping it
 * also removes the only place in the header where a circle appears.
 */
.fixfactor-header .ff-search-item-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    margin-right: var(--space-4);
    flex-shrink: 0;
}

.fixfactor-header .ff-search-item-icon .ff-svg-icon {
    color: var(--accent);
    width: 24px;
    height: 24px;
}

.fixfactor-header .ff-search-item-content {
    flex: 1;
    min-width: 0;
}

/*
 * The row recedes and the match steps forward. Base weight 500 in body ink,
 * the matched run 700 in full ink - so "iPhone 13" reads out of "iPhone 13
 * Charging Port Repair" without a coloured block behind it. See the mark rule.
 */
.fixfactor-header .ff-search-item-title {
    font-size: var(--text-base);
    font-weight: 500;
    color: var(--content-body);
    margin-bottom: 3px;
    margin-top: 0;
    line-height: 1.3;
    font-family: inherit;
}

/*
 * The match highlight was solid --accent-warm. Amber is the rarest colour in
 * this palette and the spec says to spend it sparingly; a query like
 * "iphone 13" put ten solid amber blocks on screen at once and the list read
 * like an error state. Weight carries the match now, over the faintest teal.
 */
/*
 * THE MATCH.
 *
 * Three things carry it, in the order a reader notices them: the unmatched text
 * steps back to body ink at 500, the matched run comes forward to full ink at
 * 700, and a wash of the palette's lightest teal sits behind it. Any one of the
 * three would work on its own; together they survive a glance.
 *
 * It used to be solid --accent-warm. Amber is the rarest colour here and the
 * spec says to spend it sparingly - "iphone 13" put ten solid blocks on screen
 * and the list read as an error state.
 *
 * The padding is cancelled by an equal negative margin. Horizontal padding on a
 * <mark> pushes the text either side of it, so "iPhone 13 Back Glass Repair"
 * came out with what looked like broken word spacing; this way the wash extends
 * past the glyphs without moving anything.
 */
.fixfactor-header .ff-search-item-title mark,
.fixfactor-header .ff-search-item-excerpt mark {
    background: var(--chrome-fill-hover);
    color: var(--content);
    font-weight: 700;
    padding: 0.1em 0.22em;
    margin: 0 -0.22em;
    border-radius: 3px;
}

.fixfactor-header .ff-search-item-excerpt mark { color: var(--content-body); }

/*
 * Price row. Three states, three treatments - see fixfactor_search_price_markup()
 * for why they are three: an amount, an amount with a condition, and no amount.
 * Baseline alignment, so "From" sits on the same line as the digits rather than
 * being centred against them.
 */
.fixfactor-header .ff-search-item-price {
    display: flex;
    align-items: baseline;
    gap: var(--space-1);
    margin: 0;
    font-family: inherit;
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--action);
}

.fixfactor-header .ff-price {
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--action);
}

/* A condition on the number, not part of it. */
.fixfactor-header .ff-price-qual {
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--content-secondary);
}

/*
 * Not a price. Styling it like one - accent, 700, same size - made every
 * quote-only repair look as if it had a price you could not read. It is the
 * row's status until you open it, so it reads as status: quiet, regular weight,
 * and it warms to the accent with the rest of the row on hover.
 */
.fixfactor-header .ff-price-quote {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--content-secondary);
    transition: color 0.18s var(--ease-material);
}

.fixfactor-header .ff-search-item:hover .ff-price-quote { color: var(--action); }

/* Information rows use one symbol for the whole section - they are pages, not
   devices - and it exists so the two sections share a left edge. */
.fixfactor-header .ff-search-item-icon.ff-is-page .ff-svg-icon {
    color: var(--content-secondary);
}

.fixfactor-header .ff-search-item:hover .ff-search-item-icon.ff-is-page .ff-svg-icon {
    color: var(--accent);
}

.fixfactor-header .ff-search-item-excerpt {
    font-size: var(--text-sm);
    color: var(--content-secondary);
    line-height: 1.4;
    margin: 0;
    font-family: inherit;
}



/*
 * Search notice: the answer, when the answer is not a list.
 *
 * Same left-aligned block as a result row rather than the centred empty state,
 * because it is content the customer is meant to read and act on, not a
 * shrug. The links are the same outlined control as everywhere else in the
 * header, at tag scale.
 */
.fixfactor-header .ff-search-notice {
    padding: var(--space-4);
    margin-bottom: var(--space-3);
    background: var(--surface-alt);
    border: 1px solid var(--chrome-border);
    border-radius: var(--radius);
}

.fixfactor-header .ff-search-notice-title {
    margin: 0 0 var(--space-2);
    font-weight: 700;
    font-size: var(--text-sm);
    color: var(--content);
}

.fixfactor-header .ff-search-notice-text {
    margin: 0;
    font-size: var(--text-sm);
    line-height: 1.5;
    color: var(--content-secondary);
}

.fixfactor-header .ff-search-notice-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-3);
}

.fixfactor-header .ff-search-notice-link {
    padding: var(--space-1) var(--space-3);
    border: 2px solid var(--action);
    border-radius: var(--radius-tag);
    color: var(--action);
    text-decoration: none;
    font-size: var(--text-xs);
    font-weight: 600;
    transition: var(--transition);
}

.fixfactor-header .ff-search-notice-link:hover {
    background: var(--chrome-fill-hover);
    border-color: var(--action-hover);
    color: var(--action-hover);
}

.fixfactor-header .ff-search-no-results {
    text-align: center;
    padding: var(--space-8) var(--space-6);
    color: var(--content-body);
    background: var(--chrome-fill-faint);
    border-radius: var(--radius);
    margin: var(--space-5);
}

.fixfactor-header .ff-search-no-results .ff-svg-icon {
    font-size: 56px;
    width: 56px;
    height: 56px;
    margin-bottom: var(--space-5);
    opacity: 0.5;
    color: var(--accent);
}

.fixfactor-header .ff-search-no-results p {
    font-size: var(--text-lg);
    margin-bottom: var(--space-3);
    margin-top: 0;
    color: var(--content);
    font-weight: 600;
    font-family: inherit;
}

.fixfactor-header .ff-search-no-results p:last-child {
    font-size: var(--text-base);
    font-weight: 400;
    color: var(--content-secondary);
}

.fixfactor-header .ff-search-contact-footer {
    padding: var(--space-6) var(--space-8);
    flex-shrink: 0;
    border-top: 1px solid var(--border-neutral);
}

.fixfactor-header .ff-contact-footer-content {
    text-align: center;
    color: var(--content-secondary);
    font-size: var(--text-sm);
    line-height: 1.5;
}

.fixfactor-header .ff-footer-link {
    color: var(--action);
    text-decoration: none;
    font-weight: 600;
    transition: opacity 0.2s ease;
}

.fixfactor-header .ff-footer-link:hover {
    opacity: 0.7;
}

/* The wrapper only ever renders below 991px, where the toggle is a 44px box.
   It used to be 30x24 with 3px bars — wider than the 30.6px button that held
   them. currentColor lets the bars follow the button's own hover state. */
/*
 * The hamburger is drawn, not iconised, so it has to be tuned to match the SVG
 * family beside it: 20px wide like the other icons at this size, 2px bars on the
 * same stroke weight, 6px apart.
 */
.fixfactor-header .ff-menu-icon-wrapper {
    width: 20px;
    height: 14px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.fixfactor-header .ff-menu-icon-bar {
    display: block;
    width: 100%;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transform-origin: center;
    transition: transform 0.22s var(--ease-material), opacity 0.14s linear;
}

/*
 * No hamburger-to-cross animation here on purpose. Measured on staging: the open
 * drawer is a full-viewport panel at z-50 and covers the toggle at z-10
 * completely, so that animation would play where nobody can see it. The drawer's
 * own close button is what the user meets instead - see .ff-mobile-menu-close.
 */

.fixfactor-header .ff-mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--overlay-scrim);
    z-index: 40;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
}

.fixfactor-header .ff-mobile-menu-overlay.ff-active {
    opacity: 1;
    visibility: visible;
}

.fixfactor-header .ff-mobile-menu-drawer {
    position: fixed;
    top: 0;
    right: -100%;
    width: 85%;
    max-width: 380px;
    height: 100vh;
    height: 100dvh;
    background: var(--surface);
    z-index: 50;
    box-shadow: -5px 0 25px var(--shadow-colour-lg);
    transition: right 0.4s cubic-bezier(0.77, 0, 0.175, 1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.fixfactor-header .ff-mobile-menu-drawer.ff-active {
    right: 0;
}

.fixfactor-header .ff-mobile-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--overlay-soft);
    flex-shrink: 0;
}

/* The link wraps a 32px image, which left a 17px-tall hit area. The drawer header
   is already 44px tall because of the close button, so this costs no layout. */
.fixfactor-header .ff-mobile-logo {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

.fixfactor-header .ff-mobile-logo img {
    /* Definite height for the same reason as the desktop logo - see header-critical.css. */
    height: 32px;
    width: auto;
}

/*
 * Close belongs to the same family as the action row it replaces on screen:
 * 44px, outlined, radius 12. It used to be the only borderless, circular,
 * grey-on-white control in the whole header - a different object doing the same
 * kind of job.
 */
.fixfactor-header .ff-mobile-menu-close {
    width: 44px;
    height: 44px;
    background: none;
    border: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--content);
    cursor: pointer;
    transition: transform 0.18s var(--ease-material),
                border-color 0.2s var(--ease-material),
                color 0.2s var(--ease-material);
}

.fixfactor-header .ff-mobile-menu-close:hover { color: var(--action); }

.fixfactor-header .ff-mobile-menu-close:active {
    transform: scale(0.98);
    transition-duration: 0.06s;
}

.fixfactor-header .ff-mobile-menu-close .ff-svg-icon { width: 20px; height: 20px; }

.fixfactor-header .ff-mobile-menu-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--space-3) 0;
}

.fixfactor-header .ff-mobile-menu-list { list-style: none; }

/*
 * One vertical line at 20px for everything in the drawer.
 *
 * The lists here were never reset, so the browser's default 40px ul padding was
 * still in force: the menu sat 40px in from the left while its toggles stayed
 * 8px from the right, and the submenu inherited a second 40px on top of that -
 * measured on staging, category labels landed at 60px and their rows at 112px.
 * Nothing lined up with anything.
 */
.fixfactor-header .ff-mobile-menu-list,
.fixfactor-header .ff-mobile-submenu-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.fixfactor-header .ff-mobile-menu-item {
    border-bottom: 1px solid var(--overlay-soft);
    position: relative;
}

.fixfactor-header .ff-mobile-menu-title {
    display: block;
    padding: var(--space-4) 60px var(--space-4) var(--space-5);
    color: var(--content);
    text-decoration: none;
    font-size: var(--text-base);
    font-weight: 700;
}

.fixfactor-header .ff-mobile-submenu-toggle {
    position: absolute;
    right: 8px;
    /*
     * Offset from the top, not centred. The positioning context is
     * .ff-mobile-menu-item, which grows to include the open submenu - `top: 50%`
     * therefore sends the toggle to the middle of the expanded block (measured:
     * 349px instead of 111px). The title row is 15 + 21 + 15 = 51px and the
     * control is 44px, so half the difference centres it against the row.
     */
    top: 3.5px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    /*
     * No box. A disclosure control in a list of links is a glyph with a hit
     * area, not a button with a border - the border gave it the same rank as
     * the drawer's close control, which is a different kind of action.
     */
    background: none;
    border: 0;
    padding: 0;
    color: var(--content-secondary);
    cursor: pointer;
    transition: color 0.2s var(--ease-material);
}

/*
 * A chevron that turns over. The plus rotating 45 degrees produced a cross,
 * and a cross means "close" - with the drawer's own close button on screen,
 * an expanded section was marked with the same glyph, in the same box, as the
 * control that dismisses the whole menu. Half a turn of a chevron is the one
 * accordion signal nobody has to learn.
 */
.fixfactor-header .ff-mobile-submenu-toggle .ff-svg-icon {
    width: 18px;
    height: 18px;
    transition: transform 0.22s var(--ease-material);
}

.fixfactor-header .ff-mobile-submenu-toggle:hover { color: var(--action); }
.fixfactor-header .ff-mobile-submenu-toggle:active .ff-svg-icon { transform: scale(0.9); }
.fixfactor-header .ff-mobile-submenu-toggle[aria-expanded="true"] { color: var(--action); }
.fixfactor-header .ff-mobile-submenu-toggle[aria-expanded="true"] .ff-svg-icon { transform: rotate(180deg); }

/* 8px here + 12px on each row puts submenu text on the same 20px line as the
   titles above it, while rows keep a full-width hit area and hover fill. */
.fixfactor-header .ff-mobile-submenu {
    display: none;
    padding: 0 var(--space-2) var(--space-4);
    background: var(--surface);
}

.fixfactor-header .ff-mobile-submenu.ff-active { display: block; }

/* Padding, not margin: it has to sit on the same line as the row text below,
   which gets its indent from padding. Micro-label spec is 11-13px / 500-600 /
   +0.02em - this was 13/700/+0.04em. */
.fixfactor-header .ff-mobile-submenu-category .ff-mobile-cat-label {
    font-size: var(--text-xs);
    font-weight: 600;
    margin: var(--space-3) 0 var(--space-1);
    padding-left: var(--space-3);
    color: var(--content-secondary);
    letter-spacing: 0.01em;
}

.fixfactor-header .ff-mobile-submenu-list a {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-3);
    min-height: 44px;
    color: var(--content);
    text-decoration: none;
    font-size: var(--text-sm);
    border-radius: var(--radius);
    transition: background-color 0.16s var(--ease-material),
                color 0.16s var(--ease-material);
}

.fixfactor-header .ff-mobile-submenu-list a:active {
    background: var(--chrome-fill-hover);
    color: var(--action);
}

@media (hover: hover) {
    .fixfactor-header .ff-mobile-submenu-list a:hover {
        background: var(--chrome-fill-hover);
        color: var(--action);
    }
}

.fixfactor-header .ff-mobile-submenu-list .ff-svg-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--accent);
}


.fixfactor-header .ff-mobile-action-buttons-wrapper { display: contents; }

.fixfactor-header .ff-mobile-action-buttons-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
}

/*
 * Every control in the drawer footer is 56px tall and carries a 2px border,
 * filled or not. Measured before this change: How It Works 56, Get a Quote 56,
 * View Cart 58, Book 48 — four buttons stacked on top of each other, no two the
 * same. The height came out of padding plus whatever the line-height happened to
 * be, so it drifted whenever the type size did. It is stated once now.
 *
 * The border is on the filled buttons too. It contributes nothing visually
 * there; it keeps the box maths identical so a fill can never come out 4px
 * shorter than the outline beside it.
 */
.fixfactor-header .ff-mobile-action-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-3);
    text-decoration: none;
    background: var(--surface);
    color: var(--action);
    border: 2px solid var(--action);
    border-radius: var(--radius);
    font-weight: 600;
    font-size: var(--text-sm);
    transition: 0.25s ease;
    cursor: pointer;
    min-height: 56px;
}

@media (hover: hover) {
    .fixfactor-header .ff-mobile-action-button:hover {
        background: var(--chrome-fill-hover);
        color: var(--action-hover);
        border-color: var(--action-hover);
    }
}

.fixfactor-header .ff-mobile-action-button .ff-svg-icon { width: 18px; height: 18px; flex-shrink: 0; }



/*
 * Drawer cart: the same move as the header button, adjusted for the surface it
 * sits on. A full-width outline alone reads as inert at this size, so it keeps a
 * faint amber wash — enough to separate it from the two neutral rows above it
 * without becoming a second slab competing with Get a Quote, which stays the
 * one filled control in the drawer.
 */
.fixfactor-header .ff-mobile-cart-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--space-3) var(--space-4);
    min-height: 56px;
    background: color-mix(in srgb, var(--accent-warm) 14%, var(--surface));
    border: 2px solid var(--accent-warm);
    color: var(--content);
    text-decoration: none;
    border-radius: var(--radius);
    font-weight: 600;
    transition: 0.25s ease;
}

@media (hover: hover) {
    .fixfactor-header .ff-mobile-cart-button:hover {
        background: color-mix(in srgb, var(--accent-warm) 26%, var(--surface));
        border-color: var(--accent-warm-hover);
    }
}

.fixfactor-header .ff-mobile-cart-button .ff-svg-icon { width: 16px; height: 16px; }

.fixfactor-header .ff-mobile-cart-total { font-size: var(--text-base); }

/*
 * One gap instead of three margins. The rows used to space themselves — 16px
 * under the button pair, 16px under the cart, 12px above Book — so the rhythm
 * depended on which of them happened to be present. The cart row and the
 * opening status both hide themselves when they have nothing to say, and a flex
 * gap simply closes up behind them.
 *
 * The hairline was var(--overlay-soft), the one literal colour left in this file.
 */
.fixfactor-header .ff-mobile-menu-footer {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4);
    padding-bottom: calc(15px + env(safe-area-inset-bottom, 20px));
    border-top: 1px solid var(--border-neutral);
    background: var(--surface-alt);
    flex-shrink: 0;
    margin-top: auto;
}

.fixfactor-header .ff-mobile-contact-actions {
    display: contents;
}

.fixfactor-header .ff-mobile-action-buttons {
    display: flex;
    gap: var(--space-3);
}

.fixfactor-header .ff-mobile-cta {
    padding: var(--space-3) var(--space-5);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    background: var(--surface);
    color: var(--content);
    text-decoration: none;
    font-size: var(--text-sm);
    font-weight: 600;
    border-radius: var(--radius);
    border: 2px solid var(--border-neutral);
    min-height: 56px;
}

.fixfactor-header .ff-mobile-cta .ff-svg-icon { width: 17px; height: 17px; }

/*
 * Book is the filled control in the drawer, and the only one. It sits last,
 * full width, after the two secondary actions and after the cart — the drawer
 * reads top to bottom as browse, then decide, then book.
 *
 * How It Works and Get a Quote are peers and are now styled as peers: same
 * outline, same weight, no reason for one of them to look like the decision.
 * Before this, Get a Quote was filled and Book was not, so the drawer pointed
 * at the wrong thing.
 */
.fixfactor-header .ff-mobile-cta.ff-book {
    flex: 1;
    background: var(--action);
    color: var(--surface);
    border-color: var(--action);
}

@media (hover: hover) {
    .fixfactor-header .ff-mobile-cta.ff-book:hover {
        background: var(--action-hover);
        border-color: var(--action-hover);
        color: var(--surface);
    }
}

@media (max-width: 1400px) {
    .fixfactor-header .ff-mega-menu { max-width: calc(100vw - 40px); }
}

@media (max-width: 1199px) {
    .fixfactor-header .ff-mega-menu-inner { padding: var(--space-5) var(--space-4); }
    .fixfactor-header .ff-mega-menu-column { padding: 0 var(--space-4); }
}

@media (max-width: 991px) {
    .fixfactor-header .ff-header-buttons { margin-left: auto; }
    .fixfactor-header .ff-cart-button,
    .fixfactor-header .ff-search-button { width: 44px; height: 44px; }
}

@media (max-width: 767px) {
    /*
     * The action row (sizing, fills, outlines, icon sizes, hamburger bars) is
     * defined once in header-critical.css so it paints with the first frame.
     * Nothing about those four buttons belongs here any more.
     */

    /* Full screen. One element now, so one rule. */
    .fixfactor-header .ff-search-modal {
        margin: 0;
        width: 100%;
        max-width: none;
        height: 100dvh;
        max-height: 100dvh;
        border-radius: 0;
    }

    .fixfactor-header .ff-search-close {
        top: 12px;
        right: 12px;
    }

    .fixfactor-header .ff-search-close .ff-svg-icon {
        width: 20px;
        height: 20px;
    }
    
    .fixfactor-header .ff-search-form-wrapper { padding: 56px var(--space-5) var(--space-6); }
    
    .fixfactor-header .ff-search-input {
        font-size: var(--text-lg);
        padding: var(--space-5) 55px var(--space-5) 50px;
        font-weight: 600;
        border-width: 2px;
        border-radius: var(--radius-input);
    }

    .fixfactor-header .ff-search-input::placeholder { font-size: var(--text-lg); }
    
    .fixfactor-header .ff-search-icon { left: 20px; font-size: var(--text-lg); }

    .fixfactor-header .ff-search-clear {
        right: 20px;
    }

    .fixfactor-header .ff-search-status-indicator {
        right: 16px;
        font-size: var(--text-2xs);
    }

    .fixfactor-header .ff-search-hints {
        margin-top: var(--space-3);
        gap: var(--space-2);
    }

    .fixfactor-header .ff-search-hints-label {
        font-size: var(--text-xs);
    }

    .fixfactor-header .ff-search-hint-chip {
        font-size: var(--text-xs);
        /* 5, not --space-1: at 4px the chip measures 23px tall and drops under
           the 24px target size WCAG 2.5.8 asks for. Measured 3 Aug 2026. */
        padding: 5px var(--space-3);
    }

    .fixfactor-header .ff-search-results-inner {
        padding: 0 var(--space-5);
        padding-bottom: 80px;
    }
    
    
    .fixfactor-header .ff-search-item {
        padding: var(--space-2) var(--space-3);
        margin-bottom: var(--space-2);
        border-radius: var(--radius);
    }
    
    .fixfactor-header .ff-search-item-icon {
        width: 32px;
        height: 32px;
        margin-right: var(--space-3);
        border-radius: var(--radius-pill);
    }
    
    .fixfactor-header .ff-search-item-icon .ff-svg-icon {
        width: 20px;
        height: 20px;
        font-size: var(--text-xl);
    }
    
    .fixfactor-header .ff-search-item-title {
        font-size: var(--text-sm);
        margin-bottom: 2px;
    }
    
    .fixfactor-header .ff-search-item-price { font-size: var(--text-xs); }
    
    .fixfactor-header .ff-search-item-excerpt {
        font-size: var(--text-xs);
        line-height: 1.3;
    }
    
    .fixfactor-header .ff-search-section-title {
        font-size: var(--text-2xs);
        margin-bottom: var(--space-3);
    }
    
    .fixfactor-header .ff-search-contact-footer {
        position: sticky;
        bottom: 0;
        padding: var(--space-3) var(--space-5) var(--space-5) var(--space-5);
        z-index: 62;
    }
    
    .fixfactor-header .ff-search-contact-footer {
        padding: var(--space-5) var(--space-5);
    }
}

@media (max-width: 480px) {
    .fixfactor-header .ff-logo img { height: 34.5px; }
    
    .fixfactor-header .ff-mobile-menu-drawer {
        width: 100%;
        max-width: none;
    }
    
    .fixfactor-header .ff-search-item { padding: var(--space-2) var(--space-3); }
    
    .fixfactor-header .ff-search-item-icon {
        width: 28px;
        height: 28px;
        margin-right: var(--space-2);
    }
    
    .fixfactor-header .ff-search-item-icon .ff-svg-icon {
        width: 14px;
        height: 14px;
        font-size: var(--text-sm);
    }
    
    .fixfactor-header .ff-search-item-title { font-size: var(--text-xs); }
    
    .fixfactor-header .ff-search-item-price { font-size: var(--text-xs); }
    
    .fixfactor-header .ff-search-item-excerpt { font-size: var(--text-2xs); }
}

@supports (padding: max(0px)) {
    .fixfactor-header .ff-mobile-menu-footer {
        padding-bottom: max(15px, env(safe-area-inset-bottom));
    }
    
    @media (max-width: 767px) {
        .fixfactor-header .ff-search-contact-footer {
            padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
        }
        
        .fixfactor-header .ff-search-results-inner {
            padding-bottom: max(80px, calc(60px + env(safe-area-inset-bottom)));
        }
    }
}

@media (prefers-reduced-motion: reduce) {
    .fixfactor-header *,
    .fixfactor-header *::before,
    .fixfactor-header *::after {
        animation-duration: 0.01ms;
        animation-iteration-count: 1;
        transition-duration: 0.01ms;
    }
}

/* ==========================================================================
   Mobile action row — three controls, one of them primary
   --------------------------------------------------------------------------
   Measured at 390px: four 44x44 buttons with 2px borders spanned 200px of the
   bar. Four identical outlines make four equal-looking chips, which is the
   opposite of what an action row is for. Only the booking button keeps a
   shape now; the rest are glyphs with the same 44px target.

   Search moves into the drawer, where it gets a full-width row and a word,
   instead of a magnifier the width of a thumbnail.
   ========================================================================== */
@media (max-width: 991px) {
    .fixfactor-header .ff-search-button:not(.ff-drawer-search) { display: none; }

    .fixfactor-header .ff-phone-button,
    .fixfactor-header .ff-mobile-menu-toggle {
        background: none;
        border: 0;
        box-shadow: none;
        color: var(--content);
    }

    .fixfactor-header .ff-phone-button:hover,
    .fixfactor-header .ff-mobile-menu-toggle:hover { color: var(--action); }

    /*
     * Book: the same outlined --action control as on desktop and as in the
     * drawer, so a visitor who meets it on a phone, in the drawer and later on
     * a laptop meets one button rather than three.
     *
     * It was filled teal here on the argument that the paid action should be
     * the loud one. Once the cart stopped being a solid amber block, that left
     * a single filled slab in a row of outlines, and the row read as an
     * accident rather than a hierarchy. Emphasis now comes from the border
     * colour and the label, which is what carries it at every other width.
     */
    .fixfactor-header .ff-book-button {
        width: auto;
        padding: 0 var(--space-4);
        gap: var(--space-2);
        background: var(--surface);
        border-color: var(--action);
        color: var(--action);
        font-size: var(--text-base);
        font-weight: 700;
    }

    .fixfactor-header .ff-book-button span {
        display: inline;
        white-space: nowrap;
    }

    /* One word on a phone bar. The full phrase stays in aria-label. */
    .fixfactor-header .ff-book-button .ff-book-tail { display: none; }

    .fixfactor-header .ff-book-button .ff-svg-icon { display: inline-block; color: inherit; }
    .fixfactor-header .ff-book-button:hover {
        background: var(--chrome-fill-faint);
        border-color: var(--action-hover);
        color: var(--action-hover);
    }
}

/* Drawer search: a row you can read, at the top of the list. */
.fixfactor-header .ff-drawer-search {
    display: none;
}

@media (max-width: 991px) {
    .fixfactor-header .ff-drawer-search {
        display: flex;
        align-items: center;
        gap: var(--space-3);
        width: calc(100% - 40px);
        margin: var(--space-1) var(--space-5) var(--space-3);
        padding: var(--space-3) var(--space-4);
        min-height: 46px;
        background: var(--surface-alt);
        border: 1px solid var(--border-neutral);
        border-radius: var(--radius-input);
        color: var(--content-secondary);
        font-size: var(--text-base);
        text-align: left;
        cursor: pointer;
        transition: border-color 0.2s var(--ease-material), color 0.2s var(--ease-material);
    }
    .fixfactor-header .ff-drawer-search:hover { border-color: var(--border-active); color: var(--content); }
    .fixfactor-header .ff-drawer-search .ff-svg-icon { width: 18px; height: 18px; flex: 0 0 auto; }
}


/* The scheme switch in the drawer header, beside Close. Same size and weight as
   that button so the pair reads as one set of controls; it is chrome, not a call
   to action, which is why it is not in the row with "Book Your Visit". */
.fixfactor-header .ff-mobile-header-tools {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.fixfactor-header .ff-mobile-theme {
    width: 44px;
    height: 44px;
    background: none;
    border: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--content-secondary);
    cursor: pointer;
    border-radius: var(--radius-tag);
    transition: var(--transition);
}
.fixfactor-header .ff-mobile-theme:hover { color: var(--action); background: var(--chrome-fill-hover); }
.fixfactor-header .ff-mobile-theme .ff-svg-icon { width: 18px; height: 18px; }