/* =========================================================
   PENNSYLVANIA PARTS
========================================================= */


/* =========================================================
   BACKGROUND
========================================================= */

.bg-wrapper {

    position: fixed;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    z-index: -10;

    background: #1a1a1a;

    overflow: hidden;

}


.wave {

    position: absolute;

    width: 200%;
    height: 200%;

    background: #2a2a2a;

    border-radius: 40% 50% 30% 40%;

    opacity: 0.8;

    animation:
        waveMove
        20s
        infinite
        linear;

    transform-origin: 50% 50%;

}


.wave:nth-child(2) {

    background: #1f1f1f;

    opacity: 0.6;

    animation:
        waveMove
        25s
        infinite
        linear
        reverse;

    top: -20%;

    left: -20%;

}


@keyframes waveMove {

    0% {

        transform: rotate(0deg);

    }

    100% {

        transform: rotate(360deg);

    }

}



/* =========================================================
   COLORS
========================================================= */

:root {

    --orange: #cc5800;

    --dark: #0a0a0a;

    --gray-bg: #1a1a1a;

    --panel: #141414;

    --white: #ffffff;

    --red: #ff3b30;

    --green: #34c759;

    --glass:
        rgba(
            255,
            255,
            255,
            0.05
        );

    --glass-border:
        rgba(
            255,
            255,
            255,
            0.1
        );

    --ease:
        cubic-bezier(
            0.19,
            1,
            0.22,
            1
        );

}



/* =========================================================
   RESET
========================================================= */

* {

    box-sizing: border-box;

    margin: 0;

    padding: 0;

}


html {

    scroll-behavior: smooth;

}


body {

    background: transparent;

    font-family:
        'Segoe UI',
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    color: white;

    overflow-x: hidden;

    transition:
        background-color
        0.8s
        var(--ease);

}


body.scrolled {

    background-color:
        var(--gray-bg);

}



/* =========================================================
   TOAST
========================================================= */

.toast-notification {

    position: fixed;

    top: -120px;

    left: 50%;

    transform:
        translateX(-50%);

    background:
        rgba(
            20,
            24,
            28,
            0.85
        );

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

    box-shadow:
        0 15px 40px
        rgba(
            204,
            88,
            0,
            0.25
        );

    backdrop-filter:
        blur(15px);

    -webkit-backdrop-filter:
        blur(15px);

    padding:
        16px 24px;

    border-radius:
        16px;

    z-index:
        9999;

    display:
        flex;

    flex-direction:
        column;

    gap:
        12px;

    width:
        90%;

    max-width:
        450px;

    pointer-events:
        none;

    transition:

        top
        0.6s
        cubic-bezier(
            0.175,
            0.885,
            0.32,
            1.275
        ),

        opacity
        0.4s
        ease;

    opacity:
        0;

}


.toast-notification.show {

    top: 30px;

    opacity: 1;

    pointer-events: auto;

}


.toast-content {

    display: flex;

    align-items: center;

    gap: 16px;

}


.toast-icon {

    font-size: 1.5rem;

    animation:
        pulseIcon
        2s
        infinite;

}


.toast-text h4 {

    font-size: 1rem;

    color:
        var(--white);

    font-weight: 700;

    margin-bottom: 2px;

}


.toast-text p {

    font-size: 0.9rem;

    color:
        var(--orange);

    font-family:
        'Courier New',
        Courier,
        monospace;

    font-weight: bold;

    letter-spacing:
        0.5px;

}


.toast-progress {

    height: 3px;

    width: 100%;

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

    border-radius:
        2px;

    position:
        relative;

    overflow: hidden;

}


.toast-progress::after {

    content: '';

    position:
        absolute;

    left: 0;

    top: 0;

    height: 100%;

    width: 100%;

    background:
        var(--orange);

    transform-origin:
        left;

    animation:
        progressCountdown
        7s
        linear
        forwards;

}


@keyframes progressCountdown {

    from {

        transform:
            scaleX(1);

    }

    to {

        transform:
            scaleX(0);

    }

}


