/*
|--------------------------------------------------------------------------
| PROBABLY FITS™
|--------------------------------------------------------------------------
| THE PARTS COUNTER
|
| Design direction:
| - National auto-parts retailer
| - Industrial parts-counter signage
| - Performance catalog energy
| - Hard corners
| - Safety yellow
| - Shop charcoal
| - Dense ecommerce information
| - Completely serious presentation of completely unserious products
|--------------------------------------------------------------------------
*/


/*
|--------------------------------------------------------------------------
| Root
|--------------------------------------------------------------------------
*/

:root {
    --black:
        #0f1113;

    --black-soft:
        #17191c;

    --black-light:
        #202327;

    --graphite:
        #282c31;

    --graphite-light:
        #363b42;

    --steel:
        #8b9298;

    --steel-light:
        #c8cdd1;

    --white:
        #ffffff;

    --off-white:
        #f3f0e8;

    --cream:
        #e8e3d8;

    --yellow:
        #f5c400;

    --yellow-dark:
        #d8ac00;

    --orange:
        #ff5a1f;

    --red:
        #d62828;

    --green:
        #27a844;

    --green-dark:
        #197437;

    --blue:
        #1c70c9;

    --line:
        rgba(255, 255, 255, 0.11);

    --line-dark:
        rgba(15, 17, 19, 0.16);

    --shadow:
        0 18px 48px rgba(0, 0, 0, 0.19);

    --shadow-heavy:
        0 28px 70px rgba(0, 0, 0, 0.34);

    --font-sans:
        Arial,
        Helvetica,
        sans-serif;

    --font-display:
        "Arial Black",
        "Franklin Gothic Medium",
        Arial,
        Helvetica,
        sans-serif;

    --max-width:
        1460px;

    --content-width:
        1320px;

    --transition:
        170ms ease;
}


/*
|--------------------------------------------------------------------------
| Reset
|--------------------------------------------------------------------------
*/

*,
*::before,
*::after {
    box-sizing:
        border-box;
}

html {
    scroll-behavior:
        smooth;
}

body {
    margin:
        0;

    color:
        var(--black);

    background:
        var(--off-white);

    font-family:
        var(--font-sans);

    line-height:
        1.5;

    -webkit-font-smoothing:
        antialiased;
}

body.nav-open {
    overflow:
        hidden;
}

img {
    display:
        block;

    max-width:
        100%;
}

a {
    color:
        inherit;

    text-decoration:
        none;
}

button,
input,
select,
textarea {
    font:
        inherit;
}

button,
select {
    cursor:
        pointer;
}

h1,
h2,
h3,
p,
blockquote {
    margin-top:
        0;

    word-spacing: 0.01em;}

::selection {
    color:
        var(--black);

    background:
        var(--yellow);
}


/*
|--------------------------------------------------------------------------
| Accessibility
|--------------------------------------------------------------------------
*/

.skip-link {
    position:
        fixed;

    top:
        12px;

    left:
        12px;

    z-index:
        9999;

    padding:
        12px
        18px;

    color:
        var(--black);

    background:
        var(--yellow);

    font-weight:
        900;

    transform:
        translateY(-180%);

    transition:
        transform
        var(--transition);
}

.skip-link:focus {
    transform:
        translateY(0);
}

.sr-only {
    position:
        absolute;

    width:
        1px;

    height:
        1px;

    padding:
        0;

    margin:
        -1px;

    overflow:
        hidden;

    clip:
        rect(0, 0, 0, 0);

    white-space:
        nowrap;

    border:
        0;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
    outline:
        3px
        solid
        var(--orange);

    outline-offset:
        3px;
}


/*
|--------------------------------------------------------------------------
| Utility Strip
|--------------------------------------------------------------------------
*/

.utility-strip {
    color:
        var(--off-white);

    background:
        var(--black);

    border-bottom:
        1px
        solid
        rgba(255, 255, 255, 0.08);
}

.utility-strip__inner {
    width:
        min(calc(100% - 40px), var(--max-width));

    min-height:
        38px;

    margin:
        0
        auto;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        28px;
}

.utility-strip__promo {
    margin:
        0;

    color:
        var(--yellow);

    font-size:
        0.72rem;

    font-weight:
        900;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;
}

.utility-strip__nav {
    display:
        flex;

    align-items:
        center;

    gap:
        24px;
}

.utility-strip__nav a {
    color:
        var(--steel-light);

    font-size:
        0.74rem;

    font-weight:
        700;

    transition:
        color
        var(--transition);
}

.utility-strip__nav a:hover {
    color:
        var(--white);
}


/*
|--------------------------------------------------------------------------
| Header
|--------------------------------------------------------------------------
*/

.site-header {
    position:
        sticky;

    top:
        0;

    z-index:
        1000;

    background:
        var(--black-soft);

    box-shadow:
        0 8px 30px rgba(0, 0, 0, 0.18);
}

.site-header__main {
    border-bottom:
        1px
        solid
        rgba(255, 255, 255, 0.08);
}

.site-header__inner {
    width:
        min(calc(100% - 40px), var(--max-width));

    min-height:
        94px;

    margin:
        0
        auto;

    display:
        grid;

    grid-template-columns:
        auto
        minmax(280px, 1fr)
        auto;

    align-items:
        center;

    gap:
        34px;
}


/*
|--------------------------------------------------------------------------
| Brand
|--------------------------------------------------------------------------
*/

.brand {
    position:
        relative;

    display:
        grid;

    grid-template-columns:
        auto
        auto;

    width:
        max-content;

    align-items:
        center;

    color:
        var(--white);

    font-family:
        var(--font-display);

    font-size:
        1.8rem;

    line-height:
        1.04;

    letter-spacing:
        0.01em;

    text-transform:
        uppercase;
}

.brand__primary {
    padding:
        5px
        5px
        4px
        0;
}

.brand__highlight {
    padding:
        6px
        8px
        5px;

    color:
        var(--black);

    background:
        var(--yellow);
}

.brand__tagline {
    grid-column:
        1
        /
        -1;

    margin-top:
        5px;

    color:
        var(--steel-light);

    font-family:
        var(--font-sans);

    font-size:
        0.58rem;

    font-weight:
        900;

    letter-spacing:
        0.17em;

    text-transform:
        uppercase;
}


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

.site-search {
    display:
        grid;

    grid-template-columns:
        1fr
        auto;

    min-width:
        0;

    background:
        var(--white);

    border:
        3px
        solid
        var(--yellow);
}

.site-search input {
    min-width:
        0;

    height:
        50px;

    padding:
        0
        18px;

    color:
        var(--black);

    background:
        var(--white);

    border:
        0;

    outline:
        0;
}

.site-search input::placeholder {
    color:
        #777d82;
}

.site-search button {
    min-width:
        112px;

    padding:
        0
        20px;

    color:
        var(--black);

    background:
        var(--yellow);

    border:
        0;

    font-weight:
        900;

    letter-spacing:
        0.04em;

    text-transform:
        uppercase;

    transition:
        background
        var(--transition);
}

.site-search button:hover {
    background:
        #ffd62b;
}


/*
|--------------------------------------------------------------------------
| Header Actions
|--------------------------------------------------------------------------
*/

.header-actions {
    display:
        flex;

    align-items:
        center;

    gap:
        10px;
}

.header-action {
    position:
        relative;

    min-width:
        78px;

    padding:
        10px
        12px;

    color:
        var(--off-white);

    border-left:
        1px
        solid
        rgba(255, 255, 255, 0.11);

    transition:
        background
        var(--transition);
}

.header-action:hover {
    background:
        rgba(255, 255, 255, 0.06);
}

.header-action__label {
    display:
        block;

    color:
        var(--steel);

    font-size:
        0.66rem;

    font-weight:
        700;

    text-transform:
        uppercase;
}

.header-action strong {
    display:
        block;

    font-size:
        0.83rem;
}

.header-action--cart {
    min-width:
        105px;

    padding-right:
        34px;
}

.cart-count {
    position:
        absolute;

    top:
        8px;

    right:
        8px;

    min-width:
        20px;

    height:
        20px;

    padding:
        0
        5px;

    display:
        grid;

    place-items:
        center;

    color:
        var(--black);

    background:
        var(--yellow);

    border-radius:
        999px;

    font-size:
        0.65rem;

    font-weight:
        900;
}


