html,
body {
    height: 100%;
}

body {
    min-width: 320px;
    font-family: "Inter", sans-serif;
    background-color: var(--color-background-01);
}

.wrapper {
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

main.content {
    flex: 1 1 auto;
    padding-top: var(--header-nav-height);
}

main.content.py-5 {
    padding-top: calc(var(--header-nav-height) + 3rem) !important;
}

@media (min-width: 64rem) {

    main.content.py-5:has(#paginated-products),
    main.content.py-5:has(.product-section),
    main.content.py-5:has(.scripts-section),
    main.content.py-5:has(.extensions-section),
    main.content.py-5:has(.extension-section),
    main.content.py-5:has(.redeem-section),
    /* Every page of the cabinet at once, rather than one content class per page:
       naming them individually left Manage Subscription (and Licenses, and
       Earnings) on the default 3rem, so the menu sat 16px lower there and
       appeared to jump as you moved between pages. `.profile__body` is what all
       seven cabinet pages share, and nothing else uses it. */
    main.content.py-5:has(.profile__body) {
        --products-sticky-top: calc(var(--header-nav-height) + 2rem);
        padding-top: var(--products-sticky-top) !important;
    }
}

@media (max-width: 63.99875rem) {

    main.content.py-5:has(#paginated-products),
    main.content.py-5:has(.product-section),
    main.content.py-5:has(.scripts-section),
    main.content.py-5:has(.extensions-section),
    main.content.py-5:has(.extension-section),
    main.content.py-5:has(.redeem-section),
    main.content.py-5:has(.profile__body) {
        --products-sticky-top-tablet: var(--header-nav-height);
        --products-sticky-top-mobile: var(--header-nav-height);
        padding-top: calc(var(--header-nav-height) + 1rem) !important;
    }
}

main.content--bootstrap-home {
    padding-top: var(--header-nav-height);
    padding-bottom: 0;
}

.site-header,
.bootstrap-home-page,
.site-footer {
    --bs-gutter-x: 1.5rem;
    --bootstrap-stroke-width: 0.063rem;
    --bootstrap-chevron-mask: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.75 0.75L4.75 4.75L8.75 0.75' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

@media (max-width: 767.98px) {

    .site-header,
    .bootstrap-home-page,
    .site-footer {
        --bootstrap-stroke-width: 0.063rem;
        --bootstrap-chevron-mask: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.75 0.75L4.75 4.75L8.75 0.75' stroke='black' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    }
}

.bootstrap-home-page .container {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    padding-right: calc(var(--bs-gutter-x) * .5);
    padding-left: calc(var(--bs-gutter-x) * .5);
}

@media (min-width: 576px) {
    .bootstrap-home-page .container {
        max-width: 540px;
    }
}

@media (min-width: 768px) {
    .bootstrap-home-page .container {
        max-width: 720px;
    }
}

@media (min-width: 992px) {
    .bootstrap-home-page .container {
        max-width: 960px;
    }
}

@media (min-width: 1200px) {
    .bootstrap-home-page .container {
        max-width: 1140px;
    }
}

@media (min-width: 1400px) {
    .bootstrap-home-page .container {
        max-width: 1320px;
    }
}

/* ========== HERO START ========= */

.hero {
    position: relative;
    isolation: isolate;
}

.bootstrap-home-page .hero-video {
    border-bottom: 0;
    padding: 3rem 0;
}

.hero-video {
    --hero-copy-width: 46rem;
    display: flex;
    align-items: center;
    z-index: 0;
    padding-block: 3rem;
    background-color: var(--color-dark);
    overflow: hidden;
    isolation: isolate;
    contain: paint;
}

.hero-video--has-video::after {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    content: "";
    background: linear-gradient(90deg, rgba(18, 18, 18, 0.82) 0%, rgba(18, 18, 18, 0.58) 48%, rgba(18, 18, 18, 0.78) 100%);
    backdrop-filter: none;
    filter: none;
    mix-blend-mode: normal;
    opacity: 1;
    animation: none;
    transition: none;
    will-change: auto;
}

.hero-media {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.hero-video__media {
    position: relative;
    z-index: 0;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center center;
    pointer-events: none;
    backface-visibility: hidden;
    transform: translateZ(0);
    backdrop-filter: none;
    filter: none;
    mix-blend-mode: normal;
    opacity: 1;
    animation: none;
    transition: none;
    will-change: transform;
}

.hero-video__media::-webkit-media-controls-start-playback-button {
    display: none !important;
    -webkit-appearance: none;
}

.hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
}

@media (min-width: 992px) {
    .bootstrap-home-page .hero-video {
        min-height: 360px;
        padding: clamp(56px, 5vw, 72px) 0;
    }

    .hero-video .container,
    .hero-video .row {
        min-height: 240px;
    }
}

.hero-video__eyebrow {
    color: var(--color-brand);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-small);
}

.hero-video .col-lg-12 {
    display: flex;
    flex-direction: column;
    gap: clamp(18px, calc(12.29px + 1.79vw), 28px);
    width: fit-content;
    max-width: 100%;
}

.hero-video__title {
    font-family: var(--heading-font-family);
    font-size: var(--hero-h1-size);
    font-weight: var(--hero-h1-weight);
    line-height: var(--hero-h1-line-height);
    color: var(--color-light);
    width: 100%;
    max-width: none;
    text-wrap: balance;
    overflow-wrap: normal;
}

.hero-video__title .accent {
    display: inline-block;
    font-family: var(--display-font-family);
    font-style: var(--display-font-style);
    font-weight: var(--font-weight-semibold) !important;
    font-size: var(--hero-accent-size);
    letter-spacing: var(--letter-spacing-normal);
    line-height: var(--hero-accent-line-height);
    white-space: nowrap;
}

.hero-video__accent-underlined {
    position: relative;
}

.hero-video__accent-underline {
    position: absolute;
    top: 0.86em;
    left: 0;
    display: block;
    width: 100%;
    height: auto;
    pointer-events: none;
}

.hero-video__logo-word {
    display: inline-flex !important;
    align-items: center;
    gap: 0.03em;
    vertical-align: baseline;
}

.hero-video__logo-letter {
    display: inline-block;
    width: auto;
    height: 0.82em;
    flex: 0 0 auto;
    transform: translateY(0.02em);
}

.hero-search {
    width: 100%;
    max-width: none;
    margin-top: 0;
}

.hero-search__group {
    min-height: clamp(48px, calc(41.14px + 2.14vw), 60px);
    overflow: hidden;
    align-items: center;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0)),
        rgba(10, 12, 14, 0.72);
    border: 0.063rem solid var(--color-line);
    border-radius: var(--radius-pill);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 0.75rem 2rem rgba(0, 0, 0, 0.16);
    -webkit-backdrop-filter: blur(0.625rem) saturate(130%);
    backdrop-filter: blur(0.625rem) saturate(130%);
}

.hero-search__icon {
    padding-left: clamp(18px, calc(14.57px + 1.07vw), 24px);
    padding-right: var(--space-2);
    background-color: transparent;
    border: 0;
    color: var(--color-light);
}

.hero-search__icon svg {
    display: block;
    width: clamp(20px, calc(15.43px + 1.43vw), 28px);
    height: auto;
}

.hero-search__input {
    width: 100%;
    flex: 1 1 auto;
    min-width: 0;
    padding-inline: var(--space-2) clamp(18px, calc(14.57px + 1.07vw), 24px);
    background-color: transparent;
    border: 0;
    color: var(--color-light);
    font-size: clamp(14px, calc(12.86px + 0.36vw), 16px);
    font-weight: var(--font-weight-medium);
    line-height: 1.4;
}

.hero-search__input::placeholder {
    font-weight: 400 !important;
    color: #55545E !important;
    opacity: 1;
}

.hero-search__input:focus {
    background-color: transparent;
    box-shadow: none;
    color: var(--color-light);
}

.hero-search__group:focus-within {
    border-color: rgba(181, 251, 2, 0.72);
    box-shadow: none;
}

.hero-search__submit {
    flex-shrink: 0;
    align-self: stretch;
    margin: 6px;
    padding-inline: 16px;
    border-radius: var(--radius-pill);
}

.hero-video__lead {
    max-width: 40rem;
    color: var(--color-gray-light-02);
}

.hero-video .col-lg-7 {
    min-width: 0;
}

@media (max-width: 991.98px) {
    .hero-video .col-lg-12 {
        width: 100%;
        max-width: var(--hero-copy-width);
        margin-inline: auto;
        text-align: center;
    }

    .hero-video__title,
    .hero-search {
        margin-inline: auto;
    }
}

@media (max-width: 767.98px) {
    .hero-video--has-video::after {
        background: linear-gradient(90deg, rgba(18, 18, 18, 0.88) 0%, rgba(18, 18, 18, 0.7) 48%, rgba(18, 18, 18, 0.86) 100%);
    }
}

@media (max-width: 575.98px) {
    .hero-video .row {
        --bs-gutter-x: 1.5rem;
    }

    .hero-video .col-lg-12 {
        text-align: left;
    }

    .hero-video .col-lg-7 {
        width: 100%;
        max-width: none;
    }

    .hero-video__title {
        max-width: none;
        overflow-wrap: break-word;
    }

    .hero-search {
        width: 100%;
        max-width: none;
    }

    .hero-search__submit {
        padding-inline: 12px;
        font-size: 0.875rem;
    }

    .hero-video__lead {
        font-size: 1.125rem;
        line-height: 1.55;
        max-width: none;
    }

    .hero-video .d-grid {
        max-width: none;
    }

    .hero-video .btn {
        white-space: normal;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-video__media {
        display: none;
    }
}

/* ========== HERO END ========= */

/* ========== CATEGORIES START ========= */

.categories {
    background-color: var(--color-background-01);
    border-top: var(--bootstrap-stroke-width) solid var(--color-line);
    padding-block: clamp(24px, 5vw, 60px) !important;
}

.categories .row {
    --bs-gutter-x: clamp(6px, 3vw, 1.5rem);
    --bs-gutter-y: clamp(6px, 3vw, 1.5rem);
}

.category-card {
    --bs-card-bg: #1E2025;
    --bs-card-border-color: var(--color-line);
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    padding: clamp(6px, 2vw, 12px);
    color: var(--color-light);
    background-color: var(--bs-card-bg);
    border: var(--bootstrap-stroke-width) solid var(--bs-card-border-color);
    border-width: var(--bootstrap-stroke-width);
    border-radius: clamp(14px, 4vw, 22px);
    overflow: hidden;
    transition:
        border-color var(--transition-duration-fast) var(--transition-timing),
        transform var(--transition-duration-fast) var(--transition-timing);
}

.category-card:hover,
.category-card:focus {
    color: var(--color-light);
    border-color: var(--color-brand);
    transform: translateY(-8px);
}

.category-card:focus-visible {
    outline: var(--bootstrap-stroke-width) solid var(--color-brand);
    outline-offset: 4px;
}

.category-card__media {
    position: relative;
    aspect-ratio: 1.04;
    overflow: hidden;
    border-radius: 8px;
    background-color: var(--color-dark);
}

.category-card__media::before,
.category-card__media::after {
    position: absolute;
    inset: 0;
    pointer-events: none;
    content: "";
}

.category-card__media::before {
    background:
        linear-gradient(rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.22)) 50% 50% / 100% 1px no-repeat,
        linear-gradient(90deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.22)) 50% 50% / 1px 100% no-repeat,
        linear-gradient(rgba(255, 255, 255, 0.52), rgba(255, 255, 255, 0.52)) 18% 28% / 18px 1px no-repeat,
        linear-gradient(90deg, rgba(255, 255, 255, 0.52), rgba(255, 255, 255, 0.52)) 18% 28% / 1px 26px no-repeat,
        linear-gradient(rgba(255, 255, 255, 0.52), rgba(255, 255, 255, 0.52)) 82% 28% / 18px 1px no-repeat,
        linear-gradient(90deg, rgba(255, 255, 255, 0.52), rgba(255, 255, 255, 0.52)) 82% 28% / 1px 26px no-repeat,
        linear-gradient(rgba(255, 255, 255, 0.52), rgba(255, 255, 255, 0.52)) 18% 74% / 18px 1px no-repeat,
        linear-gradient(90deg, rgba(255, 255, 255, 0.52), rgba(255, 255, 255, 0.52)) 18% 74% / 1px 26px no-repeat,
        linear-gradient(rgba(255, 255, 255, 0.52), rgba(255, 255, 255, 0.52)) 82% 74% / 18px 1px no-repeat,
        linear-gradient(90deg, rgba(255, 255, 255, 0.52), rgba(255, 255, 255, 0.52)) 82% 74% / 1px 26px no-repeat;
}

.category-card__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    filter: saturate(1.04) contrast(1.02);
}