@keyframes pulseIcon {

    0% {

        transform:
            scale(1);

    }

    50% {

        transform:
            scale(1.15);

    }

    100% {

        transform:
            scale(1);

    }

}



/* =========================================================
   NAVBAR
========================================================= */

.navbar {

    position: fixed;

    top: 0;

    width: 100%;

    height: 100vh;

    display: flex;

    align-items: center;

    justify-content: center;

    z-index: 1000;

    transition:
        0.8s
        var(--ease);

    pointer-events: none;

}



/* =========================================================
   VIDEO
========================================================= */

.hero-bg {

    position: absolute;

    inset: 0;

    z-index: -1;

    overflow: hidden;

    transition:
        0.8s
        var(--ease);

}


.hero-bg video {

    width: 100%;

    height: 100%;

    object-fit: cover;

    position: absolute;

    inset: 0;

    z-index: -2;

}


.hero-bg::after {

    content: '';

    position: absolute;

    inset: 0;

    background:

        linear-gradient(

            rgba(
                0,
                0,
                0,
                0.55
            ),

            var(--dark)

        );

    z-index: -1;

}



/* =========================================================
   SMALL NAVBAR AFTER SCROLL
========================================================= */

.navbar.scrolled {

    height: 80px;

    background:
        rgba(
            10,
            10,
            10,
            0.98
        );

    backdrop-filter:
        blur(12px);

    -webkit-backdrop-filter:
        blur(12px);

    border-bottom:

        1px
        solid

        rgba(
            255,
            255,
            255,
            0.08
        );

    pointer-events:
        auto;

    box-shadow:

        0
        15px
        35px

        rgba(
            0,
            0,
            0,
            0.9
        );

}


.navbar.scrolled
.hero-bg {

    opacity: 0;

}



/* =========================================================
   BRAND
========================================================= */

.brand-container {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 10px;

    max-width: calc(100% - 32px);

    text-align: center;

}



/* =========================================================
   MOVING AUTO PART ICONS
========================================================= */

.navbar-pattern {

    position: absolute;

    width: 100%;

    height: 100%;

    display: flex;

    align-items: center;

    justify-content:
        space-between;

    padding:
        0 5%;

    opacity: 0;

    transition:
        opacity
        0.5s
        ease;

}


/*
    More visible than before.
    NO glow.
    NO outline.
*/

.navbar.scrolled
.navbar-pattern {

    opacity: 0.90;

}


.slot-wrap {

    display: flex;

    flex: 1;

    justify-content:
        space-around;

    gap: 8px;

}


.center-space {

    width: 550px;

    flex-shrink: 0;

}


.vertical-slot {

    position: relative;

    width: 31px;

    height: 31px;

    overflow: hidden;

}


/*
    CLEAN PURE WHITE ICONS
    No shadow
    No glow
    No outline
*/

.ambient-icon {

    position: absolute;

    width: 100%;

    height: 100%;

    object-fit: contain;

    filter:
        brightness(0)
        invert(1);

    opacity: 0.92;

}



/* =========================================================
   ICON ANIMATION
========================================================= */

@keyframes slotUp {

    0%,
    20% {

        transform:
            translateY(0);

    }


    45%,
    70% {

        transform:
            translateY(-31px);

    }


    95%,
    100% {

        transform:
            translateY(0);

    }

}


@keyframes slotDown {

    0%,
    20% {

        transform:
            translateY(31px);

    }


    45%,
    70% {

        transform:
            translateY(0);

    }


    95%,
    100% {

        transform:
            translateY(31px);

    }

}


.swap-type-A
.item-primary {

    animation:

        slotUp

        var(--dur)

        var(--ease)

        var(--delay)

        infinite;

}


.swap-type-A
.item-secondary {

    animation:

        slotDown

        var(--dur)

        var(--ease)

        var(--delay)

        infinite;

}


.swap-type-B
.item-primary {

    animation:

        slotDown

        var(--dur)

        var(--ease)

        var(--delay)

        infinite;

}


.swap-type-B
.item-secondary {

    animation:

        slotUp

        var(--dur)

        var(--ease)

        var(--delay)

        infinite;

}