/*
|--------------------------------------------------------------------------
| Navigation
|--------------------------------------------------------------------------
*/

.site-header__nav {
    background:
        #111315;
}

.primary-nav {
    width:
        min(calc(100% - 40px), var(--max-width));

    min-height:
        48px;

    margin:
        0
        auto;

    display:
        flex;

    align-items:
        stretch;
}

.primary-nav a {
    position:
        relative;

    display:
        flex;

    align-items:
        center;

    padding:
        0
        25px;

    color:
        var(--off-white);

    font-size:
        0.78rem;

    font-weight:
        900;

    letter-spacing:
        0.055em;

    text-transform:
        uppercase;

    border-right:
        1px
        solid
        rgba(255, 255, 255, 0.07);

    transition:
        color
        var(--transition),
        background
        var(--transition);
}

.primary-nav a:first-child {
    border-left:
        1px
        solid
        rgba(255, 255, 255, 0.07);
}

.primary-nav a:hover {
    color:
        var(--black);

    background:
        var(--yellow);
}

.primary-nav__questionable {
    color:
        var(--yellow) !important;
}

.primary-nav__questionable:hover {
    color:
        var(--black) !important;
}

.nav-toggle {
    display:
        none;

    width:
        46px;

    height:
        44px;

    padding:
        10px;

    color:
        var(--white);

    background:
        transparent;

    border:
        1px
        solid
        var(--line);
}

.nav-toggle__line {
    display:
        block;

    width:
        100%;

    height:
        2px;

    margin:
        4px
        0;

    background:
        currentColor;
}


/*
|--------------------------------------------------------------------------
| Shared Shells
|--------------------------------------------------------------------------
*/

.section-shell,
.hero__inner,
.performance-feature__inner,
.tire-air-feature__inner,
.questionable-feature__inner,
.newsletter__inner,
.maintenance-banner__inner,
.site-footer__main,
.site-footer__bottom {
    width:
        min(calc(100% - 48px), var(--content-width));

    margin:
        0
        auto;

    word-spacing: 0.01em;}

.section-heading {
    margin-bottom:
        38px;
}

.section-heading--split {
    display:
        flex;

    align-items:
        end;

    justify-content:
        space-between;

    gap:
        30px;
}

.section-heading__eyebrow {
    margin-bottom:
        10px;

    color:
        #777d82;

    font-size:
        0.7rem;

    font-weight:
        900;

    letter-spacing:
        0.16em;

    text-transform:
        uppercase;
}

.section-heading h2 {
    max-width:
        840px;

    margin:
        0;

    font-family:
        var(--font-display);

    font-size:
        clamp(2rem, 3.8vw, 4.15rem);

    line-height:
        1.05;

    letter-spacing:
        0.012em;

    text-transform:
        uppercase;

}

.text-link {
    flex:
        0
        0
        auto;

    padding-bottom:
        5px;

    color:
        var(--black);

    border-bottom:
        3px
        solid
        var(--yellow);

    font-size:
        0.78rem;

    font-weight:
        900;

    letter-spacing:
        0.05em;

    text-transform:
        uppercase;
}


/*
|--------------------------------------------------------------------------
| Buttons
|--------------------------------------------------------------------------
*/

.button {
    min-height:
        48px;

    padding:
        0
        22px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        var(--black);

    border:
        2px
        solid
        transparent;

    font-size:
        0.76rem;

    font-weight:
        900;

    letter-spacing:
        0.055em;

    text-transform:
        uppercase;

    transition:
        transform
        var(--transition),
        background
        var(--transition),
        color
        var(--transition),
        border-color
        var(--transition);
}

.button:hover {
    transform:
        translateY(-2px);
}

.button--primary {
    color:
        var(--black);

    background:
        var(--yellow);

    border-color:
        var(--yellow);
}

.button--primary:hover {
    background:
        #ffdc36;

    border-color:
        #ffdc36;
}

.button--secondary {
    color:
        var(--off-white);

    background:
        transparent;

    border-color:
        rgba(255, 255, 255, 0.34);
}

.button--secondary:hover {
    border-color:
        var(--white);
}

.button--fitment {
    align-self:
        end;

    min-height:
        45px;

    background:
        var(--yellow);

    border:
        0;
}

.button--light {
    color:
        var(--black);

    background:
        var(--off-white);
}

.button--card {
    min-height:
        38px;

    padding:
        0
        15px;

    background:
        var(--yellow);

    font-size:
        0.68rem;
}

.button--hazard {
    color:
        var(--black);

    background:
        var(--yellow);

    border-color:
        var(--yellow);
}


/*
|--------------------------------------------------------------------------
| Fitment Bar
|--------------------------------------------------------------------------
*/

.fitment-bar {
    color:
        var(--black);

    background:
        var(--yellow);

    border-bottom:
        5px
        solid
        var(--black);
}

.fitment-bar__inner {
    width:
        min(calc(100% - 48px), var(--content-width));

    margin:
        0
        auto;

    padding:
        18px
        0;

    display:
        grid;

    grid-template-columns:
        auto
        1fr
        auto;

    align-items:
        end;

    gap:
        28px;
}

.fitment-bar__heading {
    min-width:
        170px;
}

.fitment-bar__eyebrow {
    margin:
        0
        0
        2px;

    font-size:
        0.62rem;

    font-weight:
        900;

    letter-spacing:
        0.12em;

    text-transform:
        uppercase;
}

.fitment-bar h2 {
    margin:
        0;

    font-family:
        var(--font-display);

    font-size:
        1.55rem;

    line-height:
        1;

    text-transform:
        uppercase;
}

.fitment-form {
    display:
        grid;

    grid-template-columns:
        repeat(4, minmax(120px, 1fr))
        auto;

    gap:
        8px;
}

.fitment-field label {
    display:
        block;

    margin-bottom:
        4px;

    font-size:
        0.62rem;

    font-weight:
        900;

    letter-spacing:
        0.06em;

    text-transform:
        uppercase;
}

.fitment-field select {
    width:
        100%;

    min-height:
        45px;

    padding:
        0
        35px
        0
        12px;

    color:
        var(--black);

    background:
        var(--white);

    border:
        2px
        solid
        var(--black);

    border-radius:
        0;
}

.fitment-bar__disclaimer {
    align-self:
        center;

    max-width:
        110px;

    margin:
        0;

    font-size:
        0.66rem;

    font-weight:
        700;

    line-height:
        1.3;
}


/*
|--------------------------------------------------------------------------
| Hero
|--------------------------------------------------------------------------
*/

.hero {
    position:
        relative;

    overflow:
        hidden;

    color:
        var(--off-white);

    background:
        linear-gradient(
            120deg,
            #0f1113 0%,
            #191c20 55%,
            #0e1012 100%
        );

    word-spacing: 0.01em;}

.hero::before {
    content:
        "";

    position:
        absolute;

    top:
        -100px;

    right:
        -160px;

    width:
        720px;

    height:
        720px;

    background:
        radial-gradient(
            circle,
            rgba(245, 196, 0, 0.14),
            transparent 63%
        );

    pointer-events:
        none;

    word-spacing: 0.01em;}

.hero__inner {
    position:
        relative;

    z-index:
        1;

    min-height:
        730px;

    padding:
        72px
        0;

    display:
        grid;

    grid-template-columns:
        minmax(0, 1.08fr)
        minmax(430px, 0.92fr);

    align-items:
        center;

    gap:
        70px;

    word-spacing: 0.01em;}

.hero__badges {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        8px;

    margin-bottom:
        28px;

    word-spacing: 0.01em;}

.product-badge {
    display:
        inline-flex;

    min-height:
        26px;

    align-items:
        center;

    padding:
        0
        9px;

    color:
        var(--black);

    background:
        var(--steel-light);

    font-size:
        0.61rem;

    font-weight:
        900;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;
}

.product-badge--sale {
    color:
        var(--white);

    background:
        var(--red);
}

.product-badge--fit {
    color:
        var(--white);

    background:
        var(--green);
}

.product-badge--performance {
    color:
        var(--black);

    background:
        var(--yellow);
}

