/* ==========================================================================
   SITE HEADER
   The fixed strip, its menus, the search band and the phone drawer
   (templates/navigation.php).

   The strip sits on the same ink as the new-look pages' heroes and the ad
   band under it, so header, band and hero read as one dark field with only
   a hairline between them. Cyan is the single accent: the rule under the
   section you are in (or the menu you have open), and the one filled
   button, "Review your tyres". Everything else is text on ink.

   This replaced mega-menu.css (2026-10). That file is left in place only
   because pages already in the page cache carry the old header markup and
   still link it; once those have expired it can go.

   Height contract: 66px on a phone, 76px from 768px up. ad_settings.php
   (.tr-topad), #whitebg, .fp-hero and the side runners all clear the bar by
   those two figures, so the bar is pinned to them rather than left to grow
   with its contents - the old one grew to 90px at 992-1100px, where its
   labels wrapped, and sat over the top of the page.
   ========================================================================== */

#main-nav {
    --nav-h: 66px;
    --nav-ink: var(--tr-ink, #0e1216);
    --nav-raised: #151b21;
    --nav-line: rgba(255, 255, 255, 0.09);
    --nav-text: #e2e8ed;
    --nav-muted: var(--tr-muted-on-ink, #9fadb9);
    --nav-cyan: var(--tr-cyan, #0db1e7);
    --nav-pad-x: 16px;
    --nav-logo-w: 158px;

    height: var(--nav-h);
    padding: 0;
    background: var(--nav-ink);
    border-bottom: 1px solid var(--nav-line);
    color: var(--nav-text);
}

@media (min-width: 768px) {
    #main-nav {
        --nav-h: 76px;
        --nav-logo-w: 168px;
    }
}

.nav-container {
    max-width: 1200px;
    height: 100%;
    padding: 0 16px;
    flex-wrap: nowrap;
    position: relative;
}

/* Phone layout first: logo left, search and menu buttons right. From 992px
   the row dissolves (display: contents) and the logo and the link list sit
   side by side - unless the strip measured itself too wide for its labels
   and asked for the phone header (html.site-nav-compact, see below). */
.nav-top-row {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: space-between;
}

@media (min-width: 992px) {
    html:not(.site-nav-compact) .nav-top-row {
        display: contents;
    }
}

#main-nav .navbar-brand {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    margin: 0 24px 0 0;
    padding: 0;
}

#main-nav .nav-logo {
    display: block;
    width: var(--nav-logo-w);
    height: auto;
}

/* Icons take their width before Font Awesome arrives (it loads without
   blocking), so nothing on the strip moves when the glyphs land and the
   measurement the strip makes of itself on load stays true. */
#main-nav .fa {
    display: inline-block;
    min-width: 1em;
    text-align: center;
}

/* ==========================================================================
   THE LINK LIST
   ========================================================================== */

/* min-width: 0 lets the list overrun the strip instead of stretching it, so
   the fitting script can see that it does not fit. */
#main-nav .navbar-collapse {
    min-width: 0;
    height: 100%;
    align-items: stretch;
}

#main-nav .site-nav__list {
    flex-wrap: nowrap;
    align-items: stretch;
    width: 100%;
    height: 100%;
    margin: 0;
}

#main-nav .site-nav__list > .nav-item {
    display: flex;
    flex: 0 0 auto;
    align-items: stretch;
}

#main-nav .site-nav__list .nav-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 100%;
    padding: 0 var(--nav-pad-x);
    background: none;
    border: 0;
    border-radius: 0;
    color: var(--nav-text);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.005em;
    line-height: 1;
    white-space: nowrap;
    transition: color 0.15s ease;
}

/* The rule along the strip's bottom edge: faint on hover, cyan under the
   section you are in and under the menu you have open, where it sits right
   on the top edge of the panel hanging below. */
#main-nav .site-nav__list .nav-link::before {
    content: "";
    position: absolute;
    left: var(--nav-pad-x);
    right: var(--nav-pad-x);
    bottom: -1px;
    height: 2px;
    background: transparent;
    transition: background-color 0.15s ease;
}