/* =========================================================
   PENNSYLVANIA PARTS LOGO
========================================================= */

.logo-text {

    font-size:

        clamp(
            1.5rem,
            5.5vw,
            6rem
        );

    font-weight:
        900;

    letter-spacing:
        -2px;

    transition:

        font-size
        0.8s
        var(--ease),

        letter-spacing
        0.8s
        var(--ease);

    text-transform:
        uppercase;

    pointer-events:
        auto;

    background:

        linear-gradient(

            90deg,

            var(--white)
            0%,

            var(--orange)
            25%,

            var(--white)
            50%,

            var(--orange)
            75%,

            var(--white)
            100%

        );

    background-size:
        200% auto;

    -webkit-background-clip:
        text;

    -webkit-text-fill-color:
        transparent;

    background-clip:
        text;

    animation:

        leftToRightFade
        5s
        linear
        infinite;

}


.navbar.scrolled
.logo-text {

    font-size:
        1.6rem;

    letter-spacing:
        1px;

}


@keyframes leftToRightFade {

    0% {

        background-position:
            0%
            center;

    }

    100% {

        background-position:
            -200%
            center;

    }

}



/* =========================================================
   SUBTITLE
========================================================= */

.logo-subtitle {

    font-size:

        clamp(
            0.9rem,
            1.8vw,
            1.2rem
        );

    font-weight:
        700;

    color:
        #8a8a8a;

    letter-spacing:
        0.5px;

    opacity:
        1;

    transform:
        translateY(0);

    transition:

        opacity
        0.6s
        var(--ease),

        transform
        0.6s
        var(--ease),

        max-height
        0.6s
        var(--ease);

    max-height:
        50px;

}


.navbar.scrolled
.logo-subtitle {

    opacity: 0;

    transform:
        translateY(-15px);

    max-height: 0;

    overflow: hidden;

    margin: 0;

    pointer-events:
        none;

}



/* =========================================================
   NAV BUTTONS
========================================================= */

.nav-btn {

    position: absolute;

    top: 40px;

    transform:
        translateY(-50%);

    width: 50px;

    height: 50px;

    border-radius:
        50%;

    background:
        var(--glass);

    border:

        1px
        solid

        var(--glass-border);

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    cursor:
        pointer;

    pointer-events:
        auto;

    transition:

        0.4s
        var(--ease);

    color:
        white;

}


.nav-btn:hover {

    background:
        var(--orange);

    border-color:
        var(--orange);

    transform:

        translateY(-50%)
        scale(1.1);

}


.nav-btn:active {

    transform:

        translateY(-50%)
        scale(0.95);

}


.nav-btn.right.logged-in {

    border-color:
        var(--orange);

    color:
        var(--orange);

    background:

        rgba(
            204,
            88,
            0,
            0.08
        );

}


.nav-btn.left {

    left: 30px;

}


.nav-btn.right {

    right: 30px;

}


.navbar.scrolled
.nav-btn {

    width: 42px;

    height: 42px;

    background:

        rgba(
            15,
            15,
            15,
            0.85
        );

    border-color:

        rgba(
            255,
            255,
            255,
            0.15
        );

    box-shadow:

        0 6px 15px

        rgba(
            0,
            0,
            0,
            0.6
        );

}


.nav-btn svg {

    width: 22px;

    height: 22px;

    transition:
        0.3s;

}


.navbar.scrolled
.nav-btn svg {

    width: 18px;

    height: 18px;

}



/* =========================================================
   BURGER MENU
========================================================= */

.burger {

    display: flex;

    flex-direction:
        column;

    gap: 4px;

}


.burger span {

    width: 18px;

    height: 2px;

    background:
        white;

    transition:
        0.3s;

}



/* =========================================================
   DRAWERS
========================================================= */

.side-drawer {

    position: fixed;

    top: 0;

    width: 400px;

    height: 100vh;

    background:
        var(--panel);

    z-index:
        3000;

    transition:

        0.6s
        var(--ease);

    padding:

        80px
        40px;

}