.hero__brand {
    margin-bottom:
        11px;

    color:
        var(--yellow);

    font-size:
        0.72rem;

    font-weight:
        900;

    letter-spacing:
        0.18em;

    text-transform:
        uppercase;

    word-spacing: 0.01em;}

.hero h1 {
    max-width:
        760px;

    margin:
        0;

    font-family:
        var(--font-display);

    font-size:
        clamp(3.25rem, 5.8vw, 5.45rem);

    line-height:
        1.02;

    letter-spacing:
        0.015em;

    text-transform:
        uppercase;

    word-spacing: 0.01em;}

.hero h1 span {
    display:
        block;

    color:
        var(--yellow);

    word-spacing: 0.01em;}

.hero__lead {
    max-width:
        660px;

    margin:
        30px
        0
        24px;

    color:
        #c8cdd1;

    font-size:
        clamp(1rem, 1.35vw, 1.2rem);

    line-height:
        1.02;

    word-spacing: 0.01em;}

.hero__rating {
    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    margin-bottom:
        26px;

    font-size:
        0.78rem;

    font-weight:
        700;

    word-spacing: 0.01em;}

.stars {
    color:
        var(--yellow);

    letter-spacing:
        0.015em;

}

.hero__rating a {
    color:
        var(--steel-light);

    border-bottom:
        1px
        solid
        rgba(255, 255, 255, 0.22);

    word-spacing: 0.01em;}

.hero__purchase {
    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        28px;

    padding:
        24px
        0;

    border-top:
        1px
        solid
        var(--line);

    border-bottom:
        1px
        solid
        var(--line);

    word-spacing: 0.01em;}

.hero__price-label {
    display:
        block;

    margin-bottom:
        2px;

    color:
        var(--steel);

    font-size:
        0.62rem;

    font-weight:
        900;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;

    word-spacing: 0.01em;}

.hero__price strong {
    color:
        var(--white);

    font-family:
        var(--font-display);

    font-size:
        3rem;

    line-height:
        1;

    word-spacing: 0.01em;}

.hero__actions {
    display:
        flex;

    gap:
        10px;

    word-spacing: 0.01em;}

.hero__fit {
    margin-top:
        20px;

    display:
        flex;

    flex-wrap:
        wrap;

    align-items:
        center;

    gap:
        15px;

    color:
        var(--steel-light);

    font-size:
        0.72rem;

    word-spacing: 0.01em;}

.fit-status {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        7px;

    color:
        var(--green-dark);

    font-size:
        0.69rem;

    font-weight:
        900;
}

.fit-status::before {
    content:
        "✓";

    width:
        18px;

    height:
        18px;

    display:
        inline-grid;

    place-items:
        center;

    color:
        var(--white);

    background:
        var(--green);

    border-radius:
        50%;

    font-size:
        0.6rem;
}

.hero .fit-status {
    color:
        #87e0a3;

    word-spacing: 0.01em;}

.hero__fine-print {
    margin:
        12px
        0
        0;

    color:
        #71777d;

    font-size:
        0.68rem;

    word-spacing: 0.01em;}


/*
|--------------------------------------------------------------------------
| Hero Product Illustration
|--------------------------------------------------------------------------
*/

.hero__product {
    position:
        relative;

    min-height:
        600px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    word-spacing: 0.01em;}

.hero__product::before {
    content:
        "";

    position:
        absolute;

    bottom:
        95px;

    left:
        50%;

    width:
        80%;

    height:
        56px;

    background:
        rgba(0, 0, 0, 0.55);

    filter:
        blur(20px);

    border-radius:
        50%;

    transform:
        translateX(-50%);

    word-spacing: 0.01em;}

.product-render {
    position:
        relative;

    z-index:
        2;

    width:
        min(78%, 340px);

    aspect-ratio:
        0.63;

    padding:
        52px
        30px
        35px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    color:
        var(--black);

    background:
        linear-gradient(
            90deg,
            #e1a400 0%,
            #ffd72f 17%,
            #f5c400 52%,
            #d89600 100%
        );

    border:
        5px
        solid
        #0b0c0d;

    border-radius:
        22px
        22px
        38px
        38px;

    box-shadow:
        inset 0 0 0 3px rgba(255, 255, 255, 0.18),
        inset -24px 0 40px rgba(0, 0, 0, 0.17),
        0 40px 65px rgba(0, 0, 0, 0.42);

    transform:
        rotate(4deg);
}

.product-render::before {
    content:
        "";

    position:
        absolute;

    top:
        -38px;

    left:
        22%;

    width:
        56%;

    height:
        47px;

    background:
        linear-gradient(
            90deg,
            #1c1f22,
            #33373b,
            #151719
        );

    border:
        4px
        solid
        #090a0b;

    border-radius:
        10px
        10px
        3px
        3px;
}

.product-render::after {
    content:
        "";

    position:
        absolute;

    inset:
        23%
        9%
        18%;

    border:
        3px
        solid
        rgba(15, 17, 19, 0.78);

    pointer-events:
        none;
}

.product-render__topline {
    position:
        relative;

    z-index:
        2;

    margin-bottom:
        15px;

    padding:
        5px
        9px;

    color:
        var(--yellow);

    background:
        var(--black);

    font-size:
        0.61rem;

    font-weight:
        900;

    letter-spacing:
        0.14em;

    text-transform:
        uppercase;
}

.product-render__title {
    position:
        relative;

    z-index:
        2;

    text-align:
        center;

    font-family:
        var(--font-display);

    font-size:
        clamp(2.9rem, 5vw, 4.8rem);

    $10.94;

    letter-spacing:
        0.01em;

    text-transform:
        uppercase;

    word-spacing: 0.01em;}

.product-render__title span {
    display:
        block;

    margin-top:
        10px;

    color:
        var(--red);

    word-spacing: 0.01em;}

.product-render__formula {
    position:
        relative;

    z-index:
        2;

    margin-top:
        27px;

    font-size:
        0.72rem;

    font-weight:
        900;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;
}

.product-render__volume {
    position:
        absolute;

    bottom:
        45px;

    left:
        50%;

    z-index:
        2;

    width:
        80%;

    text-align:
        center;

    font-size:
        0.6rem;

    font-weight:
        800;

    transform:
        translateX(-50%);
}

.hero__specs {
    position:
        relative;

    z-index:
        4;

    width:
        min(100%, 500px);

    margin-top:
        35px;

    display:
        grid;

    grid-template-columns:
        repeat(3, 1fr);

    border:
        1px
        solid
        var(--line);

    word-spacing: 0.01em;}

.hero__specs div {
    padding:
        17px;

    text-align:
        center;

    background:
        rgba(255, 255, 255, 0.035);

    word-spacing: 0.01em;}

.hero__specs div + div {
    border-left:
        1px
        solid
        var(--line);

    word-spacing: 0.01em;}

.hero__specs strong {
    display:
        block;

    color:
        var(--yellow);

    font-family:
        var(--font-display);

    font-size:
        1.8rem;

    word-spacing: 0.01em;}

.hero__specs span {
    color:
        var(--steel);

    font-size:
        0.62rem;

    font-weight:
        900;

    letter-spacing:
        0.07em;

    text-transform:
        uppercase;

    word-spacing: 0.01em;}


/*
|--------------------------------------------------------------------------
| Departments
|--------------------------------------------------------------------------
*/

.departments-section {
    padding:
        105px
        0;

    background:
        var(--off-white);
}

.department-grid {
    display:
        grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap:
        12px;
}

.department-card {
    position:
        relative;

    min-height:
        220px;

    padding:
        30px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        flex-end;

    overflow:
        hidden;

    color:
        var(--off-white);

    background:
        var(--black-soft);

    border:
        1px
        solid
        #090a0b;

    box-shadow:
        0 8px 0
        rgba(15, 17, 19, 0.12);

    transition:
        transform
        var(--transition),
        background
        var(--transition);
}

.department-card::after {
    content:
        "";

    position:
        absolute;

    top:
        0;

    right:
        0;

    width:
        90px;

    height:
        90px;

    background:
        repeating-linear-gradient(
            -45deg,
            var(--yellow) 0,
            var(--yellow) 10px,
            var(--black) 10px,
            var(--black) 20px
        );

    clip-path:
        polygon(100% 0, 100% 100%, 0 0);

    opacity:
        0.86;
}

