/* =========================================================
   AG BODY SHOP — FAQ ARCHIVE + SINGLE FAQ
========================================================= */


/* =========================================================
   01 — FOUNDATION
========================================================= */

.faq-archive,
.faq-single {
    --faq-yellow:
        var(--color-yellow, #e7b900);

    --faq-yellow-hover:
        var(--color-yellow-hover, #f2c600);

    --faq-ink:
        #17191c;

    --faq-text:
        #555b5f;

    --faq-muted:
        #777d81;

    --faq-line:
        rgba(20, 23, 25, .13);

    --faq-line-soft:
        rgba(20, 23, 25, .08);

    --faq-warm:
        #f4f2ed;

    --faq-dark:
        #080b0e;

    --faq-page-padding:
        clamp(28px, 5vw, 92px);

    position:
        relative;

    width:
        100%;

    overflow:
        hidden;

    color:
        var(--faq-ink);

    background:
        #ffffff;

    font-family:
        var(
            --font-body,
            "AvenirWeb",
            "Avenir",
            Arial,
            sans-serif
        );
}


.faq-archive,
.faq-archive *,
.faq-archive *::before,
.faq-archive *::after,
.faq-single,
.faq-single *,
.faq-single *::before,
.faq-single *::after {
    box-sizing:
        border-box;
}


.faq-archive h1,
.faq-archive h2,
.faq-archive h3,
.faq-archive p,
.faq-archive figure,
.faq-single h1,
.faq-single h2,
.faq-single h3,
.faq-single p {
    margin:
        0;

    padding:
        0;
}


.faq-archive img,
.faq-single img {
    display:
        block;

    max-width:
        100%;
}


.faq-archive a,
.faq-single a {
    color:
        inherit;

    text-decoration:
        none;
}


.faq-archive button,
.faq-archive input,
.faq-single button {
    font:
        inherit;
}


/* =========================================================
   02 — ARCHIVE HERO
========================================================= */

.faq-archive__hero {
    position:
        relative;

    min-height:
        clamp(280px, 25vw, 340px);

    overflow:
        hidden;

    color:
        #ffffff;

    background:
        radial-gradient(
            circle at 82% 67%,
            rgba(231, 185, 0, .11),
            transparent 31%
        ),
        radial-gradient(
            circle at 15% 9%,
            rgba(255, 255, 255, .045),
            transparent 31%
        ),
        linear-gradient(
            135deg,
            #15191d 0%,
            #090c0f 61%,
            #050709 100%
        );
}


.faq-archive__hero::after {
    content:
        "";

    position:
        absolute;

    inset:
        0;

    pointer-events:
        none;

    background:
        linear-gradient(
            90deg,
            rgba(4, 6, 8, .24),
            transparent 64%
        );

    box-shadow:
        inset 0 -58px 80px
        rgba(0, 0, 0, .18);
}


.faq-archive__hero-inner {
    position:
        relative;

    z-index:
        2;

    width:
        min(1480px, 100%);

    min-height:
        inherit;

    margin:
        0 auto;

    display:
        grid;

    grid-template-columns:
        minmax(0, 1.06fr)
        minmax(340px, .94fr);
}


.faq-archive__hero-copy {
    position:
        relative;

    z-index:
        4;

    min-width:
        0;

    padding:
        30px
        var(--faq-page-padding)
        44px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;

    justify-content:
        flex-start;
}


.faq-archive__breadcrumb,
.faq-single__breadcrumb {
    margin-bottom:
        14px;

    display:
        flex;

    align-items:
        center;

    flex-wrap:
        nowrap;

    gap:
        8px;

    color:
        rgba(255, 255, 255, .50);

    font-size:
        9.5px;

    font-weight:
        700;

    line-height:
        1.3;

    letter-spacing:
        1.2px;

    text-transform:
        uppercase;

    overflow:
        hidden;
}


.faq-archive__breadcrumb a,
.faq-single__breadcrumb a {
    flex:
        0 0 auto;

    transition:
        color .2s ease;
}


.faq-archive__breadcrumb a:hover,
.faq-single__breadcrumb a:hover {
    color:
        var(--faq-yellow);
}


.faq-archive__breadcrumb span:last-child,
.faq-single__breadcrumb span:last-child {
    min-width:
        0;

    color:
        rgba(255, 255, 255, .80);

    overflow:
        hidden;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


.faq-archive__title,
.faq-single__title {
    width:
        min(900px, 100%);

    color:
        var(--faq-yellow);

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

    font-size:
        var(
            --type-page-title,
            clamp(36px, 2.75vw, 48px)
        );

    font-weight:
        400;

    line-height:
        1;

    letter-spacing:
        -.35px;
}


.faq-archive__description {
    width:
        min(720px, 100%);

    margin-top:
        16px !important;

    color:
        rgba(255, 255, 255, .73);

    font-size:
        clamp(13.5px, .9vw, 15.5px);

    font-weight:
        300;

    line-height:
        1.65;
}


.faq-archive__media {
    position:
        relative;

    z-index:
        2;

    min-width:
        0;

    min-height:
        inherit;

    overflow:
        hidden;

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        center;

    pointer-events:
        none;

    isolation:
        isolate;
}


.faq-archive__media::before {
    content:
        "";

    position:
        absolute;

    z-index:
        0;

    left:
        50%;

    bottom:
        -38%;

    width:
        90%;

    height:
        78%;

    transform:
        translateX(-50%);

    border-radius:
        50%;

    background:
        radial-gradient(
            ellipse,
            rgba(231, 185, 0, .11),
            transparent 68%
        );
}


.faq-archive__media img {
    position:
        relative;

    z-index:
        2;

    width:
        min(570px, 100%);

    max-width:
        none;

    height:
        auto;

    max-height:
        330px;

    object-fit:
        contain;

    object-position:
        center bottom;

    filter:
        drop-shadow(
            0 22px 28px
            rgba(0, 0, 0, .38)
        );
}


/* =========================================================
   03 — ARCHIVE CONTENT
========================================================= */

.faq-archive__content {
    width:
        100%;

    padding:
        clamp(64px, 7vw, 96px)
        var(--faq-page-padding)
        clamp(74px, 8vw, 108px);

    color:
        var(--faq-ink);

    background:
        #ffffff;
}


.faq-archive__shell,
.faq-single__shell {
    width:
        min(1480px, 100%);

    margin:
        0 auto;
}


/* =========================================================
   04 — SEARCH
========================================================= */

.faq-archive__search {
    position:
        relative;

    width:
        min(920px, 100%);

    margin:
        0 auto
        clamp(48px, 5vw, 68px);
}


.faq-archive__search label {
    display:
        block;

    margin-bottom:
        11px;

    color:
        #806600;

    font-size:
        9px;

    font-weight:
        800;

    line-height:
        1;

    letter-spacing:
        1.1px;

    text-transform:
        uppercase;
}


.faq-archive__search::before {
    content:
        "";

    position:
        absolute;

    z-index:
        2;

    left:
        20px;

    bottom:
        20px;

    width:
        16px;

    height:
        16px;

    border:
        1.5px solid
        #555b5f;

    border-radius:
        50%;

    pointer-events:
        none;
}


.faq-archive__search::after {
    content:
        "";

    position:
        absolute;

    z-index:
        2;

    left:
        33px;

    bottom:
        18px;

    width:
        7px;

    height:
        1.5px;

    transform:
        rotate(45deg);

    transform-origin:
        left center;

    background:
        #555b5f;

    pointer-events:
        none;
}


.faq-archive__search input {
    width:
        100%;

    height:
        58px;

    padding:
        0 58px;

    color:
        var(--faq-ink);

    background:
        #f7f5f1;

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

    border-radius:
        0;

    outline:
        0;

    font-size:
        14px;

    font-weight:
        300;

    transition:
        background-color .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
}


.faq-archive__search input::placeholder {
    color:
        #8a8f92;
}


.faq-archive__search input:focus {
    background:
        #ffffff;

    border-color:
        rgba(128, 102, 0, .58);

    box-shadow:
        0 0 0 3px
        rgba(231, 185, 0, .10);
}


.faq-archive__search-clear {
    position:
        absolute;

    z-index:
        4;

    right:
        10px;

    bottom:
        9px;

    width:
        40px;

    height:
        40px;

    padding:
        0;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        #5d6367;

    background:
        transparent;

    border:
        0;

    border-radius:
        50%;

    font-size:
        19px;

    line-height:
        1;

    cursor:
        pointer;

    transition:
        color .2s ease,
        background-color .2s ease;
}


.faq-archive__search-clear:hover {
    color:
        #111416;

    background:
        var(--faq-yellow);
}


.faq-archive__search-clear[hidden] {
    display:
        none;
}


.faq-archive__search-status {
    margin-top:
        10px !important;

    color:
        var(--faq-muted);

    font-size:
        11px;

    line-height:
        1.5;

    text-align:
        right;
}


/* =========================================================
   05 — FAQ ACCORDION
========================================================= */

.faq-archive__list {
    width:
        100%;

    counter-reset:
        faq-archive-counter;

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


.faq-item {
    width:
        100%;

    counter-increment:
        faq-archive-counter;

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


.faq-item[hidden] {
    display:
        none;
}


.faq-item__question {
    width:
        100%;

    min-height:
        94px;

    padding:
        20px 0;

    display:
        grid;

    grid-template-columns:
        52px
        minmax(0, 1fr)
        40px;

    align-items:
        center;

    gap:
        clamp(15px, 2vw, 28px);

    color:
        var(--faq-ink);

    background:
        transparent;

    border:
        0;

    text-align:
        left;

    cursor:
        pointer;
}


.faq-item__question::before {
    content:
        attr(data-faq-number);

    color:
        #806600;

    font-size:
        9px;

    font-weight:
        800;

    line-height:
        1;

    letter-spacing:
        1px;
}


.faq-item__question > span:first-child {
    font-family:
        var(--font-title);

    font-size:
        clamp(22px, 1.75vw, 30px);

    font-weight:
        400;

    line-height:
        1.22;

    transition:
        color .2s ease;
}


.faq-item__question:hover
> span:first-child,
.faq-item__question[aria-expanded="true"]
> span:first-child {
    color:
        #806600;
}


.faq-item__icon {
    width:
        36px;

    height:
        36px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        #111416;

    background:
        var(--faq-yellow);

    border:
        1px solid
        var(--faq-yellow);

    border-radius:
        50%;

    font-family:
        Arial,
        sans-serif;

    font-size:
        20px;

    font-weight:
        300;

    line-height:
        1;

    transition:
        color .22s ease,
        background-color .22s ease,
        border-color .22s ease,
        transform .25s ease;
}


.faq-item__question:hover
.faq-item__icon {
    background:
        var(--faq-yellow-hover);

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


.faq-item__question[aria-expanded="true"]
.faq-item__icon {
    color:
        #ffffff;

    background:
        #111416;

    border-color:
        #111416;

    transform:
        rotate(45deg);
}


.faq-item__answer[hidden] {
    display:
        none;
}


.faq-item__answer-inner {
    width:
        100%;

    padding:
        0
        58px
        30px
        80px;

    color:
        var(--faq-text);

    font-size:
        clamp(14px, .9vw, 15.5px);

    font-weight:
        300;

    line-height:
        1.75;
}


.faq-item__answer-inner p {
    width:
        100%;

    margin:
        0;

    color:
        inherit;

    font-size:
        inherit;

    line-height:
        inherit;
}


.faq-item__link {
    width:
        max-content;

    margin-top:
        18px;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        9px;

    color:
        #806600;

    font-size:
        9px;

    font-weight:
        800;

    line-height:
        1;

    letter-spacing:
        .8px;

    text-transform:
        uppercase;

    border-bottom:
        1px solid
        rgba(128, 102, 0, .34);

    transition:
        color .2s ease,
        border-color .2s ease;
}


.faq-item__link::after {
    content:
        "→";

    font-size:
        15px;

    transition:
        transform .2s ease;
}


.faq-item__link:hover {
    color:
        var(--faq-ink);

    border-color:
        var(--faq-ink);
}


.faq-item__link:hover::after {
    transform:
        translateX(4px);
}


/* =========================================================
   06 — EMPTY SEARCH / EMPTY ARCHIVE
========================================================= */

.faq-archive__empty,
.faq-archive__search-empty {
    width:
        100%;

    padding:
        44px 24px;

    color:
        var(--faq-text);

    background:
        var(--faq-warm);

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

    font-size:
        14px;

    line-height:
        1.65;

    text-align:
        center;
}


.faq-archive__search-empty {
    margin-top:
        22px !important;
}


.faq-archive__search-empty[hidden] {
    display:
        none;
}


/* =========================================================
   07 — PAGINATION
========================================================= */

.faq-archive .navigation.pagination {
    margin-top:
        clamp(42px, 5vw, 62px);

    padding-top:
        26px;

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


.faq-archive .nav-links {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex-wrap:
        wrap;

    gap:
        8px;
}


.faq-archive .page-numbers {
    min-width:
        40px;

    height:
        40px;

    padding:
        0 13px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        var(--faq-ink);

    background:
        #ffffff;

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

    border-radius:
        22px;

    font-size:
        10px;

    font-weight:
        800;

    line-height:
        1;

    transition:
        color .2s ease,
        background-color .2s ease,
        border-color .2s ease,
        transform .2s ease;
}


.faq-archive a.page-numbers:hover,
.faq-archive .page-numbers.current {
    color:
        #111416;

    background:
        var(--faq-yellow);

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

    transform:
        translateY(-2px);
}


/* =========================================================
   08 — SINGLE FAQ HERO
========================================================= */

.faq-single__hero {
    position:
        relative;

    min-height:
        clamp(320px, 29vw, 410px);

    overflow:
        hidden;

    color:
        #ffffff;

    background:
        radial-gradient(
            circle at 82% 67%,
            rgba(231, 185, 0, .10),
            transparent 31%
        ),
        radial-gradient(
            circle at 15% 9%,
            rgba(255, 255, 255, .045),
            transparent 31%
        ),
        linear-gradient(
            135deg,
            #15191d 0%,
            #090c0f 61%,
            #050709 100%
        );

    isolation:
        isolate;
}


.faq-single__hero::after {
    content:
        "";

    position:
        absolute;

    z-index:
        0;

    inset:
        0;

    pointer-events:
        none;

    background:
        linear-gradient(
            90deg,
            rgba(4, 6, 8, .30),
            transparent 72%
        );

    box-shadow:
        inset 0 -58px 80px
        rgba(0, 0, 0, .18);
}


.faq-single__hero
.faq-single__shell {
    position:
        relative;

    z-index:
        2;

    min-height:
        inherit;

    padding:
        30px
        var(--faq-page-padding)
        0;

    display:
        grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(300px, 500px);

    align-items:
        stretch;

    gap:
        clamp(28px, 5vw, 80px);
}


.faq-single__hero-copy {
    min-width:
        0;

    padding-bottom:
        52px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;

    justify-content:
        flex-start;
}


.faq-single__category {
    width:
        max-content;

    max-width:
        100%;

    margin-bottom:
        14px !important;

    padding:
        7px 11px;

    color:
        rgba(255, 255, 255, .80);

    background:
        rgba(255, 255, 255, .06);

    border:
        1px solid
        rgba(255, 255, 255, .12);

    font-size:
        9px;

    font-weight:
        800;

    line-height:
        1;

    letter-spacing:
        1px;

    text-transform:
        uppercase;
}


.faq-single__title {
    width:
        min(960px, 100%);

    color:
        var(--faq-yellow);

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

    font-size:
        var(
            --type-page-title,
            clamp(36px, 2.75vw, 48px)
        );

    font-weight:
        400;

    line-height:
        1.06;

    letter-spacing:
        -.35px;
}


.faq-single__hero-media {
    position:
        relative;

    min-width:
        0;

    min-height:
        inherit;

    margin:
        0;

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        flex-end;

    overflow:
        hidden;

    pointer-events:
        none;

    isolation:
        isolate;
}


.faq-single__hero-media::before {
    content:
        "";

    position:
        absolute;

    z-index:
        0;

    right:
        -8%;

    bottom:
        -35%;

    width:
        110%;

    height:
        92%;

    border-radius:
        50%;

    background:
        radial-gradient(
            ellipse,
            rgba(231, 185, 0, .12),
            transparent 68%
        );
}


.faq-single__hero-image {
    position:
        relative;

    z-index:
        2;

    width:
        min(440px, 100%);

    height:
        auto;

    max-height:
        370px;

    object-fit:
        contain;

    object-position:
        center bottom;

    filter:
        drop-shadow(
            0 24px 28px
            rgba(0, 0, 0, .40)
        );
}


/* =========================================================
   09 — SINGLE FAQ ANSWER — FULL-WIDTH / ONE COLUMN
========================================================= */

.faq-single__content {
    width:
        100%;

    padding:
        clamp(64px, 7vw, 94px)
        var(--faq-page-padding)
        clamp(76px, 8vw, 110px);

    color:
        var(--faq-ink);

    background:
        #ffffff;
}


.faq-single__content
.faq-single__shell {
    width:
        min(1480px, 100%);

    margin:
        0 auto;
}


.faq-single__answer {
    width:
        100%;

    max-width:
        none;

    min-width:
        0;

    margin:
        0;

    padding:
        clamp(28px, 3vw, 42px)
        0
        0;

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


.faq-single__answer::before {
    content:
        "Answer";

    display:
        block;

    margin-bottom:
        clamp(24px, 3vw, 36px);

    color:
        #806600;

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

    font-size:
        9px;

    font-weight:
        800;

    line-height:
        1;

    letter-spacing:
        1.2px;

    text-transform:
        uppercase;
}


/* =========================================================
   10 — RELATED QUESTIONS
========================================================= */

.faq-single__related {
    width:
        100%;

    padding:
        clamp(58px, 6vw, 82px)
        var(--faq-page-padding)
        clamp(68px, 7vw, 96px);

    color:
        var(--faq-ink);

    background:
        var(--faq-warm);

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


.faq-single__related h2 {
    width:
        100%;

    margin:
        0
        0
        22px;

    padding-bottom:
        18px;

    color:
        var(--faq-ink);

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

    font-size:
        var(
            --type-section-title,
            clamp(31px, 2.4vw, 42px)
        );

    font-weight:
        400;

    line-height:
        1.08;

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




.faq-single__related-grid {
    width:
        100%;

    display:
        grid;

    grid-template-columns:
        1fr;

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


.faq-related-card {
    width:
        100%;

    min-height:
        72px;

    padding:
        17px 0;

    display:
        grid;

    grid-template-columns:
        minmax(0, 1fr)
        42px;

    align-items:
        center;

    gap:
        24px;

    color:
        var(--faq-ink);

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

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

    font-size:
        clamp(18px, 1.35vw, 24px);

    font-weight:
        400;

    line-height:
        1.3;

    transition:
        color .2s ease,
        padding-left .2s ease;
}


.faq-related-card span {
    width:
        36px;

    height:
        36px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        #111416;

    background:
        var(--faq-yellow);

    border-radius:
        50%;

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

    font-size:
        17px;

    transition:
        transform .2s ease,
        background-color .2s ease;
}


.faq-related-card:hover {
    color:
        #806600;

    padding-left:
        8px;
}


.faq-related-card:hover span {
    background:
        var(--faq-yellow-hover);

    transform:
        translateX(4px);
}


/* =========================================================
   11 — TABLET
========================================================= */

@media(max-width:980px) {

    .faq-archive__hero {
        min-height:
            auto;
    }


    .faq-archive__hero-inner {
        min-height:
            310px;

        grid-template-columns:
            minmax(0, 1fr)
            minmax(290px, .80fr);
    }


    .faq-archive__media img {
        width:
            min(480px, 110%);

        max-height:
            300px;
    }

    .faq-single__hero
    .faq-single__shell {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(230px, 360px);

        gap:
            24px;
    }


    .faq-single__hero-image {
        width:
            min(350px, 100%);

        max-height:
            310px;
    }

}


/* =========================================================
   12 — MOBILE
========================================================= */

@media(max-width:720px) {

    .faq-archive,
    .faq-single {
        --faq-page-padding:
            18px;
    }


    .faq-archive__hero-inner {
        min-height:
            0;

        grid-template-columns:
            1fr;
    }


    .faq-archive__hero-copy {
        width:
            100%;

        padding:
            30px
            18px
            24px;
    }


    .faq-archive__description {
        font-size:
            14px;
    }


    .faq-archive__media {
        min-height:
            180px;

        margin-top:
            -12px;

        padding:
            0 18px;
    }


    .faq-archive__media img {
        width:
            min(400px, 112%);

        max-height:
            210px;
    }


    .faq-archive__content {
        padding:
            52px
            18px
            70px;
    }


    .faq-archive__search {
        margin-bottom:
            42px;
    }


    .faq-archive__search input {
        height:
            54px;

        padding-left:
            52px;

        font-size:
            14px;
    }


    .faq-archive__search::before {
        bottom:
            18px;
    }


    .faq-archive__search::after {
        bottom:
            16px;
    }


    .faq-archive__search-clear {
        bottom:
            7px;
    }


    .faq-item__question {
        min-height:
            82px;

        padding:
            18px 0;

        grid-template-columns:
            32px
            minmax(0, 1fr)
            34px;

        gap:
            11px;
    }


    .faq-item__question > span:first-child {
        font-size:
            clamp(20px, 6vw, 27px);

        line-height:
            1.25;
    }


    .faq-item__icon {
        width:
            32px;

        height:
            32px;

        font-size:
            18px;
    }


    .faq-item__answer-inner {
        padding:
            0
            0
            25px
            43px;

        font-size:
            14px;
    }


    
    .faq-single__hero
    .faq-single__shell {
        padding:
            30px
            18px
            0;

        grid-template-columns:
            1fr;

        gap:
            0;
    }


    .faq-single__hero-copy {
        padding-bottom:
            18px;
    }


    .faq-single__hero-media {
        width:
            100%;

        min-height:
            175px;

        justify-content:
            center;
    }


    .faq-single__hero-image {
        width:
            min(250px, 72vw);

        max-height:
            205px;

        object-position:
            center bottom;
    }


    .faq-single__category {
        margin-bottom:
            12px !important;
    }


    .faq-single__title {
        font-size:
            var(
                --type-page-title,
                clamp(32px, 9.5vw, 42px)
            );
    }


    .faq-single__content {
        padding:
            54px
            18px
            72px;
    }


    .faq-single__answer {
        padding-top:
            27px;
    }


    .faq-single__related {
        padding:
            52px
            18px
            70px;
    }


    .faq-single__related h2 {
        font-size:
            var(
                --type-section-title,
                clamp(29px, 8.5vw, 38px)
            );
    }


    .faq-related-card {
        min-height:
            68px;

        padding:
            15px 0;

        grid-template-columns:
            minmax(0, 1fr)
            36px;

        gap:
            14px;

        font-size:
            clamp(18px, 5.6vw, 23px);
    }


    .faq-related-card span {
        width:
            32px;

        height:
            32px;
    }

}


/* =========================================================
   13 — VERY SMALL MOBILE
========================================================= */

@media(max-width:420px) {

    .faq-archive__media {
        min-height:
            160px;
    }


    .faq-archive__media img {
        max-height:
            185px;
    }


    .faq-item__question {
        grid-template-columns:
            26px
            minmax(0, 1fr)
            32px;

        gap:
            9px;
    }


    .faq-item__question::before {
        font-size:
            8px;
    }


    .faq-item__answer-inner {
        padding-left:
            35px;
    }

}


/* =========================================================
   14 — FOCUS
========================================================= */

.faq-archive a:focus-visible,
.faq-archive button:focus-visible,
.faq-archive input:focus-visible,
.faq-single a:focus-visible,
.faq-single button:focus-visible {
    outline:
        2px solid
        var(--faq-yellow);

    outline-offset:
        4px;
}


/* =========================================================
   15 — REDUCED MOTION
========================================================= */

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

    .faq-archive *,
    .faq-archive *::before,
    .faq-archive *::after,
    .faq-single *,
    .faq-single *::before,
    .faq-single *::after {
        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        scroll-behavior:
            auto !important;

        transition-duration:
            .01ms !important;
    }

}


/* =========================================================
   16 — PRINT
========================================================= */

@media print {

    .site-header,
    .faq-archive__search,
    .faq-single__related,
    #vehicle-assessment,
    .s6-contact,
    .mobile-bottom-nav {
        display:
            none !important;
    }


    body,
    .faq-single,
    .faq-single__hero,
    .faq-single__content {
        color:
            #000000 !important;

        background:
            #ffffff !important;
    }


    .faq-single__hero {
        min-height:
            auto;
    }


    .faq-single__hero::after {
        display:
            none;
    }


    .faq-single__hero
    .faq-single__shell {
        padding:
            0 0 28px;
    }


    .faq-single__title {
        color:
            #000000 !important;
    }


    .faq-single__breadcrumb {
        color:
            #555555;
    }


    .faq-single__content {
        padding:
            0;
    }

}
/* =========================================================
   FINAL — COMPACT FAQ HERO
   Archive FAQ + Single FAQ
========================================================= */


/* =========================================================
   DESKTOP
========================================================= */

@media screen and (min-width: 981px) {

    .faq-archive,
    .faq-single {
        --faq-compact-hero-height:
            280px;
    }


    /* -----------------------------------------------------
       SAME HERO HEIGHT
    ----------------------------------------------------- */

    .faq-archive__hero,
    .faq-single__hero {
        height:
            var(--faq-compact-hero-height);

        min-height:
            var(--faq-compact-hero-height);

        max-height:
            var(--faq-compact-hero-height);
    }


    .faq-archive__hero-inner,
    .faq-single__hero
    .faq-single__shell {
        height:
            100%;

        min-height:
            0;
    }


    /* =====================================================
       FAQ ARCHIVE
    ====================================================== */

    .faq-archive__hero-inner {
        grid-template-columns:
            minmax(0, 1.08fr)
            minmax(360px, .92fr);
    }


    .faq-archive__hero-copy {
        height:
            100%;

        padding:
            28px
            var(--faq-page-padding)
            28px;

        justify-content:
            flex-start;
    }


    .faq-archive__media {
        height:
            100%;

        min-height:
            0;

        overflow:
            hidden;

        align-items:
            flex-end;

        justify-content:
            flex-end;
    }


    .faq-archive__media img {
        width:
            min(600px, 100%);

        height:
            auto;

        max-height:
            245px;

        object-fit:
            contain;

        object-position:
            right bottom;

        transform:
            none;
    }


    /* =====================================================
       SINGLE FAQ
    ====================================================== */

    .faq-single__hero
    .faq-single__shell {
        padding:
            28px
            var(--faq-page-padding)
            0;

        display:
            grid;

        grid-template-columns:
            minmax(0, 1fr)
            minmax(300px, 390px);

        align-items:
            stretch;

        gap:
            clamp(30px, 4vw, 66px);
    }


    .faq-single__hero-copy {
        min-width:
            0;

        height:
            100%;

        padding-bottom:
            28px;

        justify-content:
            flex-start;
    }


    .faq-single__hero-media {
        height:
            100%;

        min-height:
            0;

        overflow:
            hidden;

        align-items:
            flex-end;

        justify-content:
            flex-end;
    }


    .faq-single__hero-image {
        display:
            block;
    
        width:
            auto;
    
        height:
            100%;
    
        max-width:
            100%;
    
        max-height:
            none;
    
        margin:
            0 0 0 auto;
    
        object-fit:
            contain;
    
        object-position:
            right center;
    }

}


/* =========================================================
   TABLET
========================================================= */

@media screen
and (min-width: 721px)
and (max-width: 980px) {

    .faq-archive,
    .faq-single {
        --faq-compact-hero-height:
            300px;
    }


    .faq-archive__hero,
    .faq-single__hero {
        height:
            var(--faq-compact-hero-height);

        min-height:
            var(--faq-compact-hero-height);

        max-height:
            var(--faq-compact-hero-height);
    }


    .faq-archive__hero-inner,
    .faq-single__hero
    .faq-single__shell {
        height:
            100%;

        min-height:
            0;
    }


    /* Archive */

    .faq-archive__hero-inner {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(280px, .72fr);
    }


    .faq-archive__hero-copy {
        padding:
            30px
            28px
            30px;
    }


    .faq-archive__media {
        height:
            100%;

        min-height:
            0;

        margin:
            0;

        padding:
            0;

        align-items:
            flex-end;
    }


    .faq-archive__media img {
        width:
            min(480px, 105%);

        max-height:
            260px;

        object-position:
            right bottom;
    }


    /* Single */

    .faq-single__hero
    .faq-single__shell {
        padding:
            30px
            28px
            0;

        grid-template-columns:
            minmax(0, 1fr)
            minmax(230px, 310px);

        gap:
            24px;
    }


    .faq-single__hero-copy {
        padding-bottom:
            30px;
    }


    .faq-single__hero-media {
        height:
            100%;

        min-height:
            0;

        align-items:
            flex-end;
    }


    .faq-single__hero-image {
        display:
            block;
    
        width:
            auto;
    
        height:
            100%;
    
        max-width:
            100%;
    
        max-height:
            none;
    
        margin:
            0 0 0 auto;
    
        object-fit:
            contain;
    
        object-position:
            right center;
    }

}