.category-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 24px;
    color: #ffffff;
    background: linear-gradient(135deg, rgba(69, 16, 138, 0.95), rgba(223, 77, 104, 0.9));
}

.category-card__icon svg {
    max-width: 72px;
    max-height: 72px;
}

.category-card__body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: 14px 8px 2px;
}

.category-card__title {
    margin: 0;
    color: #DADBE0;
    font-size: clamp(10px, 2.8vw, 16px);
    font-weight: var(--font-weight-regular);
    line-height: 1.35;
    letter-spacing: 0;
    transition: color var(--transition-duration-fast) var(--transition-timing);
}

.category-card__arrow {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    color: var(--color-gray-05);
    line-height: 1;
    transition: color var(--transition-duration-fast) var(--transition-timing);
}

.category-card__arrow svg {
    display: block;
    width: clamp(12px, 3vw, 19px);
    height: auto;
}

.category-card:hover .category-card__title,
.category-card:focus .category-card__title,
.category-card:hover .category-card__arrow,
.category-card:focus .category-card__arrow {
    color: var(--color-brand);
}

/* ========== CATEGORIES END ========= */

/* ========== HOME SUBSCRIBE START ========= */

.home-subscribe {
    border-top: var(--bootstrap-stroke-width) solid var(--color-line);
    color: var(--color-light);
}