.department-card:hover {
    background:
        #22262a;

    transform:
        translateY(-4px);
}

.department-card__code {
    position:
        absolute;

    top:
        20px;

    left:
        24px;

    color:
        var(--yellow);

    font-family:
        var(--font-display);

    font-size:
        2.7rem;

    opacity:
        0.34;
}

.department-card strong {
    position:
        relative;

    z-index:
        2;

    display:
        block;

    margin-bottom:
        10px;

    font-family:
        var(--font-display);

    font-size:
        1.65rem;

    line-height:
        1.10;

    text-transform:
        uppercase;

    letter-spacing:
        0.015em;
}

.department-card > span:last-child {
    position:
        relative;

    z-index:
        2;

    max-width:
        320px;

    color:
        var(--steel-light);

    font-size:
        0.84rem;

    line-height:
        1.55;
}

.department-card--restricted {
    color:
        var(--yellow);

    background:
        #13100b;

    border-color:
        var(--yellow);
}


/*
|--------------------------------------------------------------------------
| Product Grid
|--------------------------------------------------------------------------
*/

.products-section {
    padding:
        105px
        0;

    background:
        #dedbd2;
}

.product-grid {
    display:
        grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap:
        16px;
}

.product-card {
    position:
        relative;

    min-width:
        0;

    display:
        flex;

    flex-direction:
        column;

    background:
        var(--white);

    border:
        1px
        solid
        #c3c1ba;

    box-shadow:
        0 7px 0
        rgba(15, 17, 19, 0.08);

    transition:
        transform
        var(--transition),
        box-shadow
        var(--transition);
}

.product-card:hover {
    transform:
        translateY(-5px);

    box-shadow:
        0 13px 0
        rgba(15, 17, 19, 0.09);
}

.product-card__flags {
    position:
        absolute;

    top:
        12px;

    left:
        12px;

    z-index:
        5;
}

.product-card__media {
    min-height:
        290px;

    display:
        grid;

    place-items:
        center;

    padding:
        40px
        20px
        20px;

    overflow:
        hidden;

    background:
        linear-gradient(
            145deg,
            #f3f3ef,
            #dddcd5
        );

    border-bottom:
        1px
        solid
        #d4d1c8;
}

.product-card__body {
    flex:
        1;

    padding:
        22px;

    display:
        flex;

    flex-direction:
        column;
}

.product-card__brand {
    margin:
        0
        0
        7px;

    color:
        #686d72;

    font-size:
        0.63rem;

    font-weight:
        900;

    letter-spacing:
        0.11em;

    text-transform:
        uppercase;
}

.product-card h3 {
    min-height:
        48px;

    margin:
        0
        0
        9px;

    font-size:
        0.95rem;

    line-height:
        1.35;
}

.product-card h3 a:hover {
    text-decoration:
        underline;
}

.product-card__part {
    margin:
        0
        0
        10px;

    color:
        #7a7e82;

    font-family:
        Consolas,
        monospace;

    font-size:
        0.66rem;
}

.product-card__rating {
    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    margin-bottom:
        12px;

    color:
        #666b70;

    font-size:
        0.7rem;
}

.product-card__rating span:first-child {
    color:
        #deaa00;
}

.product-card__stock {
    margin:
        13px
        0;

    color:
        var(--green-dark);

    font-size:
        0.72rem;

    font-weight:
        900;

    text-transform:
        uppercase;
}

.product-card__purchase {
    margin-top:
        auto;

    padding-top:
        16px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        12px;

    border-top:
        1px
        solid
        #e3e0da;
}

.product-card__price {
    font-family:
        var(--font-display);

    font-size:
        1.8rem;
}

.products-section__fine-print {
    margin:
        18px
        0
        0;

    color:
        #777b7e;

    font-size:
        0.68rem;
}


/*
|--------------------------------------------------------------------------
| Mini Product Illustrations
|--------------------------------------------------------------------------
*/

.mini-product {
    position:
        relative;

    width:
        145px;

    min-height:
        190px;

    padding:
        27px
        16px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    text-align:
        center;

    color:
        var(--black);

    border:
        4px
        solid
        var(--black);

    box-shadow:
        14px 16px 0
        rgba(15, 17, 19, 0.12);

    transform:
        rotate(-2deg);
}

.mini-product::before {
    content:
        "";

    position:
        absolute;

    top:
        -25px;

    left:
        29%;

    width:
        42%;

    height:
        27px;

    background:
        var(--black);

    border-radius:
        5px
        5px
        0
        0;
}

.mini-product > span {
    display:
        block;

    margin-bottom:
        10px;

    font-size:
        0.55rem;

    font-weight:
        900;

    letter-spacing:
        0.11em;

    text-transform:
        uppercase;
}

.mini-product strong {
    font-family:
        var(--font-display);

    font-size:
        2.05rem;

    line-height:
        1.04;

    text-transform:
        uppercase;
}

.mini-product strong em {
    display:
        block;

    margin-top:
        6px;

    font-style:
        normal;
}

.mini-product--blinker {
    background:
        var(--yellow);
}

.mini-product--blinker strong em {
    color:
        var(--red);
}

.mini-product--tire-air {
    min-height:
        170px;

    background:
        #d9e0e4;

    border-radius:
        12px
        12px
        3px
        3px;

    transform:
        rotate(3deg);
}

.mini-product--tire-air::before {
    height:
        18px;

    top:
        -17px;

    border-radius:
        2px;
}

.mini-product--tire-air strong em {
    color:
        var(--blue);
}

.mini-product--bearing {
    width:
        180px;

    min-height:
        180px;

    border-radius:
        50%;

    color:
        var(--off-white);

    background:
        radial-gradient(
            circle,
            #111 0 22%,
            #93999f 23% 38%,
            #1b1d20 39% 47%,
            #b6bcc0 48% 63%,
            #222529 64% 100%
        );

    transform:
        rotate(0);
}

.mini-product--bearing::before {
    display:
        none;
}

.mini-product--bearing > span,
.mini-product--bearing strong {
    position:
        relative;

    z-index:
        3;

    text-shadow:
        0 2px 3px
        #000;
}

.mini-product--bearing strong {
    font-size:
        1.5rem;
}

.mini-product--bearing strong em {
    color:
        var(--yellow);
}

.mini-product--horsepower {
    min-height:
        180px;

    color:
        var(--white);

    background:
        linear-gradient(
            120deg,
            var(--red),
            #8b1010
        );

    transform:
        rotate(-4deg);
}

.mini-product--horsepower::before {
    background:
        #c2c5c7;
}

.mini-product--horsepower strong em {
    color:
        var(--yellow);
}


/*
|--------------------------------------------------------------------------
| Maintenance Banner
|--------------------------------------------------------------------------
*/

.maintenance-banner {
    padding:
        0;

    color:
        var(--black);

    background:
        var(--yellow);

    border-top:
        7px
        solid
        var(--black);

    border-bottom:
        7px
        solid
        var(--black);
}

.maintenance-banner__inner {
    min-height:
        240px;

    padding:
        45px
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        50px;
}

.maintenance-banner__eyebrow {
    margin:
        0
        0
        7px;

    font-size:
        0.68rem;

    font-weight:
        900;

    letter-spacing:
        0.13em;

    text-transform:
        uppercase;
}

.maintenance-banner h2 {
    margin:
        0;

    font-family:
        var(--font-display);

    font-size:
        clamp(2.1rem, 3.9vw, 4.35rem);

    line-height:
        1.05;

    text-transform:
        uppercase;

    letter-spacing:
        0.012em;
}

.maintenance-banner p:not(.maintenance-banner__eyebrow) {
    max-width:
        740px;

    margin:
        17px
        0
        0;

    font-weight:
        700;
}


/*
|--------------------------------------------------------------------------
| Performance Feature
|--------------------------------------------------------------------------
*/

.performance-feature {
    position:
        relative;

    overflow:
        hidden;

    color:
        var(--off-white);

    background:
        radial-gradient(
            circle at 20% 50%,
            rgba(214, 40, 40, 0.18),
            transparent 34%
        ),
        #101214;
}

.performance-feature__inner {
    min-height:
        740px;

    padding:
        80px
        0;

    display:
        grid;

    grid-template-columns:
        0.85fr
        1.15fr;

    align-items:
        center;

    gap:
        80px;
}