#left-drawer {

    left: 0;

    transform:
        translateX(-100%);

    border-right:

        1px
        solid

        var(--orange);

}


#right-drawer {

    right: 0;

    transform:
        translateX(100%);

    border-left:

        1px
        solid

        var(--orange);

}


#left-drawer.open,
#right-drawer.open {

    transform:
        translateX(0);

}


.drawer-header,
.auth-title {

    font-size: 2rem;

    color:
        var(--orange);

    margin-bottom:
        30px;

    font-weight:
        900;

}


.close-btn {

    position: absolute;

    top: 25px;

    right: 25px;

    background:
        none;

    border:
        none;

    color:
        white;

    font-size:
        2rem;

    cursor:
        pointer;

    opacity:
        0.5;

    transition:
        0.3s;

}


.close-btn:hover {

    opacity: 1;

    transform:
        rotate(90deg);

}


.drawer-links a {

    display: block;

    color:
        white;

    text-decoration:
        none;

    font-size:
        1.2rem;

    padding:
        18px 0;

    border-bottom:

        1px
        solid
        #222;

    transition:
        0.3s;

}


.drawer-links a:hover {

    color:
        var(--orange);

    padding-left:
        10px;

}


.side-drawer.open
[style*="--i"] {

    opacity: 1;

    transform:
        translateY(0);

    transition:

        0.5s
        var(--ease);

    transition-delay:

        calc(
            var(--i)
            *
            0.08s
        );

}


.side-drawer
[style*="--i"] {

    opacity: 0;

    transform:
        translateY(20px);

}



/* =========================================================
   LOGIN / REGISTER
========================================================= */

.auth-box {

    width: 100%;

}


.auth-tabs {

    display: flex;

    gap: 20px;

    margin-bottom:
        30px;

    border-bottom:

        1px
        solid
        #333;

}


.tab-btn {

    background:
        none;

    border:
        none;

    color:
        #555;

    font-size:
        1.1rem;

    font-weight:
        bold;

    padding-bottom:
        10px;

    cursor:
        pointer;

    transition:
        0.3s;

}


.tab-btn.active {

    color:
        var(--orange);

    border-bottom:

        2px
        solid

        var(--orange);

}


.auth-form {

    display:
        none;

    flex-direction:
        column;

    gap:
        15px;

}


.auth-form.active {

    display:
        flex;

}


.input-group input {

    width: 100%;

    background:
        #000;

    border:

        1px
        solid
        #333;

    padding:
        15px;

    color:
        white;

    border-radius:
        8px;

    outline:
        none;

    transition:
        0.3s;

}


.input-group input:focus {

    border-color:
        var(--orange);

}


.auth-btn {

    background:
        var(--orange);

    color:
        white;

    border:
        none;

    padding:
        16px;

    border-radius:
        8px;

    font-weight:
        bold;

    cursor:
        pointer;

    transition:
        0.3s;

    margin-top:
        10px;

    text-transform:
        uppercase;

    letter-spacing:
        0.5px;

}


.auth-btn:hover {

    background:
        #ff7300;

}


.forgot-link {

    text-align:
        center;

    color:
        #777;

    text-decoration:
        none;

    font-size:
        0.9rem;

    margin-top:
        10px;

}


.verify-info {

    color:
        #8a8a8a;

    font-size:
        0.9rem;

    line-height:
        1.4;

    margin-bottom:
        5px;

}


#verify-code {

    text-align:
        center;

    font-size:
        1.2rem;

    letter-spacing:
        4px;

    font-weight:
        bold;

    color:
        var(--orange);

}


.error-msg {

    color:
        var(--red);

    font-size:
        0.9rem;

    min-height:
        18px;

    font-weight:
        600;

}


.back-btn {

    background:
        none;

    border:
        none;

    color:
        #666;

    font-size:
        0.95rem;

    font-weight:
        600;

    cursor:
        pointer;

    margin-top:
        15px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    transition:
        0.3s;

}


.back-btn:hover {

    color:
        white;

    transform:
        translateX(-3px);

}