.home-subscribe__title {
    margin-bottom: var(--space-2);
    color: var(--color-light);
    font-family: var(--font-family-accent);
    font-style: italic;
    font-weight: var(--font-weight-semibold);
    line-height: 1;
    letter-spacing: 0.04em;
}

.home-subscribe__title-primary,
.home-subscribe__title-secondary {
    display: inline-block;
}

.home-subscribe__title-primary {
    position: relative;
    isolation: isolate;
    font-size: clamp(28px, calc(12px + 5vw), 56px);
}

.home-subscribe__title-mark {
    position: absolute;
    z-index: 0;
    top: 50%;
    left: 50%;
    width: 5.45em;
    max-width: none;
    height: auto;
    pointer-events: none;
    transform: translate(-50%, -45%);
}

.home-subscribe__title-text {
    position: relative;
    z-index: 1;
}

.home-subscribe__title-secondary {
    font-size: clamp(18px, calc(5.43px + 3.93vw), 40px);
}

.home-subscribe__text {
    margin-bottom: 0;
    color: var(--color-gray-light-02);
    font-family: var(--font-family-base);
    font-size: clamp(12px, calc(9.71px + 0.71vw), 16px);
    font-weight: var(--font-weight-regular);
    line-height: 1.4;
    letter-spacing: 0.02em;
}

@media (max-width: 767.98px) {
    .home-subscribe__text {
        margin-bottom: 14px;
    }
}

/* ========== HOME SUBSCRIBE END ========= */

@media (max-width: 991.98px) {
    body {
        padding-bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom));
    }
}

/* ========== BUTTONS START ========= */

.btn {
    border-radius: 5rem !important;
}

.btn-brand {
    background-color: var(--color-brand);
    color: var(--color-dark);
    border: 1.65px solid var(--color-brand);
}