.performance-feature__visual {
    min-height:
        520px;

    display:
        grid;

    place-items:
        center;
}

.performance-can {
    position:
        relative;

    width:
        260px;

    aspect-ratio:
        0.68;

    padding:
        50px
        25px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    text-align:
        center;

    background:
        linear-gradient(
            90deg,
            #810d0d,
            #e92f27 25%,
            #c51919 60%,
            #6f0909
        );

    border:
        4px
        solid
        #080909;

    border-radius:
        16px
        16px
        30px
        30px;

    box-shadow:
        25px 38px 60px
        rgba(0, 0, 0, 0.44);

    transform:
        rotate(-6deg);
}

.performance-can::before {
    content:
        "";

    position:
        absolute;

    top:
        -23px;

    width:
        84%;

    height:
        26px;

    background:
        linear-gradient(
            #e0e3e3,
            #757a7d
        );

    border:
        3px
        solid
        #111;
}

.performance-can span {
    margin-bottom:
        20px;

    color:
        var(--yellow);

    font-size:
        0.66rem;

    font-weight:
        900;

    letter-spacing:
        0.14em;
}

.performance-can strong {
    color:
        var(--yellow);

    font-family:
        var(--font-display);

    font-size:
        8rem;

    line-height:
        1.04;
}

.performance-can em {
    color:
        var(--white);

    font-family:
        var(--font-display);

    font-size:
        3.2rem;

    font-style:
        normal;
}

.performance-can b {
    margin-top:
        20px;

    font-size:
        0.8rem;

    letter-spacing:
        0.08em;
}

.performance-feature__copy h2 {
    max-width:
        770px;

    margin:
        0;

    font-family:
        var(--font-display);

    font-size:
        clamp(2.7rem, 4.7vw, 5.4rem);

    line-height:
        1.04;

    text-transform:
        uppercase;

    letter-spacing:
        0.012em;
}

.performance-feature__lead {
    max-width:
        690px;

    margin:
        28px
        0;

    color:
        #b9bec2;

    font-size:
        1.08rem;

    line-height:
        1.7;
}

.performance-specs {
    margin:
        35px
        0;

    display:
        grid;

    grid-template-columns:
        repeat(2, 1fr);

    border:
        1px
        solid
        var(--line);
}

.performance-specs div {
    min-height:
        96px;

    padding:
        19px;

    background:
        rgba(255, 255, 255, 0.025);

    border:
        1px
        solid
        rgba(255, 255, 255, 0.06);
}

.performance-specs span {
    display:
        block;

    margin-bottom:
        5px;

    color:
        var(--steel);

    font-size:
        0.62rem;

    font-weight:
        900;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;
}

.performance-specs strong {
    font-family:
        var(--font-display);

    font-size:
        1.55rem;

    text-transform:
        uppercase;

    letter-spacing:
        0.018em;
    line-height:
        1.12;
}

.performance-feature__purchase {
    display:
        flex;

    align-items:
        center;

    gap:
        30px;
}

.performance-feature__purchase > strong {
    font-family:
        var(--font-display);

    font-size:
        3rem;
}


/*
|--------------------------------------------------------------------------
| Counter Picks
|--------------------------------------------------------------------------
*/

.counter-picks {
    padding:
        105px
        0;

    background:
        var(--off-white);
}

.counter-picks__grid {
    display:
        grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap:
        10px;
}

.counter-pick {
    min-height:
        130px;

    padding:
        22px
        24px;

    display:
        grid;

    grid-template-columns:
        auto
        1fr
        auto;

    align-items:
        center;

    gap:
        22px;

    color:
        var(--black);

    background:
        var(--white);

    border:
        2px
        solid
        var(--black);

    box-shadow:
        6px 6px 0
        var(--black);

    transition:
        transform
        var(--transition),
        box-shadow
        var(--transition);
}

.counter-pick:hover {
    transform:
        translate(-2px, -2px);

    box-shadow:
        9px 9px 0
        var(--yellow);
}

.counter-pick__number {
    color:
        var(--yellow-dark);

    font-family:
        var(--font-display);

    font-size:
        2.5rem;
}

.counter-pick__department {
    display:
        block;

    margin-bottom:
        3px;

    color:
        #74797d;

    font-size:
        0.62rem;

    font-weight:
        900;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;
}

.counter-pick strong {
    display:
        block;

    font-size:
        1rem;
}

.counter-pick p {
    margin:
        3px
        0
        0;

    color:
        #757a7e;

    font-size:
        0.75rem;
}

.counter-pick__price {
    font-family:
        var(--font-display);

    font-size:
        1.8rem;
}


/*
|--------------------------------------------------------------------------
| Tire Air Feature
|--------------------------------------------------------------------------
*/

.tire-air-feature {
    overflow:
        hidden;

    color:
        var(--black);

    background:
        linear-gradient(
            115deg,
            #d7dce0,
            #f6f5f0
        );

    border-top:
        1px
        solid
        #babec2;

    border-bottom:
        1px
        solid
        #babec2;
}

.tire-air-feature__inner {
    min-height:
        700px;

    padding:
        80px
        0;

    display:
        grid;

    grid-template-columns:
        1.08fr
        0.92fr;

    align-items:
        center;

    gap:
        80px;
}

.tire-air-feature__copy h2 {
    margin:
        0;

    font-family:
        var(--font-display);

    font-size:
        clamp(2.8rem, 4.8vw, 4.7rem);

    line-height:
        1.04;

    text-transform:
        uppercase;

    letter-spacing:
        0.012em;
}

.tire-air-feature__name {
    margin:
        30px
        0
        2px;

    font-size:
        1.3rem;

    font-weight:
        900;

    text-transform:
        uppercase;
}

.tire-air-feature__subtitle {
    margin:
        0;

    color:
        #5e656b;

    font-size:
        0.75rem;

    font-weight:
        900;

    letter-spacing:
        0.1em;

    text-transform:
        uppercase;

    word-spacing: 0.01em;}

.tire-air-feature__lead {
    max-width:
        670px;

    margin:
        24px
        0;

    color:
        #555c61;

    font-size:
        1.05rem;

    line-height:
        1.7;
}

.tire-air-feature__stats {
    display:
        grid;

    grid-template-columns:
        repeat(3, 1fr);

    max-width:
        600px;

    margin:
        30px
        0;

    border-top:
        2px
        solid
        var(--black);

    border-bottom:
        2px
        solid
        var(--black);
}

.tire-air-feature__stats div {
    padding:
        17px
        15px;
}

.tire-air-feature__stats div + div {
    border-left:
        1px
        solid
        var(--line-dark);
}

.tire-air-feature__stats strong {
    display:
        block;

    font-family:
        var(--font-display);

    font-size:
        2rem;
}

.tire-air-feature__stats span {
    color:
        #646b70;

    font-size:
        0.63rem;

    font-weight:
        900;

    text-transform:
        uppercase;
}

.tire-air-feature__actions {
    display:
        flex;

    align-items:
        center;

    gap:
        26px;
}

.tire-air-feature__actions > strong {
    font-family:
        var(--font-display);

    font-size:
        2.8rem;
}

.tire-air-feature__fine-print {
    margin:
        15px
        0
        0;

    color:
        #777d82;

    font-size:
        0.68rem;
}

.tire-air-feature__visual {
    min-height:
        500px;

    display:
        grid;

    place-items:
        center;
}

.air-canister {
    position:
        relative;

    width:
        285px;

    aspect-ratio:
        0.7;

    padding:
        55px
        28px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    text-align:
        center;

    color:
        var(--black);

    background:
        linear-gradient(
            90deg,
            #8c969d 0%,
            #e8edef 24%,
            #c8cfd3 60%,
            #79838a 100%
        );

    border:
        5px
        solid
        #1b1d1f;

    border-radius:
        18px
        18px
        38px
        38px;

    box-shadow:
        inset 16px 0 30px
        rgba(255, 255, 255, 0.25),
        inset -25px 0 38px
        rgba(0, 0, 0, 0.17),
        24px 30px 50px
        rgba(0, 0, 0, 0.25);

    transform:
        rotate(5deg);
}