#main-nav .site-nav__list .nav-link:hover,
#main-nav .site-nav__list .nav-link:focus-visible {
    color: #fff;
}

#main-nav .site-nav__list .nav-link:hover::before {
    background: rgba(255, 255, 255, 0.25);
}

#main-nav .site-nav__list .nav-link.is-current,
#main-nav .site-nav__list .nav-link[aria-expanded="true"] {
    color: #fff;
}

#main-nav .site-nav__list .nav-link.is-current::before,
#main-nav .site-nav__list .nav-link[aria-expanded="true"]::before {
    background: var(--nav-cyan);
}

/* While another menu is open, only that one carries the cyan. */
#main-nav .site-nav__list:has([aria-expanded="true"]) .nav-link.is-current:not([aria-expanded="true"])::before {
    background: rgba(255, 255, 255, 0.25);
}

/* A drawn chevron in place of Bootstrap's solid caret. */
#main-nav .site-nav__list .dropdown-toggle::after {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    margin: 0 0 3px 1px;
    border: 0;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    opacity: 0.55;
    transform: rotate(45deg);
    vertical-align: middle;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

#main-nav .site-nav__list .dropdown-toggle[aria-expanded="true"]::after {
    opacity: 1;
    transform: translateY(3px) rotate(225deg);
}

/* ==========================================================================
   SEARCH FIELD, LOG IN AND THE CTA
   On a wide screen search is an open field, not an icon: people look for a
   box, and a box says it takes a tyre name or a size. Log In is a word with
   its icon. Then the one filled button.
   ========================================================================== */

#main-nav .site-nav__list .nav-search-field,
#main-nav .site-nav__list .nav-cta-item {
    align-items: center;
}

/* Takes the free middle of the strip: up to 380px, never under 220px, which
   still shows a tyre name or a size whole. */
#main-nav .site-nav__list .nav-search-field {
    flex: 0 1 380px;
    min-width: 220px;
    margin-left: auto;
    padding: 0 8px 0 20px;
}

#main-nav .nav-search-field .nav-search-form {
    width: 100%;
}

#main-nav .nav-search-field .input-group {
    flex-wrap: nowrap;
    height: 40px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

#main-nav .nav-search-field .input-group:hover {
    border-color: rgba(255, 255, 255, 0.26);
}

#main-nav .nav-search-field .input-group:focus-within {
    background: var(--nav-ink);
    border-color: var(--nav-cyan);
    box-shadow: 0 0 0 3px rgba(13, 177, 231, 0.18);
}

#main-nav #unified-search,
#main-nav #unified-search:focus {
    height: 38px;
    padding: 0 12px 0 38px;
    background: transparent;
    border: 0;
    border-radius: 8px;
    box-shadow: none;
    color: #fff;
    font-size: 14.5px;
}

#main-nav #unified-search::placeholder {
    color: #8b98a3;
    opacity: 1;
}

/* unified-search.js marks a recognised size or a text search with a coloured
   left border; in this field the magnifier turns green for a size instead. */
#main-nav #unified-search.size-search,
#main-nav #unified-search.text-search {
    border-left: 0;
}

#main-nav .nav-search-field .nav-search-submit {
    top: 50%;
    left: 5px;
    z-index: 5;
    padding: 0 6px;
    color: var(--nav-muted);
    font-size: 15px;
    transform: translateY(-50%);
}

#main-nav .nav-search-field .input-group:focus-within .nav-search-submit {
    color: var(--nav-cyan);
}

#main-nav .nav-search-field .input-group:has(.size-search) .nav-search-submit {
    color: #3fcf7f;
}

/* Suggestions hang under the field, a little wider than it. Two ids, so they
   outrank unified-search.css, which loads after this file. */
#main-nav .nav-search-field #search-suggestions {
    top: calc(100% + 6px);
    left: 0;
    right: auto;
    width: max(100%, 420px);
    margin: 0;
    padding: 6px;
    background: var(--nav-raised);
    border: 1px solid var(--nav-line);
    border-radius: 10px;
    box-shadow: 0 28px 48px -18px rgba(0, 0, 0, 0.7), 0 2px 6px rgba(0, 0, 0, 0.25);
    color: var(--nav-text);
}