.btn-brand:hover {
    background-color: rgba(181, 251, 2, 0.16);
    color: var(--color-brand);
    border: 1.65px solid var(--color-brand);
}

.btn-brand-reverse {
    background-color: transparent;
    color: var(--color-brand);
    border: 1.65px solid var(--color-brand);
}

.btn-brand-reverse:hover {
    background-color: rgba(181, 251, 2, 0.16);
    color: var(--color-brand);
    border: 1.65px solid var(--color-brand);
}

.subscribe-btn {
    width: 100%;
}

@media (min-width: 768px) {
    .subscribe-btn {
        width: auto;
    }
}

/* ========== BUTTONS END ========= */

/* ========== HEADER START ========= */

.custom-sticky {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 10000;
}

.site-header {
    isolation: isolate;
    background-color: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    filter: none;
    mix-blend-mode: normal;
    opacity: 1;
    backface-visibility: hidden;
    transform: none;
    transition: none;
}

.header-navbar {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0)),
        rgba(10, 12, 14, 0.72);
    border-bottom: var(--bootstrap-stroke-width) solid var(--color-line);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 0.75rem 2rem rgba(0, 0, 0, 0.12);
    min-height: var(--header-nav-height);
    -webkit-backdrop-filter: blur(0.625rem) saturate(130%);
    backdrop-filter: blur(0.625rem) saturate(130%);
    filter: none;
    mix-blend-mode: normal;
    opacity: 1;
    backface-visibility: hidden;
    transform: translateZ(0);
    transition: none;
}

.header>.container-fluid,
.header>.container-fluid>.row {
    background-color: transparent;
}

.header-navbar .navbar-brand {
    flex-shrink: 0;
    padding-left: 0 !important;
    margin-right: 0 !important;
}

.header-navbar .nav-link {
    color: #989898 !important;
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-medium);
}

.header-navbar {
    min-height: var(--header-nav-height);
    padding-top: 0;
    padding-bottom: 0;
}

.header-navbar>.container-fluid,
.header-navbar .navbar-collapse,
.header-navbar .navbar-nav,
.header-navbar .nav-item {
    min-height: inherit;
}

.header-navbar>.container-fluid {
    position: relative;
}

.header-navbar .navbar-collapse,
.header-navbar .navbar-nav,
.header-navbar .nav-item {
    display: flex;
    align-items: stretch;
}

.header-navbar .navbar-collapse {
    min-width: 0;
}

.header-navbar .navbar-nav {
    flex-wrap: nowrap;
    max-width: 100%;
    min-width: 0;
}

.header-navbar .nav-link {
    display: flex;
    align-items: center;
    position: relative;
    white-space: nowrap;
}


.header-navbar .nav-item {
    position: relative;
}

.header-navbar .nav-item::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: #B5FB02;
    opacity: 0;
    transition: opacity .2s ease;
}

.header-navbar .nav-item:hover::before,
.header-navbar .nav-item:has(.nav-link.active)::before {
    opacity: 1;
}

.header-navbar .nav-link:hover,
.header-navbar .nav-link.active {
    color: var(--color-light) !important;
}

@media (min-width: 992px) {
    .header-navbar .navbar-collapse {
        margin-right: var(--space-6);
    }

    .header-navbar .navbar-nav {
        column-gap: 32px;
    }

    .header-navbar .navbar-nav .nav-link {
        padding-inline: 0;
    }
}

.site-header .main-nav {
    flex: 1 1 auto;
    min-width: 0;
    margin-left: 0;
    align-self: stretch;
    min-height: var(--header-nav-height);
}

.site-header .main-nav__list {
    align-items: stretch;
    gap: 32px;
    width: 100%;
}

.site-header .main-nav__item,
.site-header .main-nav__more {
    min-height: var(--header-nav-height);
    align-items: stretch;
}

.site-header .main-nav__more {
    margin-left: 32px;
}

.site-header .main-nav__link {
    min-height: var(--header-nav-height);
    padding: 0;
    color: #818181;
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-semibold);
    line-height: 1;
}

.site-header .main-nav__link:hover,
.site-header .main-nav__link.active,
.site-header .main-nav__link[aria-expanded="true"] {
    color: var(--color-light);
}

.site-header .main-nav__link::after {
    bottom: 0;
    height: 3px;
    background-color: transparent;
}

.site-header .main-nav__link:hover::after,
.site-header .main-nav__link.active::after,
.site-header .main-nav__link[aria-expanded="true"]::after {
    background-color: var(--color-brand);
}

.site-header .main-nav__dropdown {
    top: 100%;
    z-index: 1050;
    background: var(--color-background-02);
    border: var(--bootstrap-stroke-width) solid var(--color-line);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.header-navbar .dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.header-navbar .dropdown-toggle::after {
    width: 10px;
    height: 6px;
    margin-left: 0;
    vertical-align: 0;
    background-color: currentColor;
    border: 0;
    -webkit-mask: var(--bootstrap-chevron-mask) center / contain no-repeat;
    mask: var(--bootstrap-chevron-mask) center / contain no-repeat;
}

.header-navbar .dropdown-toggle.no-after::after {
    display: none;
    content: none;
}

.header-signin {
    color: var(--color-gray-light-02);
    text-decoration: none;
}

.header-signin:hover {
    color: var(--color-light);
}

.header-account .header-signin {
    min-height: var(--header-nav-height);
    padding-right: 0;
}

.header-actions {
    align-self: center;
    flex: 0 0 auto;
    order: 4;
}

.header-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    width: auto;
    height: auto;
    white-space: nowrap;
}