.air-canister::before {
    content:
        "";

    position:
        absolute;

    top:
        -24px;

    width:
        65%;

    height:
        28px;

    background:
        #24272a;

    border:
        4px
        solid
        #111;
}

.air-canister__brand {
    margin-bottom:
        20px;

    color:
        var(--blue);

    font-size:
        0.66rem;

    font-weight:
        900;

    letter-spacing:
        0.13em;
}

.air-canister strong {
    font-family:
        var(--font-display);

    font-size:
        4.5rem;

    line-height:
        1.04;

    text-transform:
        uppercase;
}

.air-canister strong span {
    display:
        block;

    margin-top:
        9px;

    color:
        var(--blue);
}

.air-canister em {
    margin-top:
        24px;

    font-size:
        0.8rem;

    font-style:
        normal;

    font-weight:
        900;
}

.air-canister b {
    margin-top:
        35px;

    padding:
        6px
        10px;

    color:
        var(--white);

    background:
        var(--black);

    font-size:
        0.67rem;
}


/*
|--------------------------------------------------------------------------
| Deal Strip
|--------------------------------------------------------------------------
*/

.deal-strip {
    color:
        var(--white);

    background:
        var(--red);
}

.deal-strip__inner {
    min-height:
        135px;

    padding:
        27px
        24px;

    display:
        grid;

    grid-template-columns:
        auto
        1fr
        auto;

    align-items:
        center;

    gap:
        25px;

    text-align:
        left;
}

.deal-strip__label {
    padding:
        8px
        10px;

    color:
        var(--red);

    background:
        var(--white);

    font-size:
        0.62rem;

    font-weight:
        900;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;
}

.deal-strip h2 {
    margin:
        0;

    font-family:
        var(--font-display);

    font-size:
        clamp(1.9rem, 3.3vw, 3.8rem);

    line-height:
        1;

    text-transform:
        uppercase;
}

.deal-strip a {
    padding-bottom:
        4px;

    border-bottom:
        3px
        solid
        var(--yellow);

    font-size:
        0.74rem;

    font-weight:
        900;

    text-transform:
        uppercase;
}

.deal-strip p {
    grid-column:
        2
        /
        -1;

    margin:
        -12px
        0
        0;

    color:
        rgba(255, 255, 255, 0.72);

    font-size:
        0.67rem;
}


/*
|--------------------------------------------------------------------------
| Reviews
|--------------------------------------------------------------------------
*/

.reviews-section {
    padding:
        105px
        0;

    background:
        var(--off-white);
}

.reviews-grid {
    display:
        grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap:
        14px;
}

.review-card {
    min-height:
        355px;

    padding:
        30px;

    display:
        flex;

    flex-direction:
        column;

    background:
        var(--white);

    border:
        2px
        solid
        var(--black);

    box-shadow:
        7px 7px 0
        var(--black);
}

.review-card__stars {
    margin-bottom:
        26px;

    color:
        #dfa900;

    letter-spacing:
        0.1em;
}

.review-card h3 {
    margin:
        0
        0
        17px;

    font-family:
        var(--font-display);

    font-size:
        1.75rem;

    line-height:
        1.10;

    text-transform:
        uppercase;

    letter-spacing:
        0.012em;
}

.review-card blockquote {
    margin:
        0;

    color:
        #555b60;

    font-size:
        0.95rem;

    line-height:
        1.7;
}

.review-card footer {
    margin-top:
        auto;

    padding-top:
        25px;

    border-top:
        1px
        solid
        #d7d4cd;
}

.review-card footer strong,
.review-card footer span {
    display:
        block;
}

.review-card footer strong {
    font-size:
        0.83rem;
}

.review-card footer span {
    margin-top:
        2px;

    color:
        #7a7f83;

    font-size:
        0.68rem;
}


/*
|--------------------------------------------------------------------------
| Questionable Technology
|--------------------------------------------------------------------------
*/

.questionable-feature {
    position:
        relative;

    overflow:
        hidden;

    color:
        var(--off-white);

    background:
        #090a0b;

    border-top:
        9px
        solid
        var(--yellow);
}

.questionable-feature::before {
    content:
        "";

    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            90deg,
            transparent 0 48%,
            rgba(245, 196, 0, 0.035) 48% 49%,
            transparent 49% 100%
        );

    background-size:
        70px
        70px;

    pointer-events:
        none;
}

.questionable-feature__warning {
    position:
        absolute;

    top:
        0;

    right:
        0;

    z-index:
        4;

    padding:
        12px
        34px;

    color:
        var(--black);

    background:
        repeating-linear-gradient(
            -45deg,
            var(--yellow) 0,
            var(--yellow) 14px,
            #f0ae00 14px,
            #f0ae00 28px
        );

    font-size:
        0.66rem;

    font-weight:
        900;

    letter-spacing:
        0.13em;

    text-transform:
        uppercase;
}

.questionable-feature__inner {
    position:
        relative;

    z-index:
        2;

    min-height:
        730px;

    padding:
        95px
        0;

    display:
        grid;

    grid-template-columns:
        1.08fr
        0.92fr;

    align-items:
        center;

    gap:
        75px;
}

.questionable-feature__eyebrow {
    margin:
        0
        0
        14px;

    color:
        var(--yellow);

    font-size:
        0.68rem;

    font-weight:
        900;

    letter-spacing:
        0.13em;

    text-transform:
        uppercase;
}

.questionable-feature h2 {
    max-width:
        750px;

    margin:
        0;

    font-family:
        var(--font-display);

    font-size:
        clamp(2.9rem, 4.8vw, 4.9rem);

    line-height:
        1.04;

    text-transform:
        uppercase;

    letter-spacing:
        0.012em;
}

.questionable-feature__edition {
    margin:
        16px
        0
        0;

    color:
        var(--yellow);

    font-family:
        var(--font-display);

    font-size:
        2rem;

    text-transform:
        uppercase;
}

.questionable-feature__lead {
    max-width:
        680px;

    margin:
        28px
        0;

    color:
        #aeb4b8;

    font-size:
        1.05rem;

    line-height:
        1.7;
}

.questionable-feature__badges {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        7px;

    margin:
        28px
        0;
}

.questionable-feature__badges span {
    padding:
        8px
        10px;

    color:
        var(--black);

    background:
        var(--yellow);

    font-size:
        0.59rem;

    font-weight:
        900;

    letter-spacing:
        0.07em;

    text-transform:
        uppercase;
}

.questionable-feature__purchase {
    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        28px;

    padding-top:
        25px;

    border-top:
        1px
        solid
        var(--line);
}

.questionable-feature__purchase > strong {
    font-family:
        var(--font-display);

    font-size:
        3.2rem;
}

.questionable-feature__warning-copy {
    margin:
        15px
        0
        0;

    color:
        #767c80;

    font-size:
        0.66rem;

    font-weight:
        700;

    text-transform:
        uppercase;
}

.questionable-feature__visual {
    min-height:
        500px;

    display:
        grid;

    place-items:
        center;
}

.temporal-device {
    position:
        relative;

    width:
        min(100%, 420px);

    aspect-ratio:
        1;

    display:
        grid;

    place-items:
        center;

    background:
        radial-gradient(
            circle,
            #22282d 0 22%,
            #090a0b 23% 28%,
            #3b4146 29% 32%,
            #121416 33% 56%,
            #2c3033 57% 62%,
            #090a0b 63% 100%
        );

    border:
        8px
        solid
        #292d30;

    border-radius:
        50%;

    box-shadow:
        0 0 0 4px
        var(--yellow),
        0 0 60px
        rgba(245, 196, 0, 0.16),
        inset 0 0 55px
        rgba(0, 0, 0, 0.7);
}

.temporal-device::before,
.temporal-device::after {
    content:
        "";

    position:
        absolute;

    width:
        16px;

    height:
        74%;

    background:
        var(--yellow);

    opacity:
        0.48;
}

.temporal-device::before {
    transform:
        rotate(45deg);
}

.temporal-device::after {
    transform:
        rotate(-45deg);
}

.temporal-device__core {
    position:
        relative;

    z-index:
        3;

    width:
        145px;

    aspect-ratio:
        1;

    display:
        grid;

    place-items:
        center;

    align-content:
        center;

    color:
        var(--black);

    background:
        var(--yellow);

    border-radius:
        50%;

    box-shadow:
        0 0 45px
        rgba(245, 196, 0, 0.46);
}