/* =========================================================
   PROFILE
========================================================= */

#profile-box {

    display: none;

    flex-direction:
        column;

    height: 100%;

    justify-content:
        space-between;

}


.profile-info {

    display: flex;

    flex-direction:
        column;

    align-items:
        center;

    text-align:
        center;

    margin-top:
        20px;

}


.avatar-placeholder {

    width: 80px;

    height: 80px;

    background:
        var(--orange);

    border-radius:
        50%;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    font-size:
        1.8rem;

    font-weight:
        900;

    margin-bottom:
        20px;

}


#user-display-name {

    font-size:
        1.4rem;

    font-weight:
        800;

    color:
        white;

    margin-bottom:
        5px;

}


#user-display-email {

    font-size:
        1rem;

    color:
        #777;

}


.logout-btn {

    background:
        #222;

    border:

        1px
        solid
        #333;

    margin-top:
        auto;

}


.logout-btn:hover {

    background:
        var(--red);

    border-color:
        var(--red);

}



/* =========================================================
   DRAWER BACKDROP
========================================================= */

.drawer-backdrop {

    position: fixed;

    inset: 0;

    background:

        rgba(
            0,
            0,
            0,
            0.8
        );

    backdrop-filter:
        blur(8px);

    -webkit-backdrop-filter:
        blur(8px);

    z-index:
        2000;

    opacity: 0;

    pointer-events:
        none;

    transition:
        0.5s;

}


.drawer-backdrop.active {

    opacity: 1;

    pointer-events:
        auto;

}



/* =========================================================
   PAGE SPACER
========================================================= */

.spacer {

    height:
        100vh;

}



/* =========================================================
   SEARCH BAR
========================================================= */

.search-wrapper {

    max-width:
        700px;

    width:
        calc(
            100%
            -
            30px
        );

    margin:

        -40px
        auto
        40px;

    position:
        relative;

    /* Scroll with the page instead of staying below the navbar. */

    top:
        auto;

    z-index:
        100;

    border-radius:
        50px;

    padding:
        2px;

    transition:

        box-shadow
        0.5s
        ease;

    box-shadow:

        0
        20px
        50px

        rgba(
            0,
            0,
            0,
            0.6
        );

}


.search-border-svg {

    position:
        absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    pointer-events:
        none;

    z-index: 1;

}


.laser-rect {

    fill:
        none;

    stroke:

        rgba(
            255,
            255,
            255,
            0.08
        );

    stroke-width:
        2px;

    stroke-dasharray:
        180 1400;

    stroke-dashoffset:
        0;

    animation:

        traceLaser
        3.5s
        linear
        infinite;

    transition:

        stroke
        0.5s
        ease;

}


.search-container {

    display: flex;

    background:
        var(--panel);

    padding:
        8px;

    border-radius:
        50px;

    position:
        relative;

    z-index:
        2;

    width:
        100%;

    height:
        100%;

    transition:

        background-color
        0.5s
        ease;

}


/*
   Keep the existing search styling as the bar scrolls with the page.
*/

body.scrolled
.search-wrapper {

    box-shadow:

        0
        15px
        40px

        rgba(
            0,
            0,
            0,
            0.65
        );

}


body.scrolled
.laser-rect {

    stroke:
        var(--orange);

}


body.scrolled
.search-container {

    background:
        #25262b;

}


.search-container input {

    flex: 1;

    background:
        none;

    border:
        none;

    padding:
        0 25px;

    color:
        white;

    outline:
        none;

    font-size:
        1rem;

    z-index:
        3;

}


.search-container input::placeholder {

    color:
        #8b8b8b;

}


.search-container button {

    background:
        var(--orange);

    color:
        white;

    border:
        none;

    padding:
        15px 35px;

    border-radius:
        40px;

    cursor:
        pointer;

    font-weight:
        bold;

    transition:
        0.3s;

    z-index:
        3;

}


.search-container button:hover {

    background:
        #ff7300;

}



/* =========================================================
   SEARCH BORDER ANIMATION
========================================================= */