#main-nav .nav-search-field #search-suggestions .dropdown-item {
    padding: 8px 10px;
    border-bottom: 0;
    border-radius: 6px;
    color: var(--nav-text);
}

#main-nav .nav-search-field #search-suggestions .dropdown-item:hover,
#main-nav .nav-search-field #search-suggestions .dropdown-item.active {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
}

#main-nav .nav-search-field #search-suggestions .dropdown-item .item-info {
    color: var(--nav-muted) !important;
}

#main-nav .nav-search-field #search-suggestions::after {
    background: linear-gradient(to bottom, rgba(21, 27, 33, 0), rgba(21, 27, 33, 0.95));
}

/* The suggestion list's own parts, dark in both search boxes: the strip's
   field and the phone band. */
#main-nav .nav-search-field #search-suggestions .suggestion-group-label,
#navSearchBar .search-suggestions .suggestion-group-label {
    margin: 0 -6px;
    background: #1c242b;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    color: var(--tr-muted-on-ink, #9fadb9);
}

#main-nav .nav-search-field #search-suggestions .suggestion-group-label:first-child,
#navSearchBar .search-suggestions .suggestion-group-label:first-child {
    margin-top: -6px;
    border-radius: 10px 10px 0 0;
}

#main-nav .nav-search-field #search-suggestions .dropdown-item.suggestion-more .item-title,
#main-nav .nav-search-field #search-suggestions .dropdown-item.suggestion-all .item-title,
#navSearchBar .search-suggestions .dropdown-item.suggestion-more .item-title,
#navSearchBar .search-suggestions .dropdown-item.suggestion-all .item-title {
    color: var(--tr-cyan, #0db1e7);
}

#main-nav .nav-search-field #search-suggestions .suggestion-empty,
#navSearchBar .search-suggestions .suggestion-empty {
    color: var(--tr-muted-on-ink, #9fadb9);
}

/* Shop and Log In: each a word and its icon, quieter than the section links.
   Signed in, Log In's place holds the account icon and its menu. */
#main-nav .site-nav__list .nav-util {
    --nav-pad-x: 12px;
    gap: 8px;
    padding: 0 12px;
    font-size: 14px;
}

#main-nav .site-nav__list .nav-util .fa {
    color: var(--nav-muted);
    font-size: 17px;
    transition: color 0.15s ease;
}

#main-nav .site-nav__list .nav-util:hover .fa {
    color: var(--nav-cyan);
}

#main-nav .site-nav__list .nav-account .nav-util .fa {
    color: var(--nav-text);
    font-size: 21px;
}

#main-nav .site-nav__list .nav-cta-item {
    padding-left: 8px;
}

#main-nav a.nav-cta-link,
#main-nav a.nav-cta-link:link,
#main-nav a.nav-cta-link:visited {
    display: inline-flex;
    align-items: center;
    height: 40px;
    padding: 0 16px;
    background: var(--nav-cyan);
    border-radius: 6px;
    color: var(--nav-ink);
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.15s ease;
}

#main-nav a.nav-cta-link:hover,
#main-nav a.nav-cta-link:focus-visible {
    background: #45c6f0;
    color: var(--nav-ink);
}

/* ==========================================================================
   FITTING THE STRIP (set by the script in navigation.php)
   data-fit="tight": less spacing, a smaller logo and a narrower search
   field. "tight noshop": Shop steps aside as well and the search field may
   narrow a little more - in practice the longer languages on laptop widths;
   Shop is still in the footer. Past that the page
   gets the phone header instead (html.site-nav-compact).
   ========================================================================== */

#main-nav[data-fit~="tight"] {
    --nav-pad-x: 10px;
    --nav-logo-w: 148px;
}

#main-nav[data-fit~="tight"] .navbar-brand {
    margin-right: 12px;
}

#main-nav[data-fit~="tight"] .site-nav__list .nav-link {
    font-size: 14px;
}

#main-nav[data-fit~="tight"] .site-nav__list .nav-search-field {
    min-width: 190px;
    padding-left: 10px;
}