.temporal-device__core span {
    font-family:
        var(--font-display);

    font-size:
        3.2rem;

    line-height:
        1.04;
}

.temporal-device__core strong {
    margin-top:
        5px;

    font-size:
        0.8rem;

    letter-spacing:
        0.18em;
}

.temporal-device__label {
    position:
        absolute;

    bottom:
        -42px;

    left:
        50%;

    width:
        max-content;

    max-width:
        90%;

    color:
        #8d9499;

    font-size:
        0.63rem;

    font-weight:
        900;

    letter-spacing:
        0.09em;

    text-align:
        center;

    text-transform:
        uppercase;

    transform:
        translateX(-50%);
}


/*
|--------------------------------------------------------------------------
| Trust
|--------------------------------------------------------------------------
*/

.trust-section {
    padding:
        100px
        0;

    background:
        #dcd9d0;
}

.trust-grid {
    display:
        grid;

    grid-template-columns:
        repeat(4, 1fr);

    border:
        2px
        solid
        var(--black);
}

.trust-card {
    min-height:
        225px;

    padding:
        27px;

    background:
        var(--off-white);
}

.trust-card + .trust-card {
    border-left:
        2px
        solid
        var(--black);
}

.trust-card__number {
    display:
        block;

    margin-bottom:
        44px;

    color:
        var(--yellow-dark);

    font-family:
        var(--font-display);

    font-size:
        2.5rem;
}

.trust-card h3 {
    margin:
        0
        0
        8px;

    font-family:
        var(--font-display);

    font-size:
        1.55rem;

    text-transform:
        uppercase;
}

.trust-card p {
    margin:
        0;

    color:
        #656b70;

    font-size:
        0.84rem;
}


/*
|--------------------------------------------------------------------------
| Newsletter
|--------------------------------------------------------------------------
*/

.newsletter {
    color:
        var(--black);

    background:
        var(--yellow);

    border-top:
        5px
        solid
        var(--black);

    border-bottom:
        5px
        solid
        var(--black);
}

.newsletter__inner {
    min-height:
        315px;

    padding:
        65px
        0;

    display:
        grid;

    grid-template-columns:
        1fr
        minmax(360px, 0.75fr);

    align-items:
        center;

    gap:
        70px;
}

.newsletter__eyebrow {
    margin:
        0
        0
        8px;

    font-size:
        0.68rem;

    font-weight:
        900;

    letter-spacing:
        0.14em;

    text-transform:
        uppercase;
}

.newsletter h2 {
    max-width:
        720px;

    margin:
        0;

    font-family:
        var(--font-display);

    font-size:
        clamp(2.35rem, 4vw, 4.55rem);

    line-height:
        1.04;

    text-transform:
        uppercase;

    letter-spacing:
        0.012em;
}

.newsletter p:not(.newsletter__eyebrow) {
    max-width:
        680px;

    margin:
        20px
        0
        0;

    font-weight:
        700;
}

.newsletter__form {
    display:
        grid;

    grid-template-columns:
        1fr
        auto;

    background:
        var(--white);

    border:
        3px
        solid
        var(--black);
}

.newsletter__form input {
    min-width:
        0;

    height:
        54px;

    padding:
        0
        17px;

    border:
        0;

    outline:
        0;
}

.newsletter__form .button {
    min-height:
        54px;

    background:
        var(--black);

    color:
        var(--white);

    border:
        0;
}


/*
|--------------------------------------------------------------------------
| Footer
|--------------------------------------------------------------------------
*/

.site-footer {
    color:
        var(--steel-light);

    background:
        var(--black);
}

.site-footer__main {
    padding:
        75px
        0
        65px;

    display:
        grid;

    grid-template-columns:
        minmax(260px, 0.9fr)
        2.1fr;

    gap:
        80px;
}

.brand--footer {
    margin-bottom:
        25px;
}

.site-footer__brand > p {
    max-width:
        360px;

    margin:
        0
        0
        14px;

    color:
        #b5bbc0;
}

.site-footer__brand > p strong {
    color:
        var(--yellow);
}

.site-footer__fitment-note {
    color:
        #6f767c !important;

    font-size:
        0.72rem;
}

.site-footer__columns {
    display:
        grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap:
        40px;
}

.footer-column h2 {
    margin:
        0
        0
        20px;

    color:
        var(--white);

    font-size:
        0.72rem;

    letter-spacing:
        0.12em;

    text-transform:
        uppercase;
}

.footer-column a {
    display:
        block;

    margin:
        0
        0
        11px;

    color:
        #8d9499;

    font-size:
        0.78rem;

    transition:
        color
        var(--transition);
}

.footer-column a:hover {
    color:
        var(--yellow);
}

.site-footer__bottom {
    min-height:
        80px;

    padding:
        20px
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        30px;

    border-top:
        1px
        solid
        var(--line);
}

.site-footer__bottom p {
    margin:
        0;

    color:
        #696f74;

    font-size:
        0.67rem;
}


/*
|--------------------------------------------------------------------------
| Interactive Hover Enhancements
|--------------------------------------------------------------------------
*/

@media (hover: hover) and (pointer: fine) {

    .product-card__media:hover .mini-product {
        transform:
            rotate(0deg)
            scale(1.035);
    }

    .mini-product {
        transition:
            transform
            var(--transition);
    }

    .department-card:hover .department-card__code {
        color:
            var(--yellow);

        opacity:
            0.7;
    }

}


/*
|--------------------------------------------------------------------------
| Responsive - 1180px
|--------------------------------------------------------------------------
*/

@media (max-width: 1180px) {

    .site-header__inner {
        grid-template-columns:
            auto
            1fr;

        gap:
            20px;
    }

    .site-search {
        grid-column:
            1
            /
            -1;

        grid-row:
            2;

        margin-bottom:
            18px;
    }

    .header-actions {
        justify-self:
            end;
    }

    .hero__inner {
        grid-template-columns:
            1fr
            0.85fr;

        gap:
            35px;
    
    word-spacing: 0.01em;}

    .hero h1 {
        font-size:
            clamp(3.35rem, 6.2vw, 5.7rem);
    
    word-spacing: 0.01em;}

    .fitment-bar__inner {
        grid-template-columns:
            1fr;
    }

    .fitment-bar__disclaimer {
        max-width:
            none;
    }

    .product-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .product-card__media {
        min-height:
            320px;
    }

    .site-footer__main {
        grid-template-columns:
            1fr;

        gap:
            50px;
    }

}


/*
|--------------------------------------------------------------------------
| Responsive - 980px
|--------------------------------------------------------------------------
*/

