/*
 * Global marketplace header styles, and the header search dropdown.
 *
 * Moved verbatim out of the inline <style> blocks in
 *   components/layouts/header/marketplace-styles.blade.php
 *   components/layouts/header/search-styles.blade.php
 * which emitted these rules on every page of both storefronts. They are
 * byte-identical on every template and change only when the header does, so
 * inline they cost roughly 10 KB gzipped per page view that a visitor could
 * not cache. Here they are fetched once and reused for a week.
 *
 * Cascade order is preserved: the <link> replaces the first <style> in place,
 * and the dropdown rules follow the header rules exactly as the include did.
 *
 * The template fingerprints this file with filemtime, so it has to be written
 * in a way that moves the modification time -- not copied with -p.
 */
    .op-header {
        /* Tokens formerly inherited from `.op-home`; the header carries its own. */
        --op-red: var(--op-brand-primary);
        --op-red-dark: var(--op-brand-primary-dark);
        /* The brand accent. Named for its role rather than a colour, which is
           just as well: it has held a blue, then the brand red, and now the
           brand blue. Pages rendering inside the header's subtree read it as
           `--op-brand`. The value itself lives in one place for the whole
           site — see components/layouts/brand.blade.php. */
        --op-brand: var(--op-brand-primary);
        --op-brand-dark: var(--op-brand-primary-dark);
        /* The CTA is near-black so it reads as an action rather than another
           navigation link; the brand red stays on the wordmark and the plus
           badge. */
        --op-cta: #111827;
        --op-cta-dark: #1d2943;
        --op-cta-fill: #03117C;
        --op-cta-fill-dark: #020C5C;
        /*
            The nav bar's ground. It is stated separately from `--op-cta`, which
            happens to hold the same near-black, so that restyling the bar can
            never drag the Sell Your Car button along with it — and so the one
            place the bar's colour is decided is named for the bar.
        */
        --op-navbar: #111827;
        --op-ink: #071636;
        --op-muted: #66728a;
        --op-field: #edeef0;
        --op-field-hover: #e5e7ea;
        --op-line: #e5e7eb;
        --op-soft: #ffffff;

        /*
            The wordmark column is given a width rather than left at `auto` so
            the search field's left edge is the same at every width regardless
            of when the logo file finishes loading. The wordmark renders 93.3px
            wide — 24px tall at the file's 272x70 aspect — so 94px holds it
            without clipping.

            Nothing is measured from this column any more. The nav links and the
            mega menu's rail used to be indented by it, to sit under the search
            field as the artwork has them; the client asked for them under the
            wordmark instead, and they get there by sharing the wordmark's shell
            and gutter rather than by being offset from it.
        */
        --op-brand-col: 94px;
        --op-col-gap: 24px;
        --op-band-height: 30px;
        --op-mega-rail: 124px;

        position: sticky;
        top: 0;
        z-index: 30;
        background: rgba(255, 255, 255, .94);
        backdrop-filter: blur(18px);
        color: var(--op-ink);
        font-family: Roboto, sans-serif;
    }

    .op-header a {
        color: inherit;
        text-decoration: none;
    }

    /*
        Row one only. The nav moved out of this grid when it became a full
        bleed bar of its own; `minmax(0, 1fr)` on the middle column lets the
        field shrink, where a plain `1fr` floors at its content and pushes the
        actions off the right edge on narrow desktops.
    */
    .op-header .op-header__inner {
        display: grid;
        align-items: center;
        grid-template-columns: var(--op-brand-col) minmax(0, 1fr) auto;
        grid-template-areas: "brand search actions";
        column-gap: var(--op-col-gap);
        padding-block: 14px;
    }

    .op-header .op-header__brand {
        grid-area: brand;
    }

    /*
        The file is a 3x raster of the artwork's own geometry, so 24px is its
        natural 1x height.
    */
    .op-header .op-header__brand img {
        display: block;
        width: auto;
        height: 24px;
        object-fit: contain;
    }

    /* ------------------------------------------------------------------
       Search
       ------------------------------------------------------------------ */

    .op-header .op-header__search {
        display: flex;
        grid-area: search;
        min-width: 0;
        max-width: 410px;
        align-items: center;
        gap: 9px;
        height: 38px;
        border-radius: 10px;
        padding-inline: 14px;
        background: var(--op-field);
        transition: background .15s ease;
    }

    .op-header .op-header__search:hover {
        background: var(--op-field-hover);
    }

    .op-header .op-header__search-icon {
        flex-shrink: 0;
        color: #1f2937;
    }

    /*
        Bagisto's compiled Tailwind bundle gives inputs a border, a background
        and a focus ring of its own; the field is a single control here, so the
        input is stripped and the ring is drawn on the wrapper instead.
    */
    .op-header .op-header__search input {
        width: 100%;
        min-width: 0;
        border: 0;
        background: transparent;
        color: var(--op-ink);
        font-family: inherit;
        font-size: 13.5px;
        font-weight: 500;
        outline: none;
        box-shadow: none;
        padding: 0;
    }

    .op-header .op-header__search input::placeholder {
        color: #707070;
        opacity: 1;
    }

    .op-header .op-header__search:focus-within {
        background: var(--op-field-hover);
        outline: 2px solid var(--op-cta);
        outline-offset: 2px;
    }

    /*
        Home Page only, where the field is not rendered at all.

        Desktop needs nothing: the middle column is simply empty, so the
        wordmark stays left and the actions stay right exactly where they
        already were. Under 768 the field has a row of its own, and the named
        row survives the item being absent — a zero height track plus the 8px
        row-gap. Collapsing the areas to one row removes that gap.
    */
    @media (max-width: 767.98px) {
        .op-header.op-header--no-search .op-header__inner {
            grid-template-areas: "brand actions";
            row-gap: 0;
        }
    }

    /* ------------------------------------------------------------------
       Actions
       ------------------------------------------------------------------ */

    .op-header .op-header__actions {
        display: flex;
        grid-area: actions;
        align-items: center;
        gap: 22px;
    }

    .op-header .op-header__action {
        display: grid;
        min-width: 44px;
        justify-items: center;
        gap: 2px;
        color: var(--op-cta);
        font-size: 11px;
        font-weight: 700;
        line-height: 1.15;
        text-align: center;
        white-space: nowrap;
    }

    .op-header .op-header__action svg {
        display: block;
    }

    /*
        The wrapper the Comparisons count hangs off. It stands in the svg's
        place as the anchor's first grid item, so the two rows the anchor lays
        out are the two it always laid out and nothing beside it shifts.
    */
    .op-header .op-header__action-icon {
        position: relative;
        display: block;
    }

    /*
        The count, as a notification mark on the icon's top-right corner.

        Red rather than the brand accent, which is a blue: #ff3f5f is the red
        this site already puts on a mark that means something in its own right,
        and it is stated literally here because every other surface carrying it
        states it literally -- there is no token to reach for.

        Out of flow, so a two-digit count widens the circle without moving the
        icon beneath it or the actions either side. Nothing between here and
        .op-header clips, so the part that overhangs the icon is still drawn,
        and it stays inside the anchor's own box at every width -- the label
        under it is wider than the icon, and where the label is hidden the
        overhang is still shorter than the gap to the next action.
    */
    .op-header .op-header__badge {
        position: absolute;
        top: -6px;
        inset-inline-end: -8px;
        display: inline-flex;
        box-sizing: border-box;
        min-width: 16px;
        height: 16px;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        padding: 0 4px;
        background: #ff3f5f;
        color: #fff;
        font-size: 10px;
        font-weight: 700;
        font-variant-numeric: tabular-nums;
        line-height: 1;
        pointer-events: none;
    }

    /*
        Required: the `display` above would otherwise beat the `hidden`
        attribute's own `display: none` and an empty comparison would render as
        an empty red circle.
    */
    .op-header .op-header__badge[hidden] {
        display: none;
    }

    .op-header .op-header__action:hover {
        color: var(--op-red);
    }

    /*
        Account is marked while the visitor is inside the account area, with the
        same `aria-current="page"` signal and brand accent the nav bar below
        uses for the page it is on.
    */
    .op-header .op-header__action[aria-current="page"] {
        color: var(--op-red);
    }

    /*
        The language switcher.

        A worded control rather than an icon tile, because the word is the whole
        message: العربية means something to someone who cannot read the rest of
        this header, where a globe means "settings are somewhere near here". It
        keeps its wording at every width for the same reason -- the three tiles
        beside it can drop their labels to their icons under 540 and still be
        recognisable, and this cannot.

        Sized off the CTA it sits next to rather than off the tiles, so the two
        controls at this end of the row read as a pair.
    */
    .op-header .op-header__lang {
        display: inline-flex;
        height: 30px;
        align-items: center;
        border: 1px solid color-mix(in srgb, var(--op-cta) 28%, transparent);
        border-radius: 999px;
        padding: 0 12px;
        color: var(--op-cta);
        font-size: 12px;
        font-weight: 700;
        line-height: 1;
        white-space: nowrap;
    }

    .op-header .op-header__lang:hover,
    .op-header .op-header__lang:focus-visible {
        border-color: var(--op-cta);
        background: color-mix(in srgb, var(--op-cta) 7%, transparent);
    }

    .op-header .op-header__cta {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        height: 38px;
        border-radius: 10px;
        padding: 0 16px;
        padding-inline-start: 7px;
        background: var(--op-cta-fill);
        font-size: 13px;
        font-weight: 500;
        white-space: nowrap;
        transition: background .15s ease;
    }

    .op-header .op-header__cta:hover,
    .op-header .op-header__cta:focus-visible {
        background: var(--op-cta-fill-dark);
    }

    /*
        `.op-header a { color: inherit }` above matches at the same specificity
        as a single class would, and Bagisto's own anchor styling reaches the
        CTA on pages outside the homepage, so the label needs the compound
        selector to stay white.
    */
    .op-header a.op-header__cta,
    .op-header a.op-header__cta:hover,
    .op-header a.op-header__cta:focus,
    .op-header a.op-header__cta:visited {
        color: #fff;
    }

    .op-header .op-header__cta-icon {
        display: inline-flex;
        flex-shrink: 0;
        width: 24px;
        height: 24px;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        background: var(--op-red);
        color: #fff;
    }

    /* ------------------------------------------------------------------
       Nav bar
       ------------------------------------------------------------------ */

    /*
        The bar spans the viewport while its links sit at the wordmark's left
        edge, so the colour belongs to a full width band and the alignment to
        the `.op-shell` inside it — the same shell, the same max width and the
        same gutter as the row above, so the first link and the wordmark share
        one vertical line at every viewport rather than agreeing at the width
        someone happened to check. The links carry no padding of their own,
        which is what keeps the line true.

        This element is also the mega menu's hover region and its positioning
        context: the panel hangs off its bottom edge, which is what leaves no
        gap between the trigger and the panel for the cursor to fall through.
    */
    .op-header .op-header__navband {
        position: relative;
        background: var(--op-navbar);
    }

    .op-header .op-header__nav {
        display: flex;
        min-width: 0;
        align-items: center;
        gap: 24px;
        height: var(--op-band-height);
        font-size: 12.5px;
        font-weight: 700;
    }

    /*
        All Cars is a <button> and the rest are links, so the shared item rule
        has to undo the button's user-agent box as well as the compiled
        Tailwind bundle's.
    */
    .op-header .op-header__nav-item {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        border: 0;
        border-radius: 4px;
        background: transparent;
        padding: 0;
        color: #fff;
        font-family: inherit;
        font-size: inherit;
        font-weight: inherit;
        line-height: 1;
        white-space: nowrap;
        cursor: pointer;
        /*
            The resting level sits further below full white than it did while
            this bar was red. Dimmed white on red turned pink, so there was
            little room to move; on near-black it stays neutral, which buys a
            hover step you can actually see. At rest the label is #dbdcde
            against the bar, 12.9:1, and 17.7:1 at full strength.
        */
        opacity: .85;
        transition: opacity .12s ease;
    }

    /*
        Same reason as the CTA above: Bagisto's own anchor colours reach these
        links on pages outside the homepage, and on this near-black bar only
        white will do.
    */
    .op-header a.op-header__nav-item,
    .op-header a.op-header__nav-item:hover,
    .op-header a.op-header__nav-item:focus,
    .op-header a.op-header__nav-item:visited {
        color: #fff;
    }

    .op-header .op-header__nav-item:hover,
    .op-header .op-header__nav-item:focus-visible {
        opacity: 1;
    }

    /*
        The current page is marked with a white underline rather than a colour
        change. The brand red is the obvious candidate now that the bar no
        longer wears it, but red on this near-black reaches only 4.4:1 — under
        the 4.5:1 a label this size needs — where white reaches 17.7:1. So the
        marker stays structural: same white text, an underline beneath it.

        The underline is offset rather than a border so nothing shifts on
        activation, and 5px keeps it inside the 30px bar.
    */
    .op-header .op-header__nav-item[aria-current="page"] {
        opacity: 1;
        text-decoration: underline;
        text-decoration-thickness: 2px;
        text-underline-offset: 5px;
    }

    .op-header .op-header__nav-caret {
        display: block;
        transition: transform .18s ease;
    }

    html.op-mega-open .op-header .op-header__nav-trigger {
        opacity: 1;
    }

    html.op-mega-open .op-header .op-header__nav-caret {
        transform: rotate(180deg);
    }

    /* ------------------------------------------------------------------
       Mega menu
       ------------------------------------------------------------------ */

    /*
        Closed, the panel keeps its box but leaves the flow of hit testing
        entirely: `visibility` takes it out of the accessibility tree and the
        tab order, and its transition is delayed to the end of the fade so the
        panel is still painted while it fades out.
    */
    .op-header .op-mega {
        position: absolute;
        z-index: 5;
        top: 100%;
        right: 0;
        left: 0;
        max-height: calc(100vh - 96px);
        overflow-y: auto;
        overscroll-behavior: contain;
        background: #fff;
        box-shadow: 0 22px 34px -22px rgba(7, 22, 54, .45);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-6px);
        transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
        pointer-events: none;
    }

    html.op-mega-open .op-header .op-mega {
        opacity: 1;
        visibility: visible;
        transform: none;
        transition-delay: 0s;
        pointer-events: auto;
    }

    @media (prefers-reduced-motion: reduce) {
        .op-header .op-mega,
        .op-header .op-header__nav-caret {
            transition: none;
        }
    }

    /*
        The rail starts on the same line as the nav above it, which is now the
        wordmark's edge, so the shell's own gutter is all the indent it needs
        and All Cars sits directly above New. Moving the nav without moving the
        rail would leave the panel's first column hanging 118px to the right of
        the trigger that opens it.
    */
    .op-header .op-mega__inner {
        display: grid;
        grid-template-columns: var(--op-mega-rail) minmax(0, 1fr);
        column-gap: 42px;
        padding-block: 26px 30px;
    }

    /*
        The rail is the three tabs plus the link out. They are separate
        elements because the tablist may only hold tabs, and both boxes carry
        the same axis and gap so the four items read as one column.
    */
    .op-header .op-mega__rail,
    .op-header .op-mega__rail-tabs {
        display: flex;
        min-width: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
    }

    .op-header .op-mega__rail-item {
        display: block;
        width: 100%;
        border: 0;
        border-radius: 8px;
        background: transparent;
        padding: 7px 8px;
        padding-inline-start: 0;
        color: #101828;
        font-family: inherit;
        font-size: 15px;
        font-weight: 500;
        line-height: 1.2;
        text-align: start;
        white-space: nowrap;
        cursor: pointer;
        transition: color .12s ease;
    }

    .op-header a.op-mega__rail-item,
    .op-header a.op-mega__rail-item:visited {
        color: #101828;
    }

    .op-header .op-mega__rail-item:hover,
    .op-header a.op-mega__rail-item:hover {
        color: var(--op-red);
    }

    /*
        Which pane is showing, and therefore which rail item is marked, is read
        off <html>. The bare `:not()` selector is the state before anything has
        been chosen, which the script also treats as New.
    */
    html:not([data-op-mega-pane]) .op-header .op-mega__rail-item[data-mega-pane="new"],
    html[data-op-mega-pane="new"] .op-header .op-mega__rail-item[data-mega-pane="new"],
    html[data-op-mega-pane="used"] .op-header .op-mega__rail-item[data-mega-pane="used"],
    html[data-op-mega-pane="ev"] .op-header .op-mega__rail-item[data-mega-pane="ev"] {
        color: var(--op-red);
        font-weight: 700;
    }

    .op-header .op-mega__pane {
        display: none;
    }

    html:not([data-op-mega-pane]) .op-header .op-mega__pane--new,
    html[data-op-mega-pane="new"] .op-header .op-mega__pane--new,
    html[data-op-mega-pane="used"] .op-header .op-mega__pane--used,
    html[data-op-mega-pane="ev"] .op-header .op-mega__pane--ev {
        display: block;
    }

    /*
        Four columns whatever the pane holds, as the artwork has them. Every
        pane now carries all nine body types, so the eight the artwork covers
        fill two rows and Crossover — the one with no render — sits alone on a
        third. A fixed track count is what keeps that ninth tile the size of the
        other eight instead of letting it stretch across the row.
    */
    .op-header .op-mega__grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        column-gap: 24px;
        row-gap: 26px;
    }

    .op-header .op-mega__tile {
        display: grid;
        justify-items: center;
        gap: 12px;
        border-radius: 12px;
        padding: 10px 8px 14px;
    }

    /*
        The plate stays white in every state, and the hover cue is the label
        rather than a tinted background, because the delivered renders are
        opaque white rather than transparent: any tint behind them would draw a
        white rectangle around each car. Transparent PNGs would free the
        background up again, and nothing else here would need to change.
    */
    .op-header .op-mega__tile-art {
        display: flex;
        width: 100%;
        height: 96px;
        align-items: center;
        justify-content: center;
        background: #fff;
        color: #aab2c0;
    }

    /*
        `contain` rather than `cover`. The plate is wider than it is tall in
        some breakpoints and narrower in others, while every render is a fixed
        376x194; contain fits each one whole at whatever the plate's ratio is,
        so no vehicle ever loses its nose or its tail to a crop and none is
        stretched. It also means all eight are scaled by the same factor, since
        they share one canvas size — the vehicles keep the relative sizes the
        artwork gave them.
    */
    .op-header .op-mega__tile-art img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: center;
    }

    .op-header .op-mega__tile-art svg {
        width: 76%;
        max-width: 132px;
        height: auto;
    }

    .op-header .op-mega__tile-label {
        color: #1f2430;
        font-size: 15px;
        font-weight: 500;
        line-height: 1.2;
        text-align: center;
        transition: color .12s ease;
    }

    .op-header .op-mega__tile:hover .op-mega__tile-label,
    .op-header .op-mega__tile:focus-visible .op-mega__tile-label {
        color: var(--op-red);
    }

    /* ------------------------------------------------------------------
       Focus and assistive text
       ------------------------------------------------------------------ */

    /*
        Every control in the header is keyboard reachable and shows where it is.
        The ring is drawn outside the box so it never changes layout.
    */
    .op-header a:focus-visible,
    .op-header button:focus-visible {
        border-radius: 6px;
        outline: 2px solid var(--op-cta);
        outline-offset: 3px;
    }

    /*
        The nav bar is the same near-black as the ring above it, so the default
        ring on that bar would be invisible — not merely weak, but the exact
        colour of its background. The override is what makes the bar keyboard
        navigable at all, and white against it is 17.7:1.

        The offset keeps the ring off the glyphs; at 4px it still clears the
        30px bar's edges, so nothing is clipped.
    */
    .op-header .op-header__nav-item:focus-visible {
        outline-color: #fff;
        outline-offset: 4px;
    }

    .op-header .op-header__sr-only {
        position: absolute;
        overflow: hidden;
        width: 1px;
        height: 1px;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
    }

    /* ------------------------------------------------------------------
       Responsive
       ------------------------------------------------------------------ */

    /*
        Below 1024 the six nav links are wider than the space the bar can give
        them. They scroll inside their own track rather than growing the
        document: while the header was homepage-only an overflowing nav pushed
        that one page sideways, and now that it renders everywhere it would do
        so on every page. `min-width: 0` is required because a flex child
        defaults to min-width:auto and refuses to shrink below its content.

        The row must keep scrolling rather than wrap into stacked lines, so the
        links keep `white-space: nowrap` from the base rule. The indent goes,
        because the reason for it — lining up with the search field — no longer
        holds once the field is on a row of its own, and because a scroll track
        should start where the content does.

        The mega menu stops being a mega menu at the same width. Squeezing four
        tile columns and a vertical rail into a phone would make both
        unreadable, so the rail becomes a scrollable row of chips above the
        tiles and the tiles fall to three columns and then two. The
        information architecture is unchanged: the same three panes hold the
        same body types, and Showrooms is still the entry that leaves for the
        directory.
    */
    @media (max-width: 1023.98px) {
        .op-header .op-header__nav {
            overflow-x: auto;
            scrollbar-width: none;
            gap: 22px;
        }

        .op-header .op-header__nav::-webkit-scrollbar {
            display: none;
        }

        .op-header .op-header__actions {
            gap: 16px;
        }

        .op-header .op-mega {
            max-height: calc(100vh - 92px);
        }

        .op-header .op-mega__inner {
            display: block;
            padding-block: 14px 18px;
        }

        .op-header .op-mega__rail {
            overflow-x: auto;
            flex-direction: row;
            margin-bottom: 14px;
            padding-bottom: 2px;
            gap: 8px;
            scrollbar-width: none;
        }

        .op-header .op-mega__rail-tabs {
            flex: 0 0 auto;
            flex-direction: row;
            gap: 8px;
        }

        .op-header .op-mega__rail::-webkit-scrollbar {
            display: none;
        }

        .op-header .op-mega__rail-item {
            width: auto;
            flex: 0 0 auto;
            border: 1px solid var(--op-line);
            border-radius: 999px;
            padding: 7px 14px;
            font-size: 13.5px;
        }

        html:not([data-op-mega-pane]) .op-header .op-mega__rail-item[data-mega-pane="new"],
        html[data-op-mega-pane="new"] .op-header .op-mega__rail-item[data-mega-pane="new"],
        html[data-op-mega-pane="used"] .op-header .op-mega__rail-item[data-mega-pane="used"],
        html[data-op-mega-pane="ev"] .op-header .op-mega__rail-item[data-mega-pane="ev"] {
            border-color: var(--op-red);
            background: var(--op-red);
            color: #fff;
        }

        .op-header .op-mega__grid {
            grid-template-columns: repeat(3, minmax(0, 1fr));
            column-gap: 14px;
            row-gap: 16px;
        }

        .op-header .op-mega__tile {
            gap: 8px;
            padding: 8px 4px 10px;
        }

        .op-header .op-mega__tile-art {
            height: 74px;
        }

        .op-header .op-mega__tile-label {
            font-size: 13.5px;
        }
    }

    /*
        Under 768 the wordmark, the field and four actions cannot share a row at
        any readable size, so the field takes a row of its own. The order stays
        wordmark, actions, field, which is both the DOM order and the reading
        order.
    */
    @media (max-width: 767.98px) {
        .op-header .op-header__inner {
            grid-template-columns: auto minmax(0, 1fr);
            grid-template-areas:
                "brand  actions"
                "search search";
            row-gap: 8px;
            padding-block: 9px 10px;
        }

        .op-header .op-header__search {
            max-width: none;
            height: 36px;
        }

        .op-header .op-header__actions {
            justify-self: end;
        }

        .op-header .op-mega {
            max-height: calc(100vh - 130px);
        }
    }

    /*
        Under 640 two tile columns are as many as fit at a legible label size.
    */
    @media (max-width: 639.98px) {
        .op-header .op-mega__grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    /*
        Under 540 the three action labels plus the CTA are wider than the row.
        The labels become the accessible names of their icons rather than
        disappearing, and the CTA keeps its full wording because it is the one
        action the artwork gives a label to.
    */
    @media (max-width: 539.98px) {
        .op-header .op-header__action {
            min-width: 0;
        }

        /*
            Below here the pill loses its ring and becomes the word alone.

            The row is wordmark, three icons, this and the CTA, and at 375 the
            ring and its padding are the 18px that pushed the icons over the
            wordmark. The word is what carries the meaning -- the ring only ever
            said "this is a control" -- and a coloured word sitting among plain
            icons still says that. It is the same trade the tiles beside it make
            at this width, in the opposite direction: they keep the icon and
            drop the label, this keeps the label and drops the frame.
        */
        .op-header .op-header__lang {
            height: auto;
            border: 0;
            padding: 0;
            font-size: 11.5px;
        }

        .op-header .op-header__lang:hover,
        .op-header .op-header__lang:focus-visible {
            background: none;
            text-decoration: underline;
        }

        .op-header .op-header__action-label {
            position: absolute;
            overflow: hidden;
            width: 1px;
            height: 1px;
            clip: rect(0 0 0 0);
            clip-path: inset(50%);
            white-space: nowrap;
        }

        .op-header .op-header__actions {
            gap: 14px;
        }

        .op-header .op-header__cta {
            height: 34px;
            gap: 7px;
            padding: 0 12px;
            padding-inline-start: 6px;
            font-size: 12px;
        }

        .op-header .op-header__cta-icon {
            width: 22px;
            height: 22px;
        }

        .op-header .op-header__brand img {
            height: 21px;
        }

        .op-header .op-header__nav {
            gap: 20px;
            font-size: 11.5px;
        }
    }

    /* The narrowest supported width; 375 is the reference device. */
    @media (max-width: 389.98px) {
        .op-header .op-header__actions {
            gap: 11px;
        }


        .op-header .op-header__cta {
            padding: 0 10px;
            padding-inline-start: 5px;
        }
    }

    /* ------------------------------------------------------------------
       Nav strip scroll affordance
       ------------------------------------------------------------------ */

    /*
        The nav becomes a scroll track below 1024 in the block above, and hides
        its scrollbar there, so nothing on screen says the row continues. At
        390px it is 676px of content in English and 750px in Arabic against a
        358px strip: four entries off the end, and six in Arabic.

        These two elements are the wash at whichever edge still has content
        behind it. They are created and removed by nav-edges.blade.php, which
        only ever adds one when the strip genuinely overflows -- so above 1024
        no rule here has anything to match.

        Anchored to .op-header__navband, which is already `position: relative`
        as the mega menu's positioning context. They are appended as its last
        child, which puts them after .op-mega in the document -- harmless,
        because the panel is `top: 100%` with `z-index: 5` and hangs entirely
        below the band, while these stay inside the band's own height and stop
        at `z-index: 1`.

        Logical inset properties rather than left/right: under RTL the overflow
        is on the other side, and `inset-inline-start` follows the document's
        direction without a second rule to keep in step.
    */
    .op-header .op-header__nav-edge {
        position: absolute;
        top: 0;
        bottom: 0;
        z-index: 1;
        display: flex;
        width: 54px;
        align-items: center;
        padding-inline: 7px;
        pointer-events: none;
    }

    .op-header .op-header__nav-edge--start {
        inset-inline-start: 0;
        justify-content: flex-start;
    }

    .op-header .op-header__nav-edge--end {
        inset-inline-end: 0;
        justify-content: flex-end;
    }

    /*
        The wash itself. `--op-navbar` is the band's own background, so the ramp
        lands exactly on it and the clipped entry underneath reads as running
        out of room rather than having been cut off.

        The far end is that same colour at zero alpha rather than the keyword
        `transparent`: `transparent` is transparent *black*, and interpolating
        towards it takes the middle of the ramp through grey.

        Gradient direction is physical where the box is logical, so it is
        written per side and flipped under RTL.
    */
    .op-header .op-header__nav-edge::before {
        content: '';
        position: absolute;
        inset: 0;
    }

    .op-header .op-header__nav-edge--start::before {
        background: linear-gradient(to left, rgba(17, 24, 39, 0), var(--op-navbar) 74%);
    }

    .op-header .op-header__nav-edge--end::before {
        background: linear-gradient(to right, rgba(17, 24, 39, 0), var(--op-navbar) 74%);
    }

    [dir="rtl"] .op-header .op-header__nav-edge--start::before {
        background: linear-gradient(to right, rgba(17, 24, 39, 0), var(--op-navbar) 74%);
    }

    [dir="rtl"] .op-header .op-header__nav-edge--end::before {
        background: linear-gradient(to left, rgba(17, 24, 39, 0), var(--op-navbar) 74%);
    }

    /*
        The chevron: two borders on a rotated square, so it costs no icon font
        and no request. It is what makes this a direction rather than only a
        soft edge -- a wash alone says the row is longer than the window but not
        which way the rest of it lies.
    */
    .op-header .op-header__nav-edge::after {
        content: '';
        position: relative;
        width: 5px;
        height: 5px;
        border-top: 1.5px solid rgba(255, 255, 255, .92);
        border-right: 1.5px solid rgba(255, 255, 255, .92);
    }

    /* Each edge points outward, the way its own hidden content lies. */
    .op-header .op-header__nav-edge--start::after {
        transform: rotate(-135deg);
    }

    .op-header .op-header__nav-edge--end::after {
        transform: rotate(45deg);
    }

    [dir="rtl"] .op-header .op-header__nav-edge--start::after {
        transform: rotate(45deg);
    }

    [dir="rtl"] .op-header .op-header__nav-edge--end::after {
        transform: rotate(-135deg);
    }
    /*
        The field's cell.

        The class is set on <v-header-search> and falls through to the
        component's root when the app mounts, so the same rule sizes and places
        the field before and after that happens and nothing shifts. The custom
        element needs `display: block` because an unknown element is inline.
    */
    .op-header .op-header__search-shell {
        position: relative;
        z-index: 40;
        display: block;
        grid-area: search;
        min-width: 0;
        max-width: 410px;
    }

    @media (max-width: 767.98px) {
        .op-header .op-header__search-shell {
            max-width: none;
        }
    }

    .op-hs__surface {
        --hs-line: #e5e7eb;
        --hs-ink: #071636;
        --hs-muted: #66728a;
        --hs-cta: #111827;
        --hs-hover: #f3f4f6;

        font-family: Roboto, sans-serif;
    }

    .op-hs__form {
        width: 100%;
    }

    /*
        The field's label.

        `.op-header .op-header__sr-only` cannot reach it once the field is
        teleported to the body, and an unhidden label there is not a small
        problem: it takes the width it needs out of a 390px row and pushes the
        input off the screen. Repeated here unscoped so the label stays for
        screen readers and invisible in both places.
    */
    .op-hs__surface .op-header__sr-only {
        position: absolute;
        overflow: hidden;
        width: 1px;
        height: 1px;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
    }

    /*
        A field with its dropdown open reads as one surface with the panel
        below it, so it takes the panel's white rather than the resting grey.
    */
    .op-header .op-hs__surface--open .op-hs__form {
        background: #fff;
        box-shadow: inset 0 0 0 1px var(--hs-line);
    }

    /*
        The field keeps `type="search"` for its semantics, but not the clear
        button the browser draws for it: the component has its own, and both at
        once put two crosses side by side in the field.
    */
    .op-hs__form input::-webkit-search-cancel-button,
    .op-hs__form input::-webkit-search-decoration {
        -webkit-appearance: none;
        appearance: none;
    }

    .op-hs__iconbutton {
        display: inline-flex;
        flex-shrink: 0;
        width: 24px;
        height: 24px;
        align-items: center;
        justify-content: center;
        border: 0;
        border-radius: 999px;
        padding: 0;
        background: transparent;
        color: #4b5563;
        cursor: pointer;
    }

    .op-hs__iconbutton:hover {
        background: #e2e4e8;
        color: var(--hs-cta);
    }

    /* ------------------------------------------------------------------
       Panel
       ------------------------------------------------------------------ */

    .op-hs__panel {
        position: absolute;
        top: calc(100% + 8px);
        inset-inline-start: 0;
        width: 100%;
        max-height: min(70vh, 560px);
        overflow-y: auto;
        border: 1px solid var(--hs-line);
        border-radius: 10px;
        padding: 6px;
        background: #fff;
        box-shadow: 0 14px 34px rgba(7, 22, 54, .13), 0 2px 6px rgba(7, 22, 54, .05);
        overscroll-behavior: contain;
    }

    .op-hs__empty {
        margin: 0;
        padding: 14px 10px 4px;
        color: var(--hs-muted);
        font-size: 13px;
        font-weight: 500;
    }

    .op-hs__grouphead {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 10px 10px 6px;
        color: #8a94a6;
        font-size: 10.5px;
        font-weight: 700;
        letter-spacing: .05em;
        text-transform: uppercase;
    }

    .op-hs__clear {
        border: 0;
        padding: 0;
        background: none;
        color: var(--hs-cta);
        font-family: inherit;
        font-size: 10.5px;
        font-weight: 700;
        letter-spacing: .04em;
        text-transform: uppercase;
        cursor: pointer;
    }

    .op-hs__clear:hover {
        text-decoration: underline;
    }

    /* ------------------------------------------------------------------
       Rows
       ------------------------------------------------------------------ */

    /*
        The compound selector is deliberate: Bagisto's compiled Tailwind styles
        storefront anchors, and `.op-header a { color: inherit }` cannot reach
        these rows once they are teleported out of the header.
    */
    a.op-hs__row,
    a.op-hs__chip,
    a.op-hs__brand {
        color: var(--hs-ink);
        text-decoration: none;
    }

    .op-hs__row {
        display: grid;
        align-items: center;
        grid-template-columns: 26px minmax(0, 1fr) auto;
        gap: 10px;
        border-radius: 8px;
        padding: 8px 10px;
        cursor: pointer;
    }

    /*
        One highlight for both pointer and keyboard: hovering sets the active
        row, so there is never a second, competing highlight to explain.
    */
    .op-hs__row.is-active {
        background: var(--hs-hover);
    }

    .op-hs__rowicon {
        display: inline-flex;
        width: 26px;
        height: 26px;
        align-items: center;
        justify-content: center;
        color: #6b7280;
    }

    .op-hs__rowicon img {
        width: 22px;
        height: 22px;
        object-fit: contain;
    }

    .op-hs__rowtext {
        display: grid;
        min-width: 0;
        gap: 1px;
    }

    .op-hs__rowtitle {
        overflow: hidden;
        color: var(--hs-ink);
        font-size: 13.5px;
        font-weight: 500;
        line-height: 1.35;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .op-hs__rowsub,
    .op-hs__rownote {
        overflow: hidden;
        font-size: 11.5px;
        font-weight: 500;
        line-height: 1.3;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .op-hs__rowsub {
        color: var(--hs-muted);
    }

    /*
        What the parser could not honour. Grey rather than red: an unfilterable
        phrase is a limit of the catalogue, not a mistake the shopper made.
    */
    .op-hs__rownote {
        color: #8a94a6;
        font-style: italic;
    }

    .op-hs__badge {
        flex-shrink: 0;
        border: 1px solid var(--hs-line);
        border-radius: 999px;
        padding: 2px 8px;
        background: #f9fafb;
        color: #6b7280;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: .03em;
        white-space: nowrap;
    }

    /* ------------------------------------------------------------------
       Popular terms
       ------------------------------------------------------------------ */

    .op-hs__chips {
        display: flex;
        flex-wrap: wrap;
        gap: 7px;
        padding: 2px 10px 8px;
    }

    .op-hs__chip {
        border: 1px solid var(--hs-line);
        border-radius: 999px;
        padding: 6px 12px;
        font-size: 12.5px;
        font-weight: 500;
        line-height: 1.2;
        white-space: nowrap;
        cursor: pointer;
    }

    .op-hs__chip.is-active {
        border-color: var(--hs-cta);
        background: var(--hs-hover);
    }

    /* ------------------------------------------------------------------
       Brands
       ------------------------------------------------------------------ */

    .op-hs__brands {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 7px;
        padding: 2px 10px 10px;
    }

    .op-hs__brand {
        display: grid;
        justify-items: center;
        gap: 5px;
        border: 1px solid var(--hs-line);
        border-radius: 8px;
        padding: 10px 6px;
        text-align: center;
        cursor: pointer;
    }

    .op-hs__brand.is-active {
        border-color: var(--hs-cta);
        background: var(--hs-hover);
    }

    .op-hs__brand img {
        width: 26px;
        height: 22px;
        object-fit: contain;
    }

    .op-hs__brand span {
        overflow: hidden;
        max-width: 100%;
        font-size: 11px;
        font-weight: 500;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* ------------------------------------------------------------------
       The full screen view
       ------------------------------------------------------------------ */

    /*
        `100dvh` keeps the panel off the browser's own chrome on phones where
        the address bar collapses on scroll.
    */
    .op-hs__surface--fullscreen {
        position: fixed;
        z-index: 200;
        display: flex;
        flex-direction: column;
        inset: 0;
        height: 100dvh;
        background: #fff;
    }

    .op-hs__surface--fullscreen .op-hs__form {
        display: flex;
        flex-shrink: 0;
        align-items: center;
        gap: 9px;
        height: 44px;
        margin: 10px 14px 6px;
        border-radius: 10px;
        padding-inline: 12px;
        background: #edeef0;
    }

    .op-hs__surface--fullscreen .op-hs__form:focus-within {
        outline: 2px solid var(--hs-cta);
        outline-offset: 2px;
    }

    .op-hs__surface--fullscreen .op-hs__form input {
        width: 100%;
        min-width: 0;
        border: 0;
        padding: 0;
        background: transparent;
        color: var(--hs-ink);
        font-family: inherit;
        font-size: 15px;
        font-weight: 500;
        outline: none;
        box-shadow: none;
    }

    .op-hs__surface--fullscreen .op-hs__form input::placeholder {
        color: #707070;
        opacity: 1;
    }

    .op-hs__surface--fullscreen .op-hs__iconbutton {
        width: 28px;
        height: 28px;
        color: #374151;
    }

    .op-hs__surface--fullscreen .op-hs__panel {
        position: static;
        flex: 1 1 auto;
        max-height: none;
        border: 0;
        border-radius: 0;
        padding: 2px 4px 24px;
        box-shadow: none;
        -webkit-overflow-scrolling: touch;
    }

    /* Four across rather than three: the panel is the width of the screen. */
    .op-hs__surface--fullscreen .op-hs__brands {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .op-hs__surface--fullscreen .op-hs__row {
        padding: 11px 10px;
    }

    /* The page behind must not scroll under the overlay. */
    body.op-hs-locked {
        overflow: hidden;
    }