#main-nav[data-fit~="noshop"] .nav-shop-item {
    display: none !important;
}

#main-nav[data-fit~="noshop"] .site-nav__list .nav-search-field {
    min-width: 165px;
}

#main-nav[data-fit~="tight"] .site-nav__list .nav-util {
    --nav-pad-x: 8px;
    padding: 0 8px;
}

/* ==========================================================================
   MENU PANELS
   Flat panels that hang flush from the strip's bottom edge.
   ========================================================================== */

#main-nav .nav-item > .dropdown-menu {
    /* Bootstrap hides menus with display:none; keep them laid out but
       invisible so they can fade in, and so a panel's width can be read
       before it opens (the script places it under its item). */
    display: block !important;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
    top: calc(100% + 1px);
    min-width: 260px;
    margin: 0;
    padding: 8px;
    background: var(--nav-raised);
    border: 1px solid var(--nav-line);
    border-top: 0;
    border-radius: 0 0 10px 10px;
    box-shadow: 0 28px 48px -18px rgba(0, 0, 0, 0.7), 0 2px 6px rgba(0, 0, 0, 0.25);
    color: var(--nav-text);
    transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s linear 0.16s;
}

#main-nav .nav-item > .dropdown-menu.show {
    visibility: visible;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s linear 0s;
}

#main-nav .nav-item > .dropdown-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 6px;
    color: var(--nav-text);
    font-size: 14.5px;
    font-weight: 450;
    line-height: 1.3;
    white-space: nowrap;
    transition: background-color 0.12s ease, color 0.12s ease;
}

#main-nav .nav-item > .dropdown-menu .dropdown-item .fa {
    width: 18px;
    color: var(--nav-cyan);
    font-size: 15px;
}

#main-nav .nav-item > .dropdown-menu .dropdown-item:hover,
#main-nav .nav-item > .dropdown-menu .dropdown-item:focus-visible {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
}

#main-nav .nav-item > .dropdown-menu .dropdown-item:active {
    background: rgba(13, 177, 231, 0.16);
}

#main-nav .dropdown-divider {
    margin: 6px 4px;
    border-color: var(--nav-line);
    opacity: 1;
}

/* The big two anchor to the strip, not to their item, so a wide panel can
   never run off the side of the page; the script slides each one under its
   own item before it opens. */
.mega-dropdown {
    position: static !important;
}

#main-nav .nav-item > .mega-menu {
    left: 16px;
    right: auto;
    padding: 0;
    overflow: hidden;
}

#main-nav .mega-menu--tyres {
    width: 480px;
}

#main-nav .mega-menu--tests {
    width: min(880px, calc(100% - 32px));
}

/* Tyres: six ways in, two to a row. */
.mega-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px 6px;
    margin: 0;
    padding: 12px;
    list-style: none;
}

#main-nav .mega-grid li,
#main-nav .mega-links li {
    margin: 0;
    padding: 0;
}

.mega-grid a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 12px;
    border-radius: 6px;
    color: var(--nav-text);
    font-size: 14.5px;
    font-weight: 450;
    line-height: 1.3;
    text-decoration: none;
    transition: background-color 0.12s ease, color 0.12s ease;
}

.mega-grid a:hover,
.mega-grid a:focus-visible {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
}

.mega-grid a .fa {
    flex: 0 0 18px;
    color: var(--nav-cyan);
    font-size: 15px;
}

/* "Help me choose" heads the Tyres menu: the guided way in, above the six
   ways to browse. */
#main-nav .mega-feature {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 12px 12px 0;
    padding: 13px 14px;
    background: rgba(13, 177, 231, 0.09);
    border: 1px solid rgba(13, 177, 231, 0.28);
    border-radius: 8px;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    transition: background-color 0.12s ease, border-color 0.12s ease;
}

#main-nav .mega-feature .fa {
    flex: 0 0 18px;
    color: var(--nav-cyan);
    font-size: 17px;
}

#main-nav .mega-feature .fa-angle-right {
    margin-left: auto;
    font-size: 18px;
    transition: transform 0.15s ease;
}