@keyframes traceLaser {

    from {

        stroke-dashoffset:
            0;

    }

    to {

        stroke-dashoffset:
            1580;

    }

}



/* =========================================================
   MAIN CONTENT
========================================================= */

.main-content {

    min-height:
        160vh;

    padding:

        50px
        30px
        200px;

}


.content-container {

    width:
        min(
            1200px,
            100%
        );

    margin:
        0 auto;

}


.section-heading {

    margin-bottom:
        45px;

}


.section-label {

    color:
        var(--orange);

    font-size:
        0.8rem;

    font-weight:
        800;

    letter-spacing:
        3px;

    margin-bottom:
        10px;

}


.section-heading h2 {

    color:
        white;

    font-size:

        clamp(
            2rem,
            4vw,
            3rem
        );

    font-weight:
        800;

    margin-bottom:
        15px;

}


.section-description {

    color:
        #8a8a8a;

    max-width:
        600px;

    font-size:
        1rem;

    line-height:
        1.7;

}



/* =========================================================
   DEMO CATEGORY CARDS
========================================================= */

.demo-grid {

    display: grid;

    grid-template-columns:

        repeat(
            3,
            1fr
        );

    gap:
        20px;

}


.demo-card {

    min-height:
        220px;

    background:
        #202124;

    border:

        1px
        solid

        rgba(
            255,
            255,
            255,
            0.06
        );

    border-radius:
        18px;

    padding:
        30px;

    transition:
        0.3s;

}


.demo-card:hover {

    transform:
        translateY(-5px);

    border-color:

        rgba(
            204,
            88,
            0,
            0.65
        );

}


.demo-card-icon {

    width:
        45px;

    height:
        45px;

    margin-bottom:
        30px;

}


.demo-card-icon img {

    width: 100%;

    height: 100%;

    object-fit:
        contain;

    /*
        plain white again
    */

    filter:
        brightness(0)
        invert(1);

    opacity:
        0.9;

}


.demo-card h3 {

    font-size:
        1.25rem;

    margin-bottom:
        8px;

}


.demo-card p {

    color:
        #777;

}



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

@media
(max-width: 900px) {


    .slot-wrap {

        display:
            none;

    }


    .center-space {

        width:
            auto;

    }


    .side-drawer {

        width:
            100%;

    }


    .demo-grid {

        grid-template-columns:
            1fr;

    }


}



/* =========================================================
   MOBILE
========================================================= */

@media
(max-width: 600px) {


    .logo-text {

        font-size:
            clamp(1.5rem, 5.5vw, 3.2rem);

    }


    .nav-btn.left {

        left:
            15px;

    }


    .nav-btn.right {

        right:
            15px;

    }


    .search-wrapper {

        width:

            calc(
                100%
                -
                24px
            );

        top:
            auto;

    }


    .search-container {

        padding:
            6px;

    }


    .search-container input {

        min-width: 0;

        padding:
            0 14px;

        font-size:
            0.9rem;

    }


    .search-container button {

        padding:
            14px 22px;

    }


    .main-content {

        padding:

            40px
            20px
            150px;

    }


}

/* Keep the longer brand between the menu and account buttons. */
.navbar.scrolled .brand-container {
    max-width: calc(100% - 140px);
}

.logo-text {
    white-space: nowrap;
}

@media (max-width: 600px) {
    .navbar.scrolled .logo-text {
        font-size: clamp(0.75rem, 3.3vw, 1.6rem);
        letter-spacing: 0;
    }
}