@media (max-width: 980px) {

    .utility-strip__inner {
        justify-content:
            center;
    }

    .utility-strip__nav {
        display:
            none;
    }

    .primary-nav {
        overflow-x:
            auto;

        scrollbar-width:
            none;
    }

    .primary-nav::-webkit-scrollbar {
        display:
            none;
    }

    .primary-nav a {
        flex:
            0
            0
            auto;
    }

    .fitment-form {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .button--fitment {
        min-height:
            45px;
    }

    .hero__inner,
    .performance-feature__inner,
    .tire-air-feature__inner,
    .questionable-feature__inner {
        grid-template-columns:
            1fr;
    
    word-spacing: 0.01em;}

    .hero__inner {
        padding:
            65px
            0
            80px;
    
    word-spacing: 0.01em;}

    .hero__copy {
        max-width:
            780px;
    
    word-spacing: 0.01em;}

    .hero__product {
        min-height:
            590px;
    
    word-spacing: 0.01em;}

    .department-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .performance-feature__visual {
        min-height:
            450px;
    }

    .performance-feature__copy {
        padding-bottom:
            35px;
    }

    .tire-air-feature__copy {
        order:
            2;
    }

    .tire-air-feature__visual {
        order:
            1;
    }

    .reviews-grid {
        grid-template-columns:
            1fr;
    }

    .review-card {
        min-height:
            280px;
    }

    .trust-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .trust-card:nth-child(3) {
        border-left:
            0;
    }

    .trust-card:nth-child(n + 3) {
        border-top:
            2px
            solid
            var(--black);
    }

    .newsletter__inner {
        grid-template-columns:
            1fr;
    }

    .site-footer__columns {
        grid-template-columns:
            repeat(2, 1fr);
    }

}


/*
|--------------------------------------------------------------------------
| Responsive - 760px
|--------------------------------------------------------------------------
*/

@media (max-width: 760px) {

    .utility-strip__inner,
    .site-header__inner,
    .primary-nav,
    .fitment-bar__inner,
    .section-shell,
    .hero__inner,
    .performance-feature__inner,
    .tire-air-feature__inner,
    .questionable-feature__inner,
    .newsletter__inner,
    .maintenance-banner__inner,
    .site-footer__main,
    .site-footer__bottom {
        width:
            min(calc(100% - 30px), var(--content-width));
    }

    .utility-strip__promo {
        padding:
            8px
            0;

        text-align:
            center;

        line-height:
            1.3;
    }

    .site-header {
        position:
            relative;
    }

    .site-header__inner {
        min-height:
            80px;

        grid-template-columns:
            1fr
            auto;
    }

    .brand {
        font-size:
            1.5rem;
    }

    .header-actions {
        display:
            none;
    }

    .nav-toggle {
        display:
            block;
    }

    .site-search {
        grid-column:
            1
            /
            -1;

        margin-bottom:
            15px;
    }

    .site-search button {
        min-width:
            90px;

        padding:
            0
            12px;
    }

    .site-header__nav {
        display:
            none;
    }

    body.nav-open .site-header__nav {
        display:
            block;
    }

    .primary-nav {
        flex-direction:
            column;

        padding:
            10px
            0
            16px;

        overflow:
            visible;
    }

    .primary-nav a,
    .primary-nav a:first-child {
        min-height:
            48px;

        padding:
            0
            15px;

        border:
            0;

        border-bottom:
            1px
            solid
            rgba(255, 255, 255, 0.08);
    }

    .fitment-bar__inner {
        padding:
            20px
            0;
    }

    .fitment-form {
        grid-template-columns:
            1fr
            1fr;
    }

    .fitment-form .button {
        grid-column:
            1
            /
            -1;
    }

    .hero__inner {
        min-height:
            auto;
    
    word-spacing: 0.01em;}

    .hero h1 {
        font-size:
            clamp(3.1rem, 11.2vw, 5.2rem);

        line-height:
            1.04;
    
    word-spacing: 0.01em;}

    .hero__purchase {
        align-items:
            flex-start;

        flex-direction:
            column;
    
    word-spacing: 0.01em;}

    .hero__actions {
        width:
            100%;
    
    word-spacing: 0.01em;}

    .hero__actions .button {
        flex:
            1;
    
    word-spacing: 0.01em;}

    .hero__product {
        min-height:
            510px;
    
    word-spacing: 0.01em;}

    .product-render {
        width:
            min(70%, 310px);
    }

    .hero__specs {
        max-width:
            470px;
    
    word-spacing: 0.01em;}

    .section-heading--split {
        align-items:
            flex-start;

        flex-direction:
            column;
    }

    .departments-section,
    .products-section,
    .counter-picks,
    .reviews-section,
    .trust-section {
        padding:
            80px
            0;
    }

    .department-grid {
        grid-template-columns:
            1fr;
    }

    .department-card {
        min-height:
            190px;
    }

    .product-grid {
        grid-template-columns:
            1fr;
    }

    .product-card__media {
        min-height:
            330px;
    }

    .maintenance-banner__inner {
        align-items:
            flex-start;

        flex-direction:
            column;
    }

    .performance-feature__inner {
        min-height:
            auto;

        padding:
            70px
            0;
    }

    .performance-feature__copy h2,
    .tire-air-feature__copy h2,
    .questionable-feature h2 {
        font-size:
            clamp(2.6rem, 9.2vw, 4.6rem);

        line-height:
            1.04;
    }

    .counter-picks__grid {
        grid-template-columns:
            1fr;
    }

    .deal-strip__inner {
        grid-template-columns:
            1fr;

        padding:
            34px
            20px;
    }

    .deal-strip__label {
        width:
            max-content;
    }

    .deal-strip p {
        grid-column:
            auto;

        margin:
            0;
    }

    .questionable-feature__warning {
        position:
            static;

        width:
            100%;

        text-align:
            center;
    }

    .trust-grid {
        grid-template-columns:
            1fr;
    }

    .trust-card + .trust-card,
    .trust-card:nth-child(3) {
        border-left:
            0;
    }

    .trust-card:nth-child(n + 2) {
        border-top:
            2px
            solid
            var(--black);
    }

    .newsletter__form {
        grid-template-columns:
            1fr;
    }

    .newsletter__form .button {
        width:
            100%;
    }

    .site-footer__columns {
        grid-template-columns:
            1fr
            1fr;
    }

    .site-footer__bottom {
        align-items:
            flex-start;

        flex-direction:
            column;
    }

}


/*
|--------------------------------------------------------------------------
| Responsive - 520px
|--------------------------------------------------------------------------
*/

@media (max-width: 520px) {

    .brand {
        font-size:
            1.28rem;
    }

    .brand__tagline {
        font-size:
            0.5rem;
    }

    .site-search input {
        font-size:
            0.83rem;
    }

    .site-search button {
        font-size:
            0.65rem;
    }

    .fitment-form {
        grid-template-columns:
            1fr;
    }

    .hero__inner {
        padding:
            50px
            0
            65px;
    
    word-spacing: 0.01em;}

    .hero h1 {
        font-size:
            clamp(2.8rem, 12.2vw, 4.35rem);

        line-height:
            1.04;
    
    word-spacing: 0.01em;}

    .hero__lead {
        margin-top:
            22px;
    
    word-spacing: 0.01em;}

    .hero__actions {
        flex-direction:
            column;
    
    word-spacing: 0.01em;}

    .hero__actions .button {
        width:
            100%;
    
    word-spacing: 0.01em;}

    .hero__product {
        min-height:
            450px;
    
    word-spacing: 0.01em;}

    .product-render {
        width:
            min(77%, 270px);
    }

    .product-render__title {
        font-size:
            2.9rem;

        $10.98;
    
    word-spacing: 0.01em;}

    .hero__specs {
        grid-template-columns:
            1fr;
    
    word-spacing: 0.01em;}

    .hero__specs div + div {
        border-left:
            0;

        border-top:
            1px
            solid
            var(--line);
    
    word-spacing: 0.01em;}

    .department-card {
        padding:
            24px;
    }

    .product-card__purchase {
        align-items:
            flex-start;

        flex-direction:
            column;
    }

    .product-card__purchase .button {
        width:
            100%;
    }

    .performance-can {
        width:
            220px;
    }

    .performance-can strong {
        font-size:
            6.5rem;
    }

    .performance-specs {
        grid-template-columns:
            1fr;
    }

    .performance-feature__purchase {
        align-items:
            flex-start;

        flex-direction:
            column;
    }

    .counter-pick {
        grid-template-columns:
            auto
            1fr;

        align-items:
            start;
    }

    .counter-pick__price {
        grid-column:
            2;
    }

    .tire-air-feature__stats {
        grid-template-columns:
            1fr;
    }

    .tire-air-feature__stats div + div {
        border-left:
            0;

        border-top:
            1px
            solid
            var(--line-dark);
    }

    .tire-air-feature__actions {
        align-items:
            flex-start;

        flex-direction:
            column;
    }

    .air-canister {
        width:
            235px;
    }

    .air-canister strong {
        font-size:
            3.7rem;
    }

    .review-card {
        padding:
            24px;
    }

    .temporal-device {
        width:
            min(84vw, 340px);
    }

    .temporal-device__core {
        width:
            115px;
    }

    .temporal-device__core span {
        font-size:
            2.6rem;
    }

    .questionable-feature__purchase {
        align-items:
            flex-start;

        flex-direction:
            column;
    }

    .site-footer__columns {
        grid-template-columns:
            1fr;
    }

}


/*
|--------------------------------------------------------------------------
| Reduced Motion
|--------------------------------------------------------------------------
*/

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior:
            auto;
    }

    *,
    *::before,
    *::after {
        scroll-behavior:
            auto !important;

        transition-duration:
            0.01ms !important;

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;
    }

}