#main-nav .mega-feature:hover,
#main-nav .mega-feature:focus-visible {
    background: rgba(13, 177, 231, 0.16);
    border-color: rgba(13, 177, 231, 0.5);
    color: #fff;
}

#main-nav .mega-feature:hover .fa-angle-right {
    transform: translateX(3px);
}

/* Tyre Tests: the best-in-category tests by season, each season under the
   icon the test library's season tabs use. */
.mega-seasons {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
    gap: 22px 28px;
    padding: 22px 24px 20px;
}

.mega-column {
    display: flex;
    flex-direction: column;
    gap: 22px;
    min-width: 0;
}

.mega-subheading {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.mega-subheading .fa {
    font-size: 14px;
}

.season-summer { --season: #ffb347; }
.season-winter { --season: #87ceeb; }
.season-all-season { --season: #6aa6dd; }
.season-suv { --season: #4cbb6c; }
.season-track { --season: #ef5f67; }

.mega-group .mega-subheading .fa,
.mobile-drawer-submenu-heading .fa {
    color: var(--season, var(--nav-cyan));
}

.mega-links {
    margin: 0;
    padding: 0;
    list-style: none;
    border-left: 1px solid var(--nav-line);
}

.mega-links a {
    display: block;
    margin-left: -1px;
    padding: 6px 0 6px 13px;
    border-left: 1px solid transparent;
    color: #c9d3db;
    font-size: 14px;
    line-height: 1.35;
    text-decoration: none;
    transition: color 0.12s ease, border-color 0.12s ease;
}

.mega-links a:hover,
.mega-links a:focus-visible {
    border-left-color: var(--season, var(--nav-cyan));
    color: #fff;
}

/* Every panel ends in a full-width row to everything in that section. */
#main-nav .mega-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 24px;
    background: rgba(255, 255, 255, 0.025);
    border-top: 1px solid var(--nav-line);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.12s ease;
}

#main-nav .mega-foot .fa {
    width: auto;
    color: var(--nav-cyan);
    font-size: 18px;
    transition: transform 0.15s ease;
}

#main-nav .mega-foot:hover,
#main-nav .mega-foot:focus-visible {
    background: rgba(13, 177, 231, 0.09);
    color: #fff;
}

#main-nav .mega-foot:hover .fa {
    transform: translateX(3px);
}

/* The Tools list ends in the same row, inside the list's own padding. */
#main-nav .nav-item > .dropdown-menu .dropdown-item.mega-foot {
    width: calc(100% + 16px);
    margin: 6px -8px -8px;
    padding: 13px 20px;
    border-radius: 0 0 10px 10px;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
}

/* ==========================================================================
   SEARCH BAND
   Drops out from under the strip; unified-search.js focuses the field.
   ========================================================================== */

.nav-search-bar {
    position: fixed;
    top: 66px;
    left: 0;
    right: 0;
    z-index: 1029;
    background: #151b21;
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
    box-shadow: 0 24px 40px -20px rgba(0, 0, 0, 0.7);
    transition: transform 0.3s ease-in-out;
}

/* js.js slides the strip away on the way down the page; an open band goes
   with it instead of floating on its own under an empty gap. */
#main-nav.scrolled-down ~ .nav-search-bar {
    transform: translateY(calc(-100% - 80px));
}

@media (min-width: 768px) {
    .nav-search-bar {
        top: 76px;
    }
}

.nav-search-bar-inner {
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 760px;
    margin: 0 auto;
    padding: 14px 0;
}

.nav-search-bar .nav-search-form {
    flex: 1;
}

#navSearchBar .input-group {
    background: var(--tr-ink, #0e1216);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 8px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#navSearchBar .input-group:focus-within {
    border-color: var(--tr-cyan, #0db1e7);
    box-shadow: 0 0 0 3px rgba(13, 177, 231, 0.18);
}

#navSearchBar .nav-search-input {
    height: 48px;
    padding: 0 14px 0 46px;
    background: transparent;
    border: 0;
    border-radius: 8px;
    box-shadow: none;
    color: #fff;
    font-size: 17px;
}