.header-search {
    position: relative;
    z-index: 1070;
    display: flex;
    width: 48px;
    min-height: 48px;
    align-items: center;
    flex: 0 0 48px;
    order: 2;
    margin-left: 22px;
    margin-right: 22px;
    transition: width 0.28s var(--transition-timing),
        flex-basis 0.28s var(--transition-timing);
}

.header-search.is-open {
    width: min(52vw, 680px);
    flex-basis: min(52vw, 680px);
}

.header-search__toggle {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 48px;
    min-height: 48px;
    padding: 0;
    color: var(--color-light);
    border: 0;
    border-radius: var(--radius-pill);
    transition: opacity var(--transition-duration-fast) var(--transition-timing);
}

.header-search__toggle svg {
    display: none;
}

.header-search__toggle:focus-visible {
    outline: 2px solid var(--color-brand);
    outline-offset: 0.25rem;
}

.header-search.is-open .header-search__toggle {
    opacity: 0;
    pointer-events: none;
}

.header-search__panel {
    position: static;
    width: 100%;
    flex: 1 1 auto;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    overflow: hidden;
}

.header-search .search-form {
    position: static;
    display: flex;
    width: 100%;
    height: 48px;
    transform: none;
    opacity: 1;
    visibility: visible;
    background: transparent;
}

.header-search .search-form-container {
    position: relative;
    display: flex;
    width: 100%;
    height: 48px;
    align-items: center;
    overflow: hidden;
    background: transparent;
    border: var(--bootstrap-stroke-width) solid transparent;
    border-radius: var(--radius-pill);
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    transition: background-color var(--transition-duration-fast) var(--transition-timing),
        border-color var(--transition-duration-fast) var(--transition-timing),
        box-shadow var(--transition-duration-fast) var(--transition-timing);
}

.header-search:hover .search-form-container,
.header-search:focus-within .search-form-container {
    border-color: rgba(129, 129, 129, 0.85);
    box-shadow: none;
}

.header-search.is-open .search-form-container {
    border-color: rgba(181, 251, 2, 0.72);
    box-shadow: none;
}

.header-search .search-form-input {
    width: 100%;
    height: 100%;
    min-width: 0;
    padding: 0 0.75rem 0 3.25rem;
    color: var(--color-light);
    background: transparent !important;
    background-color: transparent !important;
    border: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-duration-fast) var(--transition-timing);
}

.header-search .search-form-input:active,
.header-search .search-form-input:focus {
    width: 100%;
    outline: 0;
    background: transparent !important;
    background-color: transparent !important;
    border: 0;
    box-shadow: none;
}

.header-search.is-open .search-form-input {
    opacity: 1;
    pointer-events: auto;
}

.header-search .search-form-container svg {
    position: absolute;
    top: 50%;
    left: 15px;
    width: 18px;
    height: 16px;
    color: var(--color-light);
    transform: translateY(-50%);
}

.header-search.is-open .search-form-container svg {
    cursor: pointer;
}

.header-search .search-form-button {
    flex-shrink: 0;
    width: 5rem;
    align-self: stretch;
    margin-right: 0.1875rem;
    padding-inline: 0;
    color: var(--color-dark);
    background-color: var(--color-brand);
    border: 0.03125rem solid rgba(202, 255, 51, 0.42);
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: var(--font-weight-semibold);
    line-height: var(--button-medium-line-height);
    cursor: pointer;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, visibility 0.2s ease, background-color 0.3s ease;
}