/* REAL ACCOUNT FORMS */
.side-drawer { overflow-y: auto; overscroll-behavior: contain; }
.input-group label { display: block; margin-bottom: 7px; color: #c8c8cc; font-size: .85rem; }
.field-help { margin-top: 7px; color: #aaa; font-size: .8rem; }
.account-notice { color: #b9d8c1; font-size: .9rem; line-height: 1.55; margin-bottom: 16px; overflow-wrap: anywhere; }
.account-notice:empty { display: none; }
.account-notice.is-error { color: var(--red); }
button.forgot-link { background: none; border: 0; cursor: pointer; font-family: inherit; }
[data-auth-action]:disabled { opacity: .5; cursor: wait; }
.auth-btn:focus-visible, .back-btn:focus-visible, .tab-btn:focus-visible, .forgot-link:focus-visible { outline: 2px solid white; outline-offset: 4px; }
#verify-email, #user-display-email { overflow-wrap: anywhere; }
#profile-box { min-height: 380px; }
.avatar-placeholder { font-size: 1.5rem; }


/* SELL PARTS */
.drawer-links .sell-menu-link {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 20px 16px;
    border: 1px solid #59351e;
    border-radius: 14px;
    background: #201912;
    font-weight: 700;
}
.drawer-links .sell-menu-link:hover {
    padding-left: 16px;
    color: #fff;
    background: #302015;
    border-color: var(--orange);
}
.sell-menu-icon { flex: 0 0 30px; }
.sell-menu-icon svg { display: block; width: 30px; height: 30px; color: #fff; }
.sell-menu-link > svg { width: 22px; height: 22px; flex-shrink: 0; margin-left: auto; }
.sell-menu-link small { display: block; margin-top: 6px; color: #b8afa8; font-size: .78rem; line-height: 1.5; font-weight: 400; }
.sell-section {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, .45fr);
    align-items: center;
    gap: 44px;
    margin-top: 80px;
    padding: clamp(28px, 5vw, 64px);
    border: 1px solid #654023;
    border-radius: 24px;
    background: linear-gradient(115deg, #211d19, #171717 70%);
    box-shadow: 0 20px 50px #0003;
    scroll-margin-top: 104px; /* 80px navbar plus 24px spacing */
}
.sell-eyebrow { display: flex; align-items: center; gap: 10px; color: #ef9a53; font-size: .72rem; font-weight: 800; letter-spacing: 2.3px; margin-bottom: 20px; }
.sell-eyebrow span { width: 22px; height: 2px; background: #ef9a53; }
.sell-copy h2 { color: #fff; font-size: clamp(1.9rem, 3.5vw, 3rem); line-height: 1.13; letter-spacing: -1.4px; font-weight: 800; }
.sell-copy h2 span { color: #ed9750; }
.sell-description { max-width: 480px; margin-top: 22px; color: #bcb7b2; font-size: 1rem; line-height: 1.75; }
.sell-action { text-align: center; }
.sell-symbol { display: grid; place-items: center; width: 76px; height: 76px; margin: 0 auto 24px; border: 1px solid #ffffff20; border-radius: 20px; background: #ffffff05; }
.sell-symbol svg { width: 40px; height: 40px; color: #fff; opacity: .95; }
.sell-button { display: inline-flex; align-items: center; justify-content: center; gap: 24px; width: 100%; min-height: 58px; padding: 17px 26px; border: 1px solid #e57a29; border-radius: 12px; background: var(--orange); color: white; font: inherit; font-size: 1.05rem; font-weight: 750; cursor: pointer; transition: background .2s ease, transform .2s ease; }
.sell-button svg { width: 22px; height: 22px; transition: transform .2s ease; }
.sell-button:hover { background: #b94d00; transform: translateY(-2px); }
.sell-button:hover svg { transform: translateX(3px); }
.sell-button:active { transform: translateY(0); }
.sell-action > p { margin-top: 14px; color: #aaa29b; font-size: .78rem; line-height: 1.5; }
.sell-menu-link:focus-visible, .sell-button:focus-visible, #sell-heading:focus-visible { outline: 2px solid #fff; outline-offset: 6px; }
@media (max-width: 700px) {
    .sell-section { grid-template-columns: 1fr; gap: 28px; margin-top: 48px; border-radius: 20px; }
    .sell-action { text-align: left; }
    .sell-symbol { display: none; }
    .sell-action > p { text-align: center; }
    .sell-copy h2 { letter-spacing: -.8px; }
}
@media (prefers-reduced-motion: reduce) {
    .sell-button, .sell-button svg, .drawer-links .sell-menu-link { transition: none; }
    .sell-button:hover, .sell-button:hover svg { transform: none; }
}