#navSearchBar .nav-search-input::placeholder {
    color: #7d8a95;
}

#navSearchBar .search-suggestions {
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 1050;
    margin: 0;
    padding: 6px;
    background: #151b21;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 10px;
    box-shadow: 0 28px 48px -18px rgba(0, 0, 0, 0.7);
}

#navSearchBar .search-suggestions .dropdown-item {
    padding: 8px 10px;
    border-bottom: 0;
    border-radius: 6px;
    color: #e2e8ed;
}

#navSearchBar .search-suggestions .dropdown-item:hover,
#navSearchBar .search-suggestions .dropdown-item.active {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
}

#navSearchBar .search-suggestions .dropdown-item .item-info {
    color: #9fadb9 !important;
}

#navSearchBar .nav-search-submit {
    top: 50%;
    left: 8px;
    z-index: 5;
    padding: 0 6px;
    color: var(--tr-muted-on-ink, #9fadb9);
    transform: translateY(-50%);
}

#navSearchBar .nav-search-submit i {
    font-size: 18px;
}

#navSearchBar .nav-search-submit:hover {
    color: var(--tr-cyan, #0db1e7);
}

@media (max-width: 991px) {
    .nav-search-bar-inner {
        padding: 12px 0;
    }
}

/* ==========================================================================
   PHONE HEADER: logo, search button, menu button
   ========================================================================== */

.mobile-nav-controls {
    display: none;
    align-items: center;
    gap: 4px;
}

@media (max-width: 991px) {
    .mobile-nav-controls {
        display: flex;
    }
}

#main-nav .mobile-search-toggle,
#main-nav .mobile-drawer-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 8px;
    box-shadow: none;
    color: #fff;
    font-size: 19px;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

#main-nav .mobile-search-toggle:hover,
#main-nav .mobile-drawer-toggle:hover,
#main-nav .mobile-search-toggle[aria-expanded="true"] {
    background: rgba(255, 255, 255, 0.08);
}

#main-nav .mobile-search-toggle[aria-expanded="true"] .fa-search::before {
    content: "\f00d";
}

.hamburger-icon {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 18px;
    height: 12px;
}

.hamburger-line {
    display: block;
    width: 100%;
    height: 2px;
    background-color: #fff;
    border-radius: 2px;
    transform-origin: center;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.mobile-drawer-toggle[aria-expanded="true"] .hamburger-line:nth-child(1) {
    transform: translateY(5px) rotate(45deg);
}

.mobile-drawer-toggle[aria-expanded="true"] .hamburger-line:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

.mobile-drawer-toggle[aria-expanded="true"] .hamburger-line:nth-child(3) {
    transform: translateY(-5px) rotate(-45deg);
}

/* The phone header on a wide screen: what the strip falls back to when even
   its tightest fit is too wide for the labels of this language. */
@media (min-width: 992px) {
    html.site-nav-compact #main-nav .navbar-collapse {
        display: none !important;
    }

    html.site-nav-compact .mobile-nav-controls {
        display: flex;
    }

    html:not(.site-nav-compact) .mobile-drawer,
    html:not(.site-nav-compact) .mobile-drawer-toggle {
        display: none !important;
    }
}

/* ==========================================================================
   DRAWER (offcanvas, from the right)
   ========================================================================== */