.header-search .search-form-container:has(.search-form-input:not(:placeholder-shown)) .search-form-button {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.header-search .search-form-button:hover {
    background-color: var(--color-brand-dark);
}

.header-search .btn-close__icon--form {
    color: var(--color-light);
    cursor: pointer;
}

.header-navbar .navbar-collapse {
    order: 3;
}

@media (max-width: 991.98px) {
    .header-navbar .navbar-brand {
        padding-inline: 0;
    }

    .header-navbar .container-fluid {
        gap: 10px;
    }

    .header-navbar .btn-brand {
        padding-inline: var(--space-4);
        font-size: var(--font-size-button-small);
        line-height: var(--line-height-button-small);
        white-space: nowrap;
    }

    .header-actions {
        order: 2;
    }

    .header-search {
        position: static;
        order: 3;
        z-index: 10030;
        width: 24px;
        flex: 0 0 24px;
        margin-left: 0;
        margin-right: 0;
    }

    .header-search.is-open {
        width: 24px;
        flex-basis: 24px;
    }

    .header-search__toggle {
        position: static;
        display: inline-flex;
        width: 24px;
        min-width: 24px;
        height: 48px;
        padding: 0;
        align-items: center;
        justify-content: center;
        pointer-events: auto;
        opacity: 1;
    }

    .header-search__toggle svg {
        display: block;
        width: 24px;
        height: 23px;
    }

    .header-search__panel {
        position: absolute;
        inset: 0;
        flex-basis: auto;
        display: flex;
        width: 100%;
        max-width: none;
        height: 100%;
        padding-inline: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
        align-items: center;
        background-color: var(--color-background-01);
        transform: translateX(1rem);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

    .header-search.is-open .header-search__panel {
        width: 100%;
        max-width: none;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateX(0);
    }

    .header-search .search-form-container {
        display: flex;
        padding: 0;
        align-items: center;
        background-color: transparent;
    }

    .header-search .search-form-input {
        flex: 1 1 auto;
        width: auto;
        height: 48px;
        min-width: 0;
        margin-right: 0;
        padding-left: 3.25rem;
        opacity: 1;
        pointer-events: auto;
    }

    .header-search .search-form-button {
        font-size: clamp(0.75rem, 0.625rem + 0.625vw, 0.9375rem);
    }

    .header-search .search-form-container svg {
        left: 1.25rem;
        width: 18px;
        height: 16px;
        transform: translateY(-50%);
    }
}

/* ========== HEADER END ========= */

/* ========== DROPDOWN CLEAN THEME START ========= */

.header-navbar .dropdown-menu {
    --bs-dropdown-bg: var(--color-background-02);
    --bs-dropdown-border-color: var(--color-line);
    --bs-dropdown-border-radius: var(--radius-md);
    --bs-dropdown-link-color: #818181;
    --bs-dropdown-link-hover-color: var(--color-light);
    --bs-dropdown-link-hover-bg: rgba(255, 255, 255, 0.05);

    padding-block: var(--space-2);
    margin-top: 4px;

    background-color: var(--bs-dropdown-bg);
    border: var(--bootstrap-stroke-width) solid var(--bs-dropdown-border-color);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.header-navbar .dropdown-item {
    display: flex;
    align-items: center;
    padding: var(--space-2) var(--space-4);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-medium);
    color: var(--bs-dropdown-link-color);
    white-space: nowrap;
    transition: background-color var(--transition-duration-fast) var(--transition-timing),
        color var(--transition-duration-fast) var(--transition-timing);
}

.header-navbar .dropdown-menu .nav-item {
    display: block;
    min-height: 0;
}

.header-navbar .dropdown-menu .nav-item::before {
    display: none;
}

.header-navbar .dropdown-menu .nav-link {
    display: flex;
    align-items: center;
    min-height: 0;
    padding: var(--space-2) var(--space-4);
    color: var(--bs-dropdown-link-color) !important;
}

.header-more-accordion__toggle,
.mobile-menu-toggle {
    position: relative;
    width: 100%;
    padding-right: calc(var(--space-4) + 18px) !important;
    text-align: left;
}

.header-more-accordion__toggle::after,
.mobile-menu-toggle::after {
    content: "";
    position: absolute;
    top: 50%;
    right: var(--space-4);
    width: 10px;
    height: 6px;
    background-color: currentColor;
    transform: translateY(-50%) rotate(180deg);
    transition: transform var(--transition-duration-fast) var(--transition-timing);
    -webkit-mask: var(--bootstrap-chevron-mask) center / contain no-repeat;
    mask: var(--bootstrap-chevron-mask) center / contain no-repeat;
}

.header-more-accordion__toggle.collapsed::after,
.mobile-menu-toggle.collapsed::after {
    transform: translateY(-50%);
}

.header-more-accordion__menu {
    padding: 0 0 var(--space-1);
}

.header-navbar .header-more-accordion__link {
    padding-left: calc(var(--space-4) + var(--space-3));
    font-weight: var(--font-weight-medium);
}

.header-navbar .dropdown-item:hover,
.header-navbar .dropdown-item:focus,
.header-navbar .dropdown-item:active,
.header-navbar .dropdown-item.active,
.header-navbar .dropdown-menu .nav-link:hover,
.header-navbar .dropdown-menu .nav-link:focus,
.header-navbar .dropdown-menu .nav-link.active {
    background-color: var(--bs-dropdown-link-hover-bg) !important;
    color: var(--bs-dropdown-link-hover-color) !important;
}

.header-navbar .dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.header-navbar .dropdown-toggle::after {
    width: 10px;
    height: 6px;
    margin-left: 0;
    vertical-align: 0;
    background-color: currentColor;
    border: 0;
    -webkit-mask: var(--bootstrap-chevron-mask) center / contain no-repeat;
    mask: var(--bootstrap-chevron-mask) center / contain no-repeat;
    transition: transform var(--transition-duration-fast) var(--transition-timing);
}

.header-navbar .dropdown-toggle.show::after {
    transform: rotate(180deg);
}

.header-navbar .header-account__menu {
    --bs-dropdown-min-width: 14rem;
    --bs-dropdown-padding-x: 0;
    --bs-dropdown-padding-y: 1rem;
    --bs-dropdown-bg: var(--color-light);
    --bs-dropdown-border-color: transparent;
    --bs-dropdown-border-radius: var(--radius-md);
    --bs-dropdown-link-color: #686868;
    --bs-dropdown-link-hover-color: #1E2025;
    --bs-dropdown-link-hover-bg: rgba(181, 251, 2, 0.16);
    --bs-dropdown-link-active-color: #1E2025;
    --bs-dropdown-link-active-bg: #EDEDED;

    overflow: hidden;
    min-width: var(--bs-dropdown-min-width);
    padding: var(--bs-dropdown-padding-y) var(--bs-dropdown-padding-x);
    margin-top: 4px;
    background-color: var(--bs-dropdown-bg);
    border-color: var(--bs-dropdown-border-color);
    border-radius: var(--bs-dropdown-border-radius);
    box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.2);
}

.header-navbar .header-account__menu .dropdown-item {
    padding: 0.75rem 1.5rem;
    color: var(--bs-dropdown-link-color);
    font-size: 0.875rem;
    font-weight: var(--font-weight-medium);
    line-height: 1.5rem;
}

.header-navbar .header-account__menu .dropdown-item:hover,
.header-navbar .header-account__menu .dropdown-item:focus {
    background-color: var(--bs-dropdown-link-active-bg) !important;
    color: var(--bs-dropdown-link-hover-color) !important;
}

.header-navbar .header-account__menu .dropdown-item.active {
    background-color: var(--bs-dropdown-link-active-bg) !important;
    color: var(--bs-dropdown-link-active-color) !important;
}

.header-navbar .header-account__menu .dropdown-divider {
    margin: 1rem 1.5rem;
    border-top-color: #A8A8A8;
    opacity: 1;
}

.header-navbar .header-account__logout {
    color: #4E4E4E;
}

/* ========== DROPDOWN CLEAN THEME END ========= */

/* ========== MOBILE NAV START ========= */

.bottom-navbar {
    z-index: 1065;
    min-height: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom));
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0)),
        rgba(10, 12, 14, 0.72);
    border-top: 1px solid var(--color-line);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 -0.75rem 2rem rgba(0, 0, 0, 0.12);
    -webkit-backdrop-filter: blur(0.625rem) saturate(130%);
    backdrop-filter: blur(0.625rem) saturate(130%);
    padding-block: 0 env(safe-area-inset-bottom);
}

.bottom-navbar .container-fluid {
    padding-inline: var(--mobile-nav-padding-x);
}

.bottom-navbar .navbar-nav {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: center;
    justify-content: space-between !important;
}

.bottom-navbar .nav-item {
    display: flex;
    justify-content: center;
    width: 100%;
    min-width: 0;
}

.bottom-navbar__link {
    display: grid;
    width: 100%;
    margin-inline: auto;
    min-height: var(--mobile-nav-height);
    grid-template-rows: 16px 12px;
    align-content: center;
    justify-items: center;
    justify-content: center;
    row-gap: 4px;
    padding-block: 10px;
    color: #8A8A8A;
    font-size: 10px;
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    text-align: center;
    border: 0;
}

.bottom-navbar__link>span:not(.bottom-navbar__icon) {
    display: flex;
    height: 12px;
    align-items: flex-end;
    line-height: 1;
}

.bottom-navbar__icon {
    display: flex;
    width: 26px;
    height: 16px;
    align-items: center;
    justify-content: center;
}

.bottom-navbar__icon i,
.bottom-navbar__icon svg {
    line-height: 1;
}

.bottom-navbar__icon svg {
    display: block;
    width: 100%;
    height: 100%;
    flex-shrink: 0;
    color: currentColor;
    fill: currentColor;
}

.bottom-navbar__icon svg[fill="none"] {
    fill: none;
}

.bottom-navbar__icon svg [fill]:not([fill="none"]) {
    fill: currentColor;
}

.bottom-navbar__icon svg [stroke]:not([stroke="none"]) {
    stroke: currentColor;
}

.bottom-navbar__icon--software svg {
    width: 26px;
    height: 12px;
}

.bottom-navbar__icon--filters svg {
    width: 16px;
    height: 14px;
}

.bottom-navbar__icon--liked svg {
    width: 18px;
    height: 16px;
}

.bottom-navbar__icon--menu svg {
    width: 18px;
    height: 12px;
}

.bottom-navbar__icon--software i {
    font-size: 26px;
}

.bottom-navbar__icon--filters i {
    font-size: 16px;
}

.bottom-navbar__icon--liked i {
    font-size: 18px;
}

.bottom-navbar__icon--menu i {
    font-size: 18px;
}

.bottom-navbar .bottom-navbar__link:hover,
.bottom-navbar .bottom-navbar__link:focus,
.bottom-navbar .bottom-navbar__link.show,
.bottom-navbar .bottom-navbar__link.active,
.bottom-navbar .bottom-navbar__link[aria-expanded="true"] {
    color: var(--color-light);
}

.bottom-navbar__link:focus-visible {
    outline: 2px solid var(--color-brand);
    outline-offset: 0.25rem;
}

.mobile-nav-offcanvas {
    --bs-offcanvas-zindex: 1055;
    --bootstrap-chevron-mask: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.75 0.75L4.75 4.75L8.75 0.75' stroke='black' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    color: var(--color-light);
    background-color: var(--color-background-02);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.mobile-nav-offcanvas.open {
    visibility: visible;
    transform: none;
}

.offcanvas.offcanvas-bottom.mobile-nav-offcanvas {
    bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom));
    height: auto;
    max-height: calc(100vh - var(--mobile-nav-height) - env(safe-area-inset-bottom));
    border-top: 1px solid var(--color-line);
}