.mobile-drawer {
    --bs-offcanvas-transition: transform 0.15s ease-out;
    width: min(88vw, 340px) !important;
    display: flex;
    flex-direction: column;
    background: var(--tr-ink, #0e1216);
    border-left: 1px solid rgba(255, 255, 255, 0.09);
    color: #e2e8ed;
}

.mobile-drawer + .offcanvas-backdrop,
.offcanvas-backdrop.show {
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition: opacity 0.15s linear !important;
}

.mobile-drawer.offcanvas-end {
    transform: translateX(100%);
    transition: transform 0.15s ease-out !important;
}

.mobile-drawer.offcanvas-end.show,
.mobile-drawer.offcanvas-end.showing {
    transform: translateX(0);
}

.mobile-drawer.offcanvas-end.hiding {
    transform: translateX(100%);
}

/* style.css pads every li by 10px below 768px; nothing in here wants it. */
.mobile-drawer li {
    margin: 0;
    padding: 0;
}

.mobile-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 66px;
    padding: 0 16px 0 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

@media (min-width: 768px) {
    .mobile-drawer-header {
        height: 76px;
    }
}

.mobile-drawer-header .offcanvas-title {
    margin: 0;
    color: var(--tr-muted-on-ink, #9fadb9);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.mobile-drawer-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: transparent;
    border: 0;
    border-radius: 8px;
    color: #fff;
    font-size: 19px;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.mobile-drawer-close:hover {
    background: rgba(255, 255, 255, 0.08);
}

.mobile-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 0;
    -webkit-overflow-scrolling: touch;
}

.mobile-drawer-list {
    margin: 0;
    padding: 6px 0;
    list-style: none;
}

.mobile-drawer-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.mobile-drawer-item:last-child,
.mobile-drawer-item--cta {
    border-bottom: 0;
}

.mobile-drawer-link,
.mobile-drawer-link:link,
.mobile-drawer-link:visited {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    min-height: 54px;
    padding: 0 20px;
    background: transparent;
    border: 0;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.mobile-drawer-link:hover,
.mobile-drawer-link:focus-visible {
    background: rgba(255, 255, 255, 0.04);
    color: #fff;
}

.mobile-drawer-link i {
    flex-shrink: 0;
    width: 20px;
    color: var(--tr-cyan, #0db1e7);
    font-size: 16px;
    text-align: center;
}

.mobile-drawer-accordion-toggle {
    justify-content: space-between;
}

.mobile-drawer-link-content {
    display: flex;
    align-items: center;
    gap: 14px;
}

/* Chevron: down when closed, up when open. */
.mobile-drawer-accordion-icon {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    margin: 0 4px 4px 0;
    border-right: 2px solid var(--tr-muted-on-ink, #9fadb9);
    border-bottom: 2px solid var(--tr-muted-on-ink, #9fadb9);
    transform: rotate(45deg);
    transition: transform 0.25s ease;
}

.mobile-drawer-accordion-toggle[aria-expanded="true"] .mobile-drawer-accordion-icon {
    margin-bottom: 0;
    transform: translateY(2px) rotate(225deg);
}

.mobile-drawer-submenu {
    max-height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: #131920;
    list-style: none;
    transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.mobile-drawer-accordion-toggle[aria-expanded="true"] + .mobile-drawer-submenu {
    max-height: 1200px;
}

.mobile-drawer-submenu > li:first-child {
    padding-top: 6px;
}

.mobile-drawer-submenu > li:last-child {
    padding-bottom: 8px;
}

/* Sub-links line up with the text of the row that opened them. */
.mobile-drawer-submenu a,
.mobile-drawer-submenu a:link,
.mobile-drawer-submenu a:visited {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0 20px 0 54px;
    color: #d3dbe2;
    font-size: 15px;
    font-weight: 450;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.mobile-drawer-submenu a:hover,
.mobile-drawer-submenu a:focus-visible {
    background: rgba(255, 255, 255, 0.04);
    color: #fff;
}

.mobile-drawer-submenu a.mobile-drawer-highlight,
.mobile-drawer-submenu a.mobile-drawer-highlight:link,
.mobile-drawer-submenu a.mobile-drawer-highlight:visited {
    color: var(--tr-cyan, #0db1e7);
    font-weight: 600;
}

.mobile-drawer-submenu-heading {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 20px 4px 54px !important;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
}

.mobile-drawer-submenu-heading .fa {
    margin-left: -26px;
    width: 18px;
    font-size: 14px;
}

.mobile-drawer-shop i {
    color: var(--tr-cyan, #0db1e7);
}

a.mobile-drawer-cta,
a.mobile-drawer-cta:link,
a.mobile-drawer-cta:visited {
    justify-content: center;
    gap: 10px;
    width: calc(100% - 40px);
    min-height: 50px;
    margin: 14px 20px 6px;
    background: var(--tr-cyan, #0db1e7);
    border-radius: 8px;
    color: var(--tr-ink, #0e1216);
    font-weight: 700;
}

a.mobile-drawer-cta:hover,
a.mobile-drawer-cta:focus-visible {
    background: #45c6f0;
    color: var(--tr-ink, #0e1216);
}

a.mobile-drawer-cta i {
    width: auto;
    color: var(--tr-ink, #0e1216);
    font-size: 14px;
}

.mobile-drawer-footer {
    padding: 16px 20px 20px;
    background: #0a0d10;
    border-top: 1px solid rgba(255, 255, 255, 0.09);
}

.mobile-drawer-search {
    margin-bottom: 12px;
}

.mobile-drawer-search-form {
    display: flex;
    gap: 8px;
}

.mobile-drawer-search-input {
    flex: 1;
    min-width: 0;
    height: 46px;
    padding: 0 14px;
    background: #151b21;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    color: #fff;
    font-size: 15px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.mobile-drawer-search-input::placeholder {
    color: #7d8a95;
}

.mobile-drawer-search-input:focus {
    outline: none;
    border-color: var(--tr-cyan, #0db1e7);
    box-shadow: 0 0 0 3px rgba(13, 177, 231, 0.18);
}

.mobile-drawer-search-btn {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    background: var(--tr-cyan, #0db1e7);
    border: 0;
    border-radius: 8px;
    color: var(--tr-ink, #0e1216);
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.mobile-drawer-search-btn:hover {
    background: #45c6f0;
}

.mobile-drawer-account,
.mobile-drawer-account-menu {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.mobile-drawer-account-menu {
    width: 100%;
}

/* :link as well as the bare class - style.css colours a:link, which beats a
   single class, and the old drawer showed "Log In" in dark blue on near
   black because of it. */
.mobile-drawer-account-link,
.mobile-drawer-account-link:link,
.mobile-drawer-account-link:visited {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.mobile-drawer-account-link:hover,
.mobile-drawer-account-link:focus-visible {
    background: rgba(255, 255, 255, 0.09);
    border-color: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.mobile-drawer-account-link i {
    color: var(--tr-cyan, #0db1e7);
    font-size: 15px;
}

.mobile-drawer-logout,
.mobile-drawer-logout:link,
.mobile-drawer-logout:visited,
.mobile-drawer-logout i {
    color: #ff8a8a;
}

/* ==========================================================================
   FOCUS, MOTION, CONTRAST
   ========================================================================== */

#main-nav a:focus-visible,
#main-nav button:focus-visible,
.mobile-drawer a:focus-visible,
.mobile-drawer button:focus-visible {
    outline: 2px solid var(--tr-cyan, #0db1e7);
    outline-offset: -2px;
}

#main-nav a:focus:not(:focus-visible),
#main-nav button:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
}

.skip-to-content {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.skip-to-content:focus {
    position: fixed;
    top: 0;
    left: 0;
    width: auto;
    height: auto;
    padding: 1rem;
    background: var(--tyre-reviews-blue);
    color: #ffffff;
    z-index: 9999;
}

@media (prefers-reduced-motion: reduce) {
    #main-nav *,
    #main-nav *::before,
    #main-nav *::after,
    .mobile-drawer *,
    .mobile-drawer.offcanvas-end {
        transition: none !important;
    }

    .mobile-drawer-submenu {
        max-height: none;
    }

    .mobile-drawer-accordion-toggle[aria-expanded="false"] + .mobile-drawer-submenu {
        display: none;
    }
}

@media (prefers-contrast: more) {
    #main-nav,
    .mobile-drawer {
        background: #000;
    }

    #main-nav .site-nav__list .nav-link,
    .mega-links a,
    .mobile-drawer-submenu a {
        color: #fff;
    }
}

/* Q&A badges on tyre pages lean on this; it has always lived here. */
.badge-sm {
    font-size: 0.65rem;
    padding: 0.15rem 0.35rem;
    vertical-align: super;
}

/* ==========================================================================
   BODY SCROLL LOCK (js.js, while the drawer is open)
   ========================================================================== */

body.mobile-drawer-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
    height: 100%;
}