@media (max-width: 991.98px) {
    .bottom-navbar {
        z-index: 10020;
    }

    /* Filters open as a full-height side drawer (offcanvas-start, slides in from the
       left) rather than a bottom sheet. Top-anchored (top:0 from .offcanvas-start)
       so the header always sits at the top of the screen; its padding-top inset
       (.aside__header--mobile in main.css) clears the browser URL bar / notch.
       The body scrolls inside .aside__content-container. */
    .global-mobile-filters.mobile-nav-offcanvas {
        --bs-offcanvas-zindex: 10010;
        display: flex !important;
        flex-direction: column;
        width: 100%;
        max-width: 100%;
        /* Stretch from the top down to just above the bottom nav bar (which keeps
           a higher z-index and stays usable). top:0 comes from .offcanvas-start. */
        bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom));
        max-height: none;
        border-radius: 0;
        border-right: none;
    }

    .global-mobile-filters .aside__header--mobile {
        flex: 0 0 auto;
        /* The drawer is fixed at top:0, which already sits below the browser URL
           bar, so no extra inset is needed there. Keep only env(safe-area-inset-top)
           for the iOS notch / status bar (viewport-fit=cover) plus normal padding. */
        padding-top: calc(env(safe-area-inset-top) + 0.625rem);
        height: auto;
        min-height: 0;
        align-items: center;
    }

    .global-mobile-filters .aside__content-container {
        min-height: 0;
        flex: 1 1 auto;
    }

    body:has(.global-mobile-filters.mobile-nav-offcanvas.show) .offcanvas-backdrop {
        z-index: 10005;
    }

    .global-mobile-filters .aside__close-button--light {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: var(--color-light) !important;
        background: transparent !important;
        border: 0;
        opacity: 1 !important;
    }

    .global-mobile-filters .aside__close-button--light .aside__close-icon,
    .global-mobile-filters .aside__close-button--light .aside__close-icon path {
        fill: currentColor !important;
    }
}

.mobile-nav-offcanvas .offcanvas-header {
    padding-bottom: var(--space-2);
}

.mobile-menu-list {
    gap: var(--space-1);
}

.mobile-menu-list .nav-link {
    color: var(--color-gray-light-02);
    font-weight: var(--font-weight-semibold);
    border-radius: var(--radius-md);
}

.mobile-menu-list button.nav-link {
    border: 0;
    background: transparent;
    text-align: left;
}

.mobile-menu-submenu {
    padding-left: var(--space-3);
}

.mobile-menu-submenu .nav-link {
    font-weight: var(--font-weight-medium);
}

.mobile-menu-list .nav-link:hover,
.mobile-menu-list .nav-link:focus,
.mobile-menu-list .nav-link.active {
    color: var(--color-light);
    background-color: var(--color-secondary-gray-light);
}

.mobile-menu-empty {
    color: var(--color-gray-light-01);
}

/* ========== MOBILE NAV END ========= */

/* ========== FOOTER START ========= */

.site-footer {
    background-color: var(--color-top);
    border-top: var(--bootstrap-stroke-width) solid var(--color-line);
}

.site-footer__content {
    max-width: 31.25rem;
}

@media (min-width: 768px) {
    .site-footer__content {
        max-width: none;
    }

    .site-footer__content>.row {
        column-gap: 128px;
        justify-content: center;
    }

    .site-footer__content>.row>.col {
        width: auto;
        flex: 0 0 auto;
    }
}

.site-footer__title {
    margin-bottom: var(--space-4);
    color: var(--color-gray-05);
    font-size: 16px;
    font-weight: var(--font-weight-extra-bold);
    line-height: 1.5;
}

.site-footer__nav .nav-link {
    display: inline-flex;
    width: max-content;
    align-items: center;
    gap: var(--space-2);
    padding: 0;
    color: var(--color-light);
    font-size: 16px;
    font-weight: var(--font-weight-medium);
    line-height: 1.5;
    text-decoration: none;
}

.site-footer__nav .nav-link:hover,
.site-footer__nav .nav-link:focus {
    color: var(--color-brand);
}

.site-footer__social-icon {
    display: inline-flex;
    width: 1rem;
    height: 1rem;
    align-items: center;
    justify-content: center;
    color: var(--color-brand);
    font-size: 1rem;
    line-height: 1;
}

.site-footer__copyright {
    color: var(--color-gray-light-02);
    font-size: 14px;
    font-weight: var(--font-weight-bold);
    line-height: 1.4;
    text-align: center;
}

.site-footer__copyright-nowrap {
    display: inline-block;
    white-space: nowrap;
}

.site-footer__copyright-brand {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    white-space: nowrap;
}

.site-footer__copyright-brand img {
    position: absolute;
    top: 50%;
    left: 0;
    display: block;
    width: clamp(8px, calc(6.1px + 0.6vw), 12px);
    height: clamp(14px, calc(9.24px + 1.49vw), 24px);
    flex-shrink: 0;
    margin-top: 0;
    transform: translate(calc(-100% - var(--space-2)), -50%);
}

@media (max-width: 991.98px) {
    .site-footer {
        padding-bottom: calc(3rem + var(--mobile-nav-height) + env(safe-area-inset-bottom)) !important;
    }
}

@media (max-width: 575.98px) {
    .site-footer__bottom {
        align-items: center;
        text-align: center;
    }

    .site-footer__copyright {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        column-gap: var(--space-1);
        max-width: 100%;
    }

    .site-footer__copyright-brand {
        display: inline-flex;
        align-items: center;
        gap: var(--space-2);
    }

    .site-footer__copyright-brand img {
        position: static;
        flex-shrink: 0;
        width: 12px;
        height: 24px;
        margin-top: 0;
        transform: none;
    }

    .site-footer__content {
        max-width: none;
    }
}

/* ========== FOOTER END ========= */