@layer utilities {
    @media (width >= 80rem) {
        :where(html[data-demo='outdoor-store-1']) .container {
            max-width: var(--container-max);
        }
    }
}

@media (width >= 80rem) {
    html[data-demo='outdoor-store-1'] {
        --container-width: var(--container-max);
    }
}

html[data-demo='outdoor-store-1'] {
    --topbar-h: 32px;
}

@layer components {
    html[data-demo='outdoor-store-1'] {
        --custom-ink: var(--color-secondary-base);
        --custom-glass: color-mix(in oklab, var(--custom-ink) 52%, transparent);
        --custom-glass-line: #ffffff21;
        --custom-on-ink-soft: #ffffffad;

        & :is(h1, h2, h3, h4, h5, h6) {
            font-stretch: 125%;
        }
    }

    html[data-demo='outdoor-store-1'] .site-header {
        --menu-surface: oklch(from var(--custom-ink) calc(l + 0.03) c h);
        --menu-border: #ffffff14;
        --menu-title: #ffffff8c;
        --menu-text: color-mix(in oklab, var(--color-tertiary-base) 78%, transparent);
        --menu-hover-bg: #ffffff14;
        --menu-hover-text: #fff;

        &:before {
            background: color-mix(in oklab, var(--custom-ink) 26%, transparent);
        }

        &.scrolled:before,
        &:has(.nav-megamenu:is(:hover, :focus-within)):before {
            background: color-mix(in oklab, var(--custom-ink) 84%, transparent);
        }

        & .site-topbar {
            background: var(--color-primary);
            color: var(--color-on-primary);
            border-bottom: 0;
        }

        & .site-topbar-inner {
            padding-inline: var(--container-x);
            justify-content: space-between;
        }

        & .site-topbar-text,
        & .site-topbar-icon,
        & .site-topbar-meta-item,
        & .site-topbar-meta-item i {
            color: var(--color-on-primary);
            font-size: 0.875rem;
        }

        & .site-topbar-text {
            font-weight: 500;
        }

        & .site-topbar-meta {
            gap: 1.5rem;
        }

        & .site-topbar-meta-item {
            font-weight: 600;

            &:hover {
                color: var(--color-on-primary);
                text-underline-offset: 3px;
                text-decoration: underline;
            }
        }

        & .nav-links > li > .nav-link {
            font-size: 0.9375rem;
            font-weight: 500;
        }

        & .nav-search-toggle {
            border: 0;
            width: 2.75rem;
            height: 2.75rem;
            font-size: 1.25rem;

            &:hover,
            &[aria-expanded='true'] {
                color: #fff;
                background: #ffffff1f;
            }
        }

        & .nav-actions {
            gap: 0.25rem;
        }

        & .shop-actions {
            gap: 0.125rem;
        }

        & .shop-action {
            color: #fff;
            min-width: 2.75rem;
            height: 2.75rem;
            font-size: 1.375rem;

            &:hover,
            &[aria-expanded='true'] {
                color: #fff;
                background: #ffffff1f;
            }
        }

        & .shop-action-count {
            box-shadow: none;
            top: 0.25rem;
            left: 1.5rem;
        }
    }

    html[data-demo='outdoor-store-1'] .site-header .shop-action.custom-cart {
        border-radius: var(--radius-md);
        background: #ffffff1a;
        gap: 0.5rem;
        margin-left: 0.25rem;
        padding-inline: 0.75rem 0.5rem;

        &:hover,
        &[aria-expanded='true'] {
            background: #ffffff2e;
        }

        & .shop-action-count {
            border-radius: var(--radius-sm);
            min-width: 1.5rem;
            height: 1.5rem;
            padding-inline: 0.375rem;
            font-size: 0.8125rem;
            line-height: 1.5rem;
            position: static;
        }
    }

    html[data-demo='outdoor-store-1'] .custom-search {
        border: 1px solid var(--custom-glass-line);
        border-radius: var(--radius-md);
        background: #ffffff14;
        gap: 0.5rem;
        width: 15rem;
        height: 2.75rem;
        padding: 0 0.5rem 0 0.875rem;
        position: relative;

        &:focus-within {
            border-color: var(--color-primary);
            box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-primary) 35%, transparent);
            background: #00000059;
        }

        & input[type='search'] {
            color: #fff;
            padding: 0;
            font-size: 0.9375rem;

            &::placeholder {
                color: #ffffff9e;
            }
        }
    }

    .custom-search-icon {
        color: #ffffffb3;
        font-size: 1.125rem;
    }

    .custom-search-key {
        color: #ffffffbf;
        min-width: 1.5rem;
        height: 1.5rem;
        box-shadow: none;
        border-radius: var(--radius-sm);
        background: none;
        border: 1px solid #ffffff38;
        place-items: center;
        font-family: inherit;
        font-size: 0.8125rem;
        font-weight: 600;
        display: grid;
    }

    .custom-search:focus-within .custom-search-key {
        opacity: 0;
    }

    @media (width >= 1280px) {
        html[data-demo='outdoor-store-1'] .site-header .nav-search-toggle {
            display: none;
        }
    }

    @media (width <= 1279px) {
        html[data-demo='outdoor-store-1'] .site-header .nav-utility {
            display: none;
        }
    }

    @media (width >= 1440px) {
        html[data-demo='outdoor-store-1'] .custom-search {
            width: 17.5rem;
        }
    }

    @media (width >= 1024px) and (width <= 1279px) {
        html[data-demo='outdoor-store-1'] .site-header .nav-links > li > .nav-link {
            padding-inline: 0.5rem;
        }
    }

    @media (width <= 1023px) {
        html[data-demo='outdoor-store-1'] .site-header .shop-action--account {
            display: none;
        }
    }

    @media (width <= 479px) {
        html[data-demo='outdoor-store-1'] .site-header {
            & .site-topbar-text,
            & .shop-action--wishlist {
                display: none;
            }

            & .site-topbar-inner {
                justify-content: center;
            }
        }
    }

    html[data-demo='outdoor-store-1'] .custom-mega .megamenu-inner.custom-mega-inner {
        padding-block: 2rem 2.5rem;
        padding-inline: var(--container-x);
        gap: 2rem 1.5rem;
    }

    html[data-demo='outdoor-store-1'] .custom-mega .megamenu-item {
        font-size: 0.875rem;

        & > i {
            color: #ffffff8c;
            transition: color var(--duration-fast) var(--ease-out);
            font-size: 1.125rem;
        }

        &:hover > i {
            color: #fff;
        }
    }

    html[data-demo='outdoor-store-1'] .custom-mega .custom-mega-inner--activity {
        grid-template-columns: repeat(5, minmax(0, 1fr)) minmax(0, 1.3fr);
    }

    html[data-demo='outdoor-store-1'] .custom-mega .custom-mega-tile {
        aspect-ratio: 16 / 10;
        border-radius: var(--radius-lg);
        isolation: isolate;
        margin-bottom: 0.75rem;
        text-decoration: none;
        display: block;
        position: relative;
        overflow: hidden;

        & img {
            object-fit: cover;
            width: 100%;
            height: 100%;
            transition: filter var(--duration-fast) var(--ease-out);
        }

        &:after {
            content: '';
            background: linear-gradient(#0000, #0000009e);
            position: absolute;
            inset: 40% 0 0;
        }

        &:hover img {
            filter: brightness(1.12);
        }
    }

    html[data-demo='outdoor-store-1'] .custom-mega .megamenu-col-title.custom-mega-tile-name {
        z-index: 1;
        font-family: var(--font-heading);
        letter-spacing: 0;
        text-transform: none;
        color: #fff;
        padding: 0;
        font-size: 1.0625rem;
        font-weight: 800;
        font-stretch: 112%;
        position: absolute;
        bottom: 0.625rem;
        left: 0.875rem;
    }

    html[data-demo='outdoor-store-1'] .custom-mega .custom-guide {
        border: 1px solid var(--menu-border);
        border-radius: calc(var(--radius-lg) + 0.625rem);
        height: 100%;
        transition: background var(--duration-fast) var(--ease-out);
        background: #ffffff0d;
        flex-direction: column;
        gap: 1rem;
        padding: 0.625rem 0.625rem 1.25rem;
        text-decoration: none;
        display: flex;

        & img {
            aspect-ratio: 16 / 10;
            object-fit: cover;
            border-radius: var(--radius-lg);
            width: 100%;
        }

        &:hover {
            background: #ffffff17;
        }
    }

    .custom-guide-body {
        gap: 0.375rem;
        padding-inline: 0.5rem;
        display: grid;
    }

    .custom-guide-kicker {
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--menu-title);
        font-size: 0.75rem;
        font-weight: 600;
    }

    .custom-guide-title {
        font-family: var(--font-heading);
        color: #fff;
        font-size: 1.25rem;
        font-weight: 800;
        font-stretch: 112%;
        line-height: 1.15;
    }

    .custom-guide-link {
        color: oklch(from var(--color-primary) max(l, 0.72) c h);
        align-items: center;
        gap: 0.375rem;
        margin-top: 0.375rem;
        font-size: 0.875rem;
        font-weight: 600;
        display: inline-flex;
    }

    html[data-demo='outdoor-store-1'] .custom-mega .custom-mega-inner--edc {
        grid-template-columns: 14rem auto minmax(16rem, 1fr);
        gap: 3rem;
    }

    html[data-demo='outdoor-store-1'] .custom-mega .custom-warranty {
        border: 1px solid var(--menu-border);
        border-radius: var(--radius-xl);
        height: 100%;
        transition: background var(--duration-fast) var(--ease-out);
        background: #ffffff0d;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.625rem;
        padding: 1.75rem;
        text-decoration: none;
        display: flex;

        &:hover {
            background: #ffffff17;
        }

        & .custom-guide-link {
            margin-top: auto;
        }
    }

    .custom-warranty-icon {
        aspect-ratio: 1;
        width: 3rem;
        color: var(--color-on-primary);
        background: var(--color-primary);
        border-radius: var(--radius-md);
        place-items: center;
        margin-bottom: 0.5rem;
        font-size: 1.5rem;
        display: grid;
    }

    .custom-warranty-title {
        font-family: var(--font-heading);
        color: #fff;
        font-size: 1.375rem;
        font-weight: 800;
        font-stretch: 112%;
        line-height: 1.15;
    }

    .custom-warranty-text {
        max-width: 22rem;
        color: var(--menu-text);
        font-size: 0.9375rem;
        line-height: 1.55;
    }

    html[data-demo='outdoor-store-1'] .custom-mega .megamenu-item.custom-mega-all {
        color: #fff;
        margin-top: 0.5rem;
        font-weight: 600;

        & > i {
            color: inherit;
            font-size: 1rem;
        }
    }

    html[data-demo='outdoor-store-1'] .custom-mega .custom-mega-tools {
        grid-template-columns: repeat(3, minmax(0, 15rem));
        gap: 1.25rem;
        display: grid;
    }

    html[data-demo='outdoor-store-1'] .custom-tool {
        gap: 0.25rem;
        min-width: 0;
        text-decoration: none;
        display: grid;
    }

    .custom-tool-media {
        aspect-ratio: 4 / 3;
        border-radius: var(--radius-lg);
        transition: background var(--duration-fast) var(--ease-out);
        background: #ffffff0d;
        margin-bottom: 0.75rem;
        padding: 1.5rem;
        display: block;

        & img {
            object-fit: contain;
            width: 100%;
            height: 100%;
        }
    }

    .custom-tool:hover .custom-tool-media {
        background: #ffffff1a;
    }

    .custom-tool-name {
        color: #fff;
        font-size: 0.9375rem;
        font-weight: 600;
    }

    .custom-tool-meta {
        color: var(--menu-title);
        font-size: 0.875rem;
    }

    .custom-tool-price {
        color: #fff;
        font-variant-numeric: tabular-nums;
        margin-top: 0.25rem;
        font-size: 0.9375rem;
        font-weight: 700;
    }

    html[data-demo='outdoor-store-1'] .site-search {
        & .site-search-inner {
            background: var(--custom-ink);
            color: #fff;
        }

        & .site-panel-close {
            color: #fff;
            border-color: #fff3;
        }

        & .site-search-input {
            color: #fff;
            border-bottom-color: #ffffff40;

            &::placeholder {
                color: #ffffff8c;
            }

            &:focus {
                border-bottom-color: var(--color-primary);
            }
        }

        & .site-search-submit {
            color: #ffffffb3;
        }

        & .site-search-suggest-label {
            color: var(--custom-on-ink-soft);
        }

        & .site-search-tag {
            color: #fff;
            border-color: #fff3;

            &:hover {
                color: var(--color-on-primary);
                background: var(--color-primary);
                border-color: var(--color-primary);
            }
        }
    }

    .custom-picks {
        text-align: left;
        max-width: 44rem;
        margin: 2.5rem auto 0;
    }

    .custom-picks-title {
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--custom-on-ink-soft);
        margin: 0 0 0.75rem;
        font-size: 0.75rem;
        font-weight: 600;
    }

    .custom-picks-list {
        gap: 0.5rem;
        margin: 0;
        padding: 0;
        list-style: none;
        display: grid;
    }

    .custom-pick {
        color: #fff;
        border-radius: calc(var(--radius-md) + 0.5rem);
        transition: background var(--duration-fast) var(--ease-out);
        align-items: center;
        gap: 1rem;
        padding: 0.5rem;
        text-decoration: none;
        display: flex;

        & img {
            border-radius: var(--radius-md);
            background: #ffffff0f;
            width: 3.5rem;
            height: 3.5rem;
            padding: 0.25rem;
        }

        & span {
            color: var(--custom-on-ink-soft);
            font-size: 0.875rem;
            display: grid;
        }

        & strong {
            color: #fff;
            font-size: 0.9375rem;
            font-weight: 600;
        }

        &:hover {
            background: #ffffff12;
        }
    }

    .custom-hero {
        color: #fff;
        background: var(--custom-ink);
        isolation: isolate;
        align-items: flex-end;
        height: max(100svh, 45rem);
        display: flex;
        position: relative;
        overflow: clip;
        container-type: size;

        &:before {
            content: '';
            z-index: 1;
            background: linear-gradient(
                color-mix(in oklab, var(--custom-ink) 62%, transparent),
                transparent
            );
            pointer-events: none;
            height: 16rem;
            position: absolute;
            inset: 0 0 auto;
        }
    }

    .custom-hero-stage {
        z-index: 0;
        aspect-ratio: 16 / 9;
        width: max(100cqw, 177.78cqh);
        position: absolute;
        bottom: 0;
        left: 50%;
        translate: -50%;
        container-type: inline-size;

        &:before {
            content: '';
            z-index: 1;
            background: color-mix(in oklab, var(--custom-ink) 18%, transparent);
            position: absolute;
            inset: 0;
        }
    }

    .custom-hero-sky,
    .custom-hero-ridge {
        object-fit: cover;
        width: 100%;
        height: 100%;
        transform: translate3d(
                calc(var(--custom-px, 0) * var(--custom-depth)),
                calc(var(--custom-py, 0) * var(--custom-depth) * 0.4),
                0
            )
            scale(1.03);
        position: absolute;
        inset: 0;
    }

    .custom-hero-sky {
        --custom-depth: -4px;
    }

    .custom-hero-ridge {
        --custom-depth: -12px;
        z-index: 3;
    }

    .custom-hero-mist {
        z-index: 1;
        mix-blend-mode: screen;
        opacity: 0.5;
        pointer-events: none;
        width: 200%;
        height: 22%;
        transform: translate3d(calc(var(--custom-px, 0) * -7px), 0, 0);
        background-color: #0000;
        background-image:
            radial-gradient(34% 26% at 14% 62%, #ffe8cc6b, #0000 72%),
            radial-gradient(28% 20% at 40% 46%, #ffeeda4d, #0000 72%),
            radial-gradient(38% 24% at 66% 64%, #ffe2c461, #0000 72%),
            radial-gradient(26% 18% at 90%, #ffeeda47, #0000 72%);
        background-position:
            0 0,
            0 0,
            0 0,
            0 0;
        background-repeat: repeat, repeat, repeat, repeat;
        background-size: 50% 100%;
        background-attachment: scroll, scroll, scroll, scroll;
        background-origin: padding-box, padding-box, padding-box, padding-box;
        background-clip: border-box, border-box, border-box, border-box;
        position: absolute;
        top: 47%;
        left: 0;
    }

    .custom-hero-bloom {
        z-index: 2;
        mix-blend-mode: screen;
        pointer-events: none;
        background:
            radial-gradient(circle at 86% 44.5%, #ffd69c8c, #0000 9%),
            radial-gradient(46% 34% at 86% 44.5%, #ffb27052, #0000 72%);
        position: absolute;
        inset: 0;
    }

    .custom-hero-title.custom-hero-title {
        z-index: 2;
        letter-spacing: -0.015em;
        text-align: center;
        text-transform: uppercase;
        color: #fff;
        text-shadow: 0 0.04em 0.6em #0000002e;
        transform: translate3d(
            calc(var(--custom-px, 0) * -8px),
            calc(var(--custom-py, 0) * -3px),
            0
        );
        margin: 0;
        font-size: min(8.2cqi, 10.5vw);
        font-weight: 800;
        font-stretch: 125%;
        line-height: 0.9;
        position: absolute;
        inset: 41% 0 auto;
    }

    .custom-hero-line {
        display: block;
    }

    .custom-hero-foot {
        z-index: 4;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            'intro spec'
            'acts acts';
        align-items: end;
        gap: 1.75rem 2rem;
        padding-bottom: 2rem;
        display: grid;
        position: relative;
    }

    .custom-hero-intro {
        flex-wrap: wrap;
        grid-area: intro;
        align-items: center;
        gap: 1.5rem 2.5rem;
        display: flex;
    }

    .custom-hero-lead {
        color: #ffffffd1;
        max-width: 26rem;
        margin: 0;
        font-size: 1.125rem;
        line-height: 1.55;
    }

    .custom-spec {
        color: #fff;
        background: var(--custom-glass);
        border: 1px solid var(--custom-glass-line);
        border-radius: calc(var(--radius-lg) + 0.5rem);
        -webkit-backdrop-filter: blur(16px) saturate(140%);
        backdrop-filter: blur(16px) saturate(140%);
        transition: background var(--duration-fast) var(--ease-out);
        grid-area: spec;
        align-items: center;
        gap: 1.125rem;
        padding: 0.5rem 1.5rem 0.5rem 0.5rem;
        text-decoration: none;
        display: flex;

        &:hover {
            background: color-mix(in oklab, var(--custom-ink) 72%, transparent);
        }
    }

    .custom-spec-img {
        aspect-ratio: 1;
        object-fit: contain;
        border-radius: var(--radius-lg);
        background: #ffffff12;
        width: 5rem;
        padding: 0.5rem;
    }

    .custom-spec-body {
        gap: 0.125rem;
        display: grid;
    }

    .custom-spec-kicker {
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--custom-on-ink-soft);
        align-items: center;
        gap: 0.5rem;
        font-size: 0.75rem;
        font-weight: 600;
        display: inline-flex;

        &:before {
            content: '';
            aspect-ratio: 1;
            background: var(--color-accent);
            border-radius: var(--radius-full);
            width: 0.4375rem;
        }
    }

    .custom-spec-name {
        font-family: var(--font-heading);
        font-size: 1.125rem;
        font-weight: 800;
        font-stretch: 112%;
    }

    .custom-spec-meta {
        color: var(--custom-on-ink-soft);
        font-variant-numeric: tabular-nums;
        font-size: 0.875rem;

        & strong {
            color: #fff;
            font-weight: 700;
        }
    }

    .custom-acts {
        grid-area: acts;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 0.75rem;
        display: grid;
    }

    .custom-act {
        color: #fff;
        background: var(--custom-glass);
        border: 1px solid var(--custom-glass-line);
        border-radius: calc(var(--radius-md) + 0.75rem);
        -webkit-backdrop-filter: blur(16px) saturate(140%);
        backdrop-filter: blur(16px) saturate(140%);
        min-width: 0;
        transition:
            background var(--duration-fast) var(--ease-out),
            border-color var(--duration-fast) var(--ease-out);
        align-items: center;
        gap: 0.875rem;
        padding: 0.75rem 1.125rem 0.75rem 0.75rem;
        text-decoration: none;
        display: flex;

        &:hover {
            background: color-mix(in oklab, var(--custom-ink) 76%, transparent);
            border-color: #ffffff3d;
        }
    }

    .custom-act-icon {
        aspect-ratio: 1;
        border-radius: var(--radius-md);
        width: 3rem;
        transition:
            background var(--duration-fast) var(--ease-out),
            color var(--duration-fast) var(--ease-out);
        background: #ffffff14;
        flex: none;
        place-items: center;
        font-size: 1.5rem;
        display: grid;
    }

    .custom-act:hover .custom-act-icon {
        color: var(--color-on-primary);
        background: var(--color-primary);
    }

    .custom-act-text {
        flex: 1;
        min-width: 0;
        display: grid;
    }

    .custom-act-name {
        white-space: nowrap;
        text-overflow: ellipsis;
        font-size: 1rem;
        font-weight: 600;
        overflow: hidden;
    }

    .custom-act-count {
        color: var(--custom-on-ink-soft);
        font-variant-numeric: tabular-nums;
        font-size: 0.875rem;
    }

    .custom-act-arrow {
        color: var(--custom-on-ink-soft);
        transition:
            color var(--duration-fast) var(--ease-out),
            translate var(--duration-fast) var(--ease-out);
        flex: none;
        font-size: 1.125rem;
    }

    .custom-act:hover .custom-act-arrow {
        color: #fff;
        translate: 0.1875rem;
    }

    @media (prefers-reduced-motion: no-preference) {
        .custom-hero-line {
            animation: custom-rise 1.8s var(--ease-out) both;
        }

        .custom-hero-line + .custom-hero-line {
            animation-delay: 0.12s;
        }

        .custom-hero-intro,
        .custom-spec,
        .custom-act {
            animation: custom-fade-up 0.9s var(--ease-out) 0.45s both;
        }

        .custom-spec {
            animation-delay: 0.55s;
        }

        .custom-act:nth-child(2) {
            animation-delay: 0.5s;
        }

        .custom-act:nth-child(3) {
            animation-delay: 0.55s;
        }

        .custom-act:nth-child(4) {
            animation-delay: 0.6s;
        }

        .custom-act:nth-child(5) {
            animation-delay: 0.65s;
        }

        .custom-hero-mist {
            animation: 90s linear infinite custom-drift;
        }

        .custom-hero-bloom {
            animation: 9s ease-in-out infinite alternate custom-breathe;
        }

        @supports (animation-timeline: scroll()) {
            .custom-hero-sky,
            .custom-hero-title.custom-hero-title {
                animation: linear both custom-sink;
                animation-timeline: scroll(root);
                animation-range: 0 100svh;
            }

            .custom-hero-title.custom-hero-title {
                --custom-sink: 1.75rem;
            }
        }
    }

    @keyframes custom-rise {
        from {
            opacity: 0;
            transform: translateY(45%);
        }
    }

    @keyframes custom-fade-up {
        from {
            opacity: 0;
            transform: translateY(1rem);
        }
    }

    @keyframes custom-drift {
        to {
            translate: -50%;
        }
    }

    @keyframes custom-breathe {
        from {
            opacity: 0.8;
        }

        to {
            opacity: 1;
        }
    }

    @keyframes custom-sink {
        to {
            translate: 0 var(--custom-sink, 2.5rem);
        }
    }

    @media (width <= 1439px) {
        .custom-hero-foot {
            grid-template-areas:
                'intro intro'
                'acts acts';
        }

        .custom-spec {
            display: none;
        }
    }

    @media (width <= 1279px) {
        .custom-act {
            gap: 0.625rem;
            padding-right: 0.75rem;
        }

        .custom-act-icon {
            width: 2.5rem;
            font-size: 1.25rem;
        }
    }

    @media (width <= 1023px) {
        .custom-acts {
            margin-inline: calc(var(--container-x) * -1);
            padding-inline: var(--container-x);
            scroll-snap-type: x mandatory;
            scroll-padding-inline: var(--container-x);
            scrollbar-width: none;
            gap: 0.625rem;
            display: flex;
            overflow-x: auto;

            &::-webkit-scrollbar {
                display: none;
            }
        }

        .custom-act {
            scroll-snap-align: start;
            flex: none;
            width: 13.5rem;
        }
    }

    @media (width <= 767px) {
        .custom-hero {
            height: auto;
            min-height: max(100svh, 40rem);
            container-type: normal;
        }

        .custom-hero-sky,
        .custom-hero-ridge {
            transform: none;
        }

        .custom-hero-stage {
            width: auto;
            height: max(30rem, 100svh - 9rem);
            top: 0;
            bottom: auto;

            &:after {
                content: '';
                z-index: 4;
                background: linear-gradient(transparent, var(--custom-ink));
                height: 6rem;
                position: absolute;
                inset: auto 0 0;
            }
        }

        .custom-hero-title.custom-hero-title {
            font-size: 14vw;
            font-stretch: 100%;
            line-height: 0.9;
            inset: 52.5% 0 auto;
        }

        .custom-hero-foot {
            gap: 1.75rem;
        }

        .custom-hero-intro {
            gap: 1.25rem 0.75rem;
        }

        .custom-hero-intro .btn {
            flex: 1 1 0;
            padding-inline: 1rem;
        }

        .custom-hero-lead {
            font-size: 1rem;
        }
    }

    html[data-demo='outdoor-store-1'] {
        --product-bg: color-mix(in oklab, var(--color-bg) 30%, #fff);
    }

    .custom-band {
        background: var(--color-bg-soft);
    }

    .custom-dark {
        color: #ffffffbf;
        background: var(--custom-ink);
        position: relative;

        &:before {
            content: '';
            z-index: -1;
            background: radial-gradient(
                ellipse 34% 70% at 100% 40%,
                color-mix(in oklab, var(--color-primary) 16%, transparent),
                transparent 70%
            );
            pointer-events: none;
            position: absolute;
            inset: 0;
        }
    }

    .custom-eyebrow-light {
        color: oklch(from var(--color-primary) max(l, 0.74) c h);
    }

    .custom-more {
        color: var(--color-text);
        transition: color var(--duration-fast) var(--ease-out);
        border-bottom: 1px solid;
        align-items: center;
        gap: 0.5rem;
        padding-block: 0.25rem;
        font-weight: 600;
        text-decoration: none;
        display: inline-flex;

        & i {
            transition: translate var(--duration-fast) var(--ease-out);
        }

        &:hover {
            color: var(--color-primary-ink);
        }

        &:hover i {
            translate: 0.1875rem;
        }
    }

    .custom-cats {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 1.25rem;
        margin: 0;
        padding: 0;
        list-style: none;
        display: grid;
    }

    .custom-cat {
        color: var(--color-text);
        text-decoration: none;
        display: grid;
    }

    .custom-cat-well {
        aspect-ratio: 1;
        background: var(--product-bg);
        border-radius: var(--radius-lg);
        isolation: isolate;
        transition: background var(--duration-fast) var(--ease-out);
        place-items: center;
        margin-bottom: 1.125rem;
        padding: 16%;
        display: grid;
        position: relative;

        &:before {
            content: '';
            z-index: -1;
            background: radial-gradient(
                closest-side,
                color-mix(in oklab, var(--custom-ink) 13%, transparent),
                transparent
            );
            height: 12%;
            position: absolute;
            inset: auto 16% 13%;
        }

        & img {
            object-fit: contain;
            width: 100%;
            height: 100%;
        }
    }

    .custom-cat-no {
        color: var(--color-text-muted);
        font-variant-numeric: tabular-nums;
        font-size: 0.8125rem;
        font-weight: 600;
        position: absolute;
        top: 0.875rem;
        left: 1rem;
    }

    .custom-cat-go {
        aspect-ratio: 1;
        width: 2.25rem;
        color: var(--color-text);
        background: var(--color-bg);
        border-radius: var(--radius-md);
        transition:
            background var(--duration-fast) var(--ease-out),
            color var(--duration-fast) var(--ease-out);
        place-items: center;
        font-size: 1rem;
        display: grid;
        position: absolute;
        top: 0.5rem;
        right: 0.5rem;
    }

    .custom-cat:hover {
        & .custom-cat-well {
            background: color-mix(in oklab, var(--product-bg), var(--color-tertiary-base) 55%);
        }

        & .custom-cat-go {
            color: var(--color-on-primary);
            background: var(--color-primary);
        }
    }

    .custom-cat-name {
        font-family: var(--font-heading);
        font-size: 1.125rem;
        font-weight: 800;
        font-stretch: 112%;
        line-height: 1.2;
    }

    .custom-cat-count {
        color: var(--color-text-muted);
        font-variant-numeric: tabular-nums;
        margin-top: 0.125rem;
        font-size: 0.9375rem;
    }

    @media (width <= 1023px) {
        .custom-cats {
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 2rem 1rem;
        }
    }

    @media (width <= 639px) {
        .custom-cats {
            margin-inline: calc(var(--container-x) * -1);
            padding-inline: var(--container-x);
            scroll-snap-type: x mandatory;
            scroll-padding-inline: var(--container-x);
            scrollbar-width: none;
            gap: 0.75rem;
            display: flex;
            overflow-x: auto;

            &::-webkit-scrollbar {
                display: none;
            }

            & > li {
                scroll-snap-align: start;
                flex: none;
                width: 9.5rem;
            }
        }
    }

    html[data-demo='outdoor-store-1'] .custom-card {
        & .product-card-img {
            object-fit: contain;
            width: 82%;
            height: 82%;
            inset: 9%;
        }

        & .product-card-title {
            font-family: var(--font-sans);
            font-size: 1.0625rem;
            font-weight: 600;
            font-stretch: 100%;
        }

        & .product-card-body {
            flex: 1;
        }

        & .product-card-cta {
            margin-top: auto;
        }

        & .product-price:has(+ .product-card-cta) {
            margin-bottom: 0.875rem;
        }
    }

    html[data-demo='outdoor-store-1'] #os1-best .tabs-nav {
        background: var(--color-bg);
    }

    .custom-repair-media {
        position: relative;

        & img {
            aspect-ratio: 5 / 4;
            object-fit: cover;
            border-radius: var(--radius-xl);
            width: 100%;
        }
    }

    .custom-ticket {
        color: #fff;
        background: color-mix(in oklab, var(--custom-ink) 64%, transparent);
        border: 1px solid var(--custom-glass-line);
        border-radius: var(--radius-lg);
        -webkit-backdrop-filter: blur(14px) saturate(140%);
        backdrop-filter: blur(14px) saturate(140%);
        gap: 0.25rem;
        width: min(21rem, 100% - 2.5rem);
        padding: 1rem 1.25rem 1.125rem;
        display: grid;
        position: absolute;
        bottom: 1.25rem;
        left: 1.25rem;
    }

    .custom-ticket-head {
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--custom-on-ink-soft);
        border-bottom: 1px dashed #ffffff38;
        justify-content: space-between;
        margin-bottom: 0.375rem;
        padding-bottom: 0.625rem;
        font-size: 0.75rem;
        font-weight: 600;
        display: flex;
    }

    .custom-ticket-name {
        font-family: var(--font-heading);
        font-size: 1.125rem;
        font-weight: 800;
        font-stretch: 112%;
    }

    .custom-ticket-line {
        color: var(--custom-on-ink-soft);
        font-size: 0.9375rem;
    }

    .custom-ticket-foot {
        color: oklch(from var(--color-accent) max(l, 0.8) c h);
        align-items: center;
        gap: 0.375rem;
        margin-top: 0.375rem;
        font-size: 0.875rem;
        font-weight: 600;
        display: inline-flex;
    }

    .custom-figures {
        border-top: 1px solid #ffffff24;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        margin-block-end: 0;
        display: grid;

        & > div {
            flex-direction: column-reverse;
            justify-content: flex-end;
            gap: 0.25rem;
            padding-top: 1.25rem;
            display: flex;
        }

        & > div + div {
            border-left: 1px solid #ffffff24;
            padding-left: 1.5rem;
        }

        & dt {
            color: var(--custom-on-ink-soft);
            font-size: 0.9375rem;
        }

        & dd {
            font-family: var(--font-heading);
            color: #fff;
            font-variant-numeric: tabular-nums;
            margin: 0;
            font-size: clamp(1.75rem, 1.3rem + 1.2vw, 2.5rem);
            font-weight: 800;
            font-stretch: 125%;
            line-height: 1.05;
        }
    }

    @media (width <= 479px) {
        .custom-figures > div + div {
            padding-left: 1rem;
        }

        .custom-figures dt {
            font-size: 0.875rem;
        }

        .custom-figures dd {
            white-space: nowrap;
            font-size: 1.5rem;
        }
    }

    html[data-demo='outdoor-store-1'] .products.custom-field {
        gap: 2rem 1rem;
    }

    html[data-demo='outdoor-store-1'] .custom-field-card .product-card-media {
        aspect-ratio: 3 / 4;
    }

    html[data-demo='outdoor-store-1'] .product-card--shade {
        --custom-fade: color-mix(in oklab, var(--custom-ink) 86%, var(--color-primary));
    }

    @media (hover: hover) and (width >= 768px) {
        html[data-demo='outdoor-store-1'] :not(.products--list) > .product-card--shade {
            & .product-card-media:after {
                background: linear-gradient(
                    to top,
                    color-mix(in oklab, var(--custom-fade) 88%, transparent),
                    color-mix(in oklab, var(--custom-fade) 46%, transparent) 30%,
                    transparent 58%
                );
                opacity: 1;
            }

            & .product-card-link:after {
                content: '';
                background: linear-gradient(
                    to top,
                    color-mix(in oklab, var(--custom-fade) 70%, transparent),
                    color-mix(in oklab, var(--custom-fade) 30%, transparent) 45%,
                    transparent 75%
                );
                opacity: 0;
                transition: opacity 0.4s var(--ease-out);
                position: absolute;
                inset: 0;
            }

            &:is(:hover, :focus-within) .product-card-link:after {
                opacity: 1;
            }

            & .product-card-body {
                text-align: start;
                opacity: 1;
                transition: translate 0.45s var(--ease-out);
                justify-content: flex-end;
                align-items: flex-start;
                gap: 0.3125rem;
                padding: 1.25rem;
                inset: auto 0 0;
            }

            & .product-card-body > * {
                translate: none;
            }

            & .product-card-meta {
                flex-direction: row;
            }

            & :is(.product-card-cat, .product-rating) {
                color: #fffc;
            }

            & .product-card-title {
                font-size: 1.125rem;
                line-height: 1.3;
            }

            & .product-price {
                justify-content: flex-start;
                font-size: 1.0625rem;
            }

            & .product-card-cta {
                display: none;
            }

            & .product-card-actions {
                justify-content: flex-start;
                inset: auto 1.25rem 1.25rem;
            }

            &:is(:hover, :focus-within) .product-card-body {
                translate: 0 -3.75rem;
            }

            @container product-media (width >= 18rem) {
                & .product-action--primary {
                    width: auto;
                    padding-inline: 1.125rem 1.375rem;
                }

                & .product-action--primary .product-action-label {
                    display: inline;
                }

                & .product-action--primary:before,
                & .product-action--primary:after {
                    display: none;
                }
            }
        }

        html[data-demo='outdoor-store-1']
            :where(:not(.products--list) > .custom-card--photo)
            .product-card-media {
            aspect-ratio: 3 / 4;
            flex: 1 0 auto;
        }

        html[data-demo='outdoor-store-1'] :not(.products--list) > .custom-card--photo {
            container: custom-photo / inline-size;

            @container custom-photo (width >= 18rem) {
                & .product-card-body {
                    padding: 2rem;
                }

                & .product-card-title {
                    font-size: clamp(1.375rem, 0.95rem + 0.75vw, 1.875rem);
                    line-height: 1.2;
                }

                & .product-card-actions {
                    inset-inline: 2rem;
                    bottom: 2rem;
                }
            }
        }
    }

    @media (hover: none), (width <= 767px) {
        html[data-demo='outdoor-store-1'] .custom-card--photo .product-action--primary {
            display: none;
        }
    }

    .custom-board {
        color: #fff;
        background: var(--custom-ink);
        border-radius: calc(var(--radius-md) + 1.25rem);
        padding: 1.25rem;
    }

    .custom-board-head {
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--custom-on-ink-soft);
        justify-content: space-between;
        gap: 1rem;
        margin: 0 0 1rem;
        padding: 0.25rem 0.25rem 0;
        font-size: 0.8125rem;
        font-weight: 600;
        display: flex;
    }

    .custom-board-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.625rem;
        margin: 0;
        padding: 0;
        list-style: none;
        display: grid;

        & li {
            aspect-ratio: 1;
            background: var(--product-bg);
            border-radius: var(--radius-md);
            padding: 13%;
            position: relative;
        }

        & li:first-child {
            aspect-ratio: auto;
            grid-row: span 2;
            padding: 6%;
        }

        & img {
            object-fit: contain;
            width: 100%;
            height: 100%;
            transition:
                opacity 0.4s var(--ease-out),
                filter 0.4s var(--ease-out);
        }

        & li.is-out img {
            opacity: 0.22;
            filter: grayscale();
        }

        & span {
            color: var(--color-text-muted);
            font-variant-numeric: tabular-nums;
            font-size: 0.75rem;
            font-weight: 600;
            position: absolute;
            top: 0.5rem;
            left: 0.625rem;
        }
    }

    .custom-kit-list {
        border: 0;
        border-top: 1px solid var(--color-border);
        min-width: 0;
        margin: 0;
        padding: 0;
    }

    .custom-kit-row {
        border-bottom: 1px solid var(--color-border);
        cursor: pointer;
        grid-template-columns: auto auto minmax(0, 1fr) auto;
        align-items: center;
        gap: 0.875rem;
        padding-block: 0.6875rem;
        display: grid;

        &:has(:not(:checked)) :is(.custom-kit-name, .custom-kit-price) {
            color: var(--color-text-muted);
        }
    }

    .custom-kit-no {
        color: var(--color-text-muted);
        font-variant-numeric: tabular-nums;
        font-size: 0.8125rem;
        font-weight: 600;
    }

    .custom-kit-name {
        transition: color var(--duration-fast) var(--ease-out);
        flex-wrap: wrap;
        align-items: baseline;
        gap: 0 0.625rem;
        font-weight: 600;
        display: flex;

        & span {
            color: var(--color-text-muted);
            font-size: 0.875rem;
            font-weight: 400;
        }
    }

    .custom-kit-price {
        font-variant-numeric: tabular-nums;
        font-weight: 700;
    }

    .custom-kit-total {
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: flex-end;
        gap: 1.25rem 2rem;
        margin-top: 1.75rem;
        display: flex;
    }

    .custom-kit-was {
        color: var(--color-text-muted);
        margin-right: 0.5rem;
        font-size: 1.0625rem;
    }

    .custom-kit-now {
        font-family: var(--font-heading);
        font-size: 2rem;
        font-weight: 800;
        font-stretch: 112%;
        line-height: 1.1;
    }

    html[data-demo='outdoor-store-1'] .products.custom-new {
        --cols: 6;
        border-left: 0;
    }

    .custom-new-lead {
        border-right: 1px solid var(--color-border);
        border-bottom: 1px solid var(--color-border);
        flex-direction: column;
        align-items: flex-start;
        padding: 1.75rem 2rem 1.75rem 0;
        display: flex;
    }

    .custom-new-count {
        font-family: var(--font-heading);
        color: var(--color-border);
        font-variant-numeric: tabular-nums;
        margin-block: auto 1rem;
        padding-top: 1.5rem;
        font-size: 4.5rem;
        font-weight: 800;
        font-stretch: 125%;
        line-height: 1;
    }

    @media (width <= 1279px) {
        html[data-demo='outdoor-store-1'] .products.custom-new {
            --cols: 3;
        }
    }

    @media (width <= 1023px) {
        html[data-demo='outdoor-store-1'] .products.custom-new {
            border-left: 1px solid var(--color-border);
        }

        .custom-new-lead {
            grid-column: 1 / -1;
            padding: 1.5rem 1.25rem;
        }

        .custom-new-count {
            display: none;
        }

        .custom-new-lead .custom-more {
            margin-top: 1.25rem;
        }
    }

    .custom-guide-card {
        flex-direction: column;
        gap: 1.5rem;
        display: flex;
    }

    .custom-guide-photo {
        border-radius: var(--radius-lg);
        display: block;
        overflow: hidden;

        & img {
            aspect-ratio: 16 / 10;
            object-fit: cover;
            width: 100%;
        }
    }

    .custom-guide-card--side {
        flex-direction: row;
        align-items: center;

        & .custom-guide-photo {
            flex: none;
            align-self: stretch;
            width: 48%;
        }

        & .custom-guide-photo img {
            aspect-ratio: auto;
            height: 100%;
            min-height: 12rem;
        }
    }

    .custom-guide-meta {
        color: var(--color-primary-ink);
        flex-wrap: wrap;
        gap: 0.25rem 1rem;
        margin: 0 0 0.625rem;
        font-size: 0.875rem;
        font-weight: 600;
        display: flex;

        & span + span {
            color: var(--color-text-muted);
            font-weight: 500;
        }
    }

    .custom-guide-name {
        margin: 0 0 0.75rem;
        font-size: 1.375rem;
        font-stretch: 112%;
        line-height: 1.15;

        & a {
            color: inherit;
            transition: color var(--duration-fast) var(--ease-out);
            text-decoration: none;
        }

        & a:hover {
            color: var(--color-primary-ink);
        }
    }

    .custom-guide-card--lead .custom-guide-name {
        font-size: clamp(1.5rem, 1.2rem + 0.9vw, 2rem);
    }

    .custom-guide-card--side .custom-guide-name {
        font-size: 1.25rem;
    }

    @media (width <= 639px) {
        .custom-guide-card--side {
            flex-direction: column;
            align-items: stretch;
            gap: 1.25rem;
        }

        .custom-guide-card--side .custom-guide-photo {
            width: auto;
        }
    }

    .custom-store {
        min-height: clamp(36rem, 44vw, 46rem);
        padding-block: var(--section-space);
        background: var(--custom-ink);
        isolation: isolate;
        align-items: center;
        display: flex;
        position: relative;
        overflow: clip;
    }

    .custom-store-photo {
        z-index: -1;
        object-fit: cover;
        width: 100%;
        height: 100%;
        position: absolute;
        inset: 0;
    }

    .custom-visit {
        background: var(--color-bg);
        border-radius: var(--radius-xl);
        max-width: 31rem;
        padding: 2.25rem;
        box-shadow: 0 30px 60px -30px #00000059;
    }

    .custom-visit-list {
        gap: 0.875rem;
        margin: 0;
        padding: 0;
        list-style: none;
        display: grid;

        & li {
            align-items: center;
            gap: 0.875rem;
            display: flex;
        }

        & i {
            aspect-ratio: 1;
            background: var(--color-bg-soft);
            border-radius: var(--radius-md);
            flex: none;
            place-items: center;
            width: 2.5rem;
            font-size: 1.25rem;
            display: grid;
        }

        & span {
            color: var(--color-text-soft);
            font-size: 0.9375rem;
            line-height: 1.4;
            display: grid;
        }

        & strong {
            color: var(--color-text);
            font-size: 1rem;
            font-weight: 600;
        }
    }

    @media (width <= 767px) {
        .custom-store {
            min-height: 0;
            padding-block: 0 var(--section-space);
            background: var(--color-bg-soft);
            display: block;
        }

        .custom-store-photo {
            aspect-ratio: 4 / 3;
            height: auto;
            position: static;
        }

        .custom-visit {
            max-width: none;
            margin-top: -3rem;
            padding: 1.75rem 1.5rem;
        }
    }

    html[data-demo='outdoor-store-1'] .custom-footer {
        --footer-bg: var(--custom-ink);
        --footer-y: var(--section-space);
    }

    .custom-promises {
        border-bottom: 1px solid var(--footer-rule);
        grid-template-columns: repeat(3, minmax(0, 1fr));
        margin: 0 0 4rem;
        padding: 0;
        list-style: none;
        display: grid;
    }

    .custom-promise {
        height: 100%;
        color: var(--footer-body);
        gap: 1.25rem;
        padding: 0.5rem 2rem 2.5rem 0;
        text-decoration: none;
        display: flex;
    }

    .custom-promises > li + li .custom-promise {
        border-left: 1px solid var(--footer-rule);
        padding-left: 2rem;
    }

    .custom-promise-icon {
        aspect-ratio: 1;
        color: #fff;
        border-radius: var(--radius-md);
        width: 3rem;
        transition:
            background var(--duration-fast) var(--ease-out),
            color var(--duration-fast) var(--ease-out);
        background: #ffffff12;
        flex: none;
        align-self: flex-start;
        place-items: center;
        font-size: 1.5rem;
        display: grid;
    }

    .custom-promise:hover .custom-promise-icon {
        color: var(--color-on-primary);
        background: var(--color-primary);
    }

    .custom-promise-body {
        align-content: start;
        gap: 0.375rem;
        display: grid;
    }

    .custom-promise-title {
        font-family: var(--font-heading);
        color: #fff;
        font-size: 1.25rem;
        font-weight: 800;
        font-stretch: 112%;
    }

    .custom-promise-text {
        max-width: 26rem;
        font-size: 0.9375rem;
        line-height: 1.55;
    }

    .custom-promise-link {
        color: #fff;
        align-items: center;
        gap: 0.375rem;
        margin-top: 0.375rem;
        font-size: 0.9375rem;
        font-weight: 600;
        display: inline-flex;

        & i {
            transition: translate var(--duration-fast) var(--ease-out);
        }
    }

    .custom-promise:hover .custom-promise-link i {
        translate: 0.1875rem;
    }

    .custom-footer-title {
        font-family: var(--font-heading);
        font-size: clamp(1.5rem, 1.2rem + 0.9vw, 2rem);
        font-weight: 800;
        font-stretch: 112%;
        line-height: 1.1;
    }

    .custom-issue {
        color: #fff;
        border: 1px solid var(--footer-rule);
        border-radius: calc(var(--radius-md) + 0.5rem);
        transition: background var(--duration-fast) var(--ease-out);
        align-items: center;
        gap: 1rem;
        padding: 0.5rem 1.25rem 0.5rem 0.5rem;
        text-decoration: none;
        display: inline-flex;

        & img {
            aspect-ratio: 4 / 3;
            object-fit: cover;
            border-radius: var(--radius-md);
            width: 4.5rem;
        }

        & > span {
            gap: 0.125rem;
            display: grid;
        }

        & > i {
            color: var(--footer-muted);
            transition: color var(--duration-fast) var(--ease-out);
            margin-left: 0.5rem;
        }

        &:hover {
            background: #ffffff0f;
        }

        &:hover > i {
            color: #fff;
        }
    }

    .custom-issue-kicker {
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--footer-muted);
        font-size: 0.8125rem;
        font-weight: 600;
    }

    .custom-issue-title {
        font-weight: 600;
    }

    .custom-coords {
        color: var(--footer-muted);
    }

    @media (width <= 1023px) {
        .custom-promises {
            grid-template-columns: minmax(0, 1fr);
            margin-bottom: 3rem;
        }

        .custom-promise {
            padding: 1.5rem 0;
        }

        .custom-promises > li + li .custom-promise {
            border-left: 0;
            border-top: 1px solid var(--footer-rule);
            padding-left: 0;
        }
    }

    .custom-head {
        color: #ffffffbf;
        background: var(--custom-ink);
        position: relative;
        overflow: clip;
    }

    .custom-head--bar {
        padding-block: calc(
                var(--header-h-rest, var(--header-h)) + clamp(2rem, 1.2rem + 2.4vw, 3.5rem)
            )
            clamp(2.5rem, 1.6rem + 2.6vw, 4rem);

        &:before {
            content: '';
            z-index: -1;
            background: radial-gradient(
                ellipse 40% 90% at 100% 30%,
                color-mix(in oklab, var(--color-primary) 18%, transparent),
                transparent 70%
            );
            position: absolute;
            inset: 0;
        }
    }

    .custom-contours {
        z-index: -1;
        fill: none;
        stroke: #ffffff12;
        stroke-width: 1.2px;
        pointer-events: none;
        width: 100%;
        height: 100%;
        position: absolute;
        inset: 0;
        mask-image: linear-gradient(90deg, #0000 6%, #000 46%);
    }

    .custom-head-title {
        letter-spacing: -0.02em;
        color: #fff;
        margin: 0;
        font-size: clamp(2.25rem, 1.5rem + 2.6vw, 3.75rem);
        line-height: 1;
    }

    .custom-head-title--xl {
        font-size: clamp(2.75rem, 1.6rem + 4vw, 5.25rem);
        line-height: 0.96;
    }

    .custom-head--photo {
        align-items: flex-end;
        min-height: clamp(30rem, 72svh, 44rem);
        display: flex;

        &:after {
            content: '';
            z-index: -1;
            background:
                linear-gradient(
                    color-mix(in oklab, var(--custom-ink) 58%, transparent),
                    transparent 30%
                ),
                linear-gradient(
                    transparent 38%,
                    color-mix(in oklab, var(--custom-ink) 78%, transparent)
                );
            position: absolute;
            inset: 0;
        }
    }

    .custom-head-photo {
        z-index: -2;
        object-fit: cover;
        width: 100%;
        height: 100%;
        position: absolute;
        inset: 0;
    }

    .custom-head-inner {
        min-height: inherit;
        padding-block: calc(var(--header-h-rest, var(--header-h)) + 1.5rem)
            clamp(2.5rem, 1.6rem + 3vw, 4.5rem);
        align-content: space-between;
        gap: 3rem;
        display: grid;
    }

    .custom-head-copy {
        max-width: 56rem;
    }

    .custom-steps {
        max-width: 40rem;

        & .stepper-label {
            color: #ffffff9e;
        }

        & .stepper-item.active .stepper-label,
        & .stepper-item.is-complete .stepper-label {
            color: #fff;
        }

        & .stepper-item:not(.active, .is-complete) .stepper-marker {
            color: #ffffffb3;
            background: none;
            border-color: #ffffff4d;
        }

        & .stepper {
            justify-content: flex-start;
        }

        & .stepper-item + .stepper-item:before {
            opacity: 1;
            background: #ffffff40;
            border: 0;
            width: 2.5rem;
            height: 1px;
            margin-inline: 1.25rem;
            transform: none;
        }

        & a.stepper-link:hover .stepper-label {
            color: #fff;
        }
    }

    html[data-demo='outdoor-store-1'] .custom-card--photo .product-card-img {
        object-fit: cover;
        width: 100%;
        height: 100%;
        inset: 0;
    }

    html[data-demo='outdoor-store-1'] .products.custom-shop-grid {
        gap: 2.5rem 1.25rem;
    }

    .custom-promo {
        color: #fff;
        background: var(--custom-ink);
        border-radius: var(--radius-lg);
        gap: 0.375rem;
        margin-top: 2rem;
        padding: 0.5rem 0.5rem 1.25rem;
        text-decoration: none;
        display: grid;
        position: relative;

        & img {
            aspect-ratio: 16 / 10;
            object-fit: cover;
            border-radius: calc(var(--radius-lg) - 0.5rem);
            width: 100%;
            margin-bottom: 0.75rem;
        }

        & > span {
            padding-inline: 0.75rem;
        }
    }

    .custom-promo-kicker {
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: oklch(from var(--color-primary) max(l, 0.74) c h);
        font-size: 0.8125rem;
        font-weight: 600;
    }

    .custom-promo-title {
        font-family: var(--font-heading);
        font-size: 1.125rem;
        font-weight: 800;
        font-stretch: 112%;
        line-height: 1.2;
    }

    .custom-promo-link {
        align-items: center;
        gap: 0.375rem;
        margin-top: 0.5rem;
        font-size: 0.9375rem;
        font-weight: 600;
        display: inline-flex;

        & i {
            transition: translate var(--duration-fast) var(--ease-out);
        }
    }

    .custom-promo:hover .custom-promo-link i {
        translate: 0.1875rem;
    }

    .custom-edc-cats {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 1.25rem;
        display: grid;
    }

    .custom-edc-cat {
        color: var(--color-text);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg);
        transition:
            border-color var(--duration-fast) var(--ease-out),
            background var(--duration-fast) var(--ease-out);
        grid-template-rows: auto auto;
        grid-template-columns: 5rem minmax(0, 1fr);
        align-items: center;
        column-gap: 1rem;
        padding: 0.5rem 1rem 0.5rem 0.5rem;
        text-decoration: none;
        display: grid;

        &:hover {
            border-color: color-mix(in oklab, var(--color-text) 40%, transparent);
        }

        &[aria-current='true'] {
            background: var(--color-bg-soft);
            border-color: var(--color-text);
        }
    }

    .custom-edc-well {
        aspect-ratio: 1;
        background: var(--product-bg);
        border-radius: calc(var(--radius-lg) - 0.5rem);
        grid-row: span 2;
        place-items: center;
        padding: 12%;
        display: grid;

        & img {
            object-fit: contain;
            width: 100%;
            height: 100%;
        }
    }

    .custom-edc-name {
        font-family: var(--font-heading);
        align-self: end;
        font-size: 1.0625rem;
        font-weight: 800;
        font-stretch: 112%;
        line-height: 1.2;
    }

    .custom-edc-count {
        color: var(--color-text-muted);
        font-variant-numeric: tabular-nums;
        align-self: start;
        font-size: 0.9375rem;
    }

    @media (width <= 1279px) {
        .custom-edc-cats {
            margin-inline: calc(var(--container-x) * -1);
            padding-inline: var(--container-x);
            scrollbar-width: none;
            display: flex;
            overflow-x: auto;

            &::-webkit-scrollbar {
                display: none;
            }

            & > a {
                flex: none;
                width: 15rem;
            }
        }
    }

    html[data-demo='outdoor-store-1'] .custom-edc-list.products--list {
        row-gap: 0;

        & > .product-card {
            border-bottom: 1px solid var(--color-border);
            grid-template-columns: 13rem minmax(0, 1fr);
            gap: 2rem;
            padding-block: 1.5rem;

            &:before {
                display: none;
            }
        }

        & > .product-card:first-of-type {
            padding-top: 0;
        }

        & .product-card-body {
            align-self: center;
        }

        & .product-card-specs {
            border: 0;
            border-top: 1px solid var(--color-border-soft);
            box-shadow: none;
            clip-path: none;
            opacity: 1;
            visibility: visible;
            background: none;
            border-radius: 0;
            gap: 0;
            margin-top: 0.75rem;
            padding: 0;
            font-size: 0.9375rem;
            display: grid;
            position: static;
            translate: none;

            & > div {
                border-bottom: 1px solid var(--color-border-soft);
                justify-content: space-between;
                padding-block: 0.4375rem;
            }

            & dt {
                color: var(--color-text-muted);
                font-weight: 500;
            }

            & dt:after {
                content: none;
            }

            & dd {
                color: var(--color-text);
                text-align: right;
                font-weight: 600;
            }
        }

        & .product-card-cta {
            justify-self: start;
            width: auto;
        }

        & .product-price:has(+ .product-card-cta) {
            margin-bottom: 0;
        }
    }

    @media (width >= 1024px) {
        html[data-demo='outdoor-store-1'] .custom-edc-list.products--list .product-card-body {
            grid-template-columns: minmax(0, 1fr) minmax(15rem, 19rem);
            grid-auto-flow: dense;
            align-items: start;
            column-gap: 3rem;
            display: grid;

            & > * {
                grid-column: 1;
            }

            & .product-card-specs {
                grid-area: 1 / 2 / span 4;
                margin-top: 0;
            }

            & .product-card-cta {
                grid-area: 5 / 2;
                place-self: end stretch;
                margin-top: 1rem;
            }
        }
    }

    @media (width <= 767px) {
        html[data-demo='outdoor-store-1'] .custom-edc-list.products--list > .product-card {
            grid-template-columns: 7.5rem minmax(0, 1fr);
            gap: 1rem;
        }

        html[data-demo='outdoor-store-1'] .custom-edc-list.products--list .product-card-specs {
            display: none;
        }
    }

    .custom-product {
        padding-block: calc(var(--header-h-rest, var(--header-h)) + 1.75rem) var(--section-space);
        background: linear-gradient(
            var(--custom-ink) calc(var(--header-h-rest, var(--header-h)) + 9rem),
            transparent 0
        );

        & .breadcrumb {
            --breadcrumb-color: #ffffffa6;
        }

        & .breadcrumb-item,
        & .breadcrumb-item a {
            color: #ffffffa6;
        }

        & .breadcrumb-item[aria-current],
        & .breadcrumb-item a:hover {
            color: #fff;
        }

        & > .container > .flex .carousel-btn {
            color: #fff;
            background: #ffffff14;
            border-color: #ffffff2e;
        }

        & > .container > .flex .carousel-btn:hover {
            color: var(--custom-ink);
            background: #fff;
            border-color: #fff;
        }
    }

    .custom-product-title {
        margin: 0;
        font-size: clamp(2.25rem, 1.6rem + 2.2vw, 3.5rem);
        line-height: 1;
    }

    .custom-gallery {
        background: var(--product-bg);
        border-radius: var(--radius-xl);

        & .swiper-slide img {
            object-fit: cover;
            width: 100%;
            height: 100%;
        }

        & .custom-gallery-cut img {
            object-fit: contain;
            padding: 12%;
        }
    }

    .custom-spec-strip {
        border-block: 1px solid var(--color-border);
        grid-template-columns: repeat(4, minmax(0, 1fr));
        margin: 0;
        display: grid;

        & > div {
            padding: 1rem 0 1rem 1.25rem;
        }

        & > div:first-child {
            padding-left: 0;
        }

        & > div + div {
            border-left: 1px solid var(--color-border);
        }

        & dt {
            color: var(--color-text-muted);
            font-size: 0.875rem;
        }

        & dd {
            font-family: var(--font-heading);
            font-variant-numeric: tabular-nums;
            margin: 0.25rem 0 0;
            font-size: 1.375rem;
            font-weight: 800;
            font-stretch: 112%;
            line-height: 1.1;
        }
    }

    .custom-wish {
        width: 3.5rem;
        height: 3.5rem;
        color: var(--color-text);
        border: 1px solid var(--color-border);
        border-radius: var(--btn-radius-override, var(--radius-md));
        transition:
            border-color var(--duration-fast) var(--ease-out),
            color var(--duration-fast) var(--ease-out);
        flex: none;
        place-items: center;
        font-size: 1.375rem;
        display: grid;

        &:hover {
            border-color: var(--color-text);
        }

        &[aria-pressed='true'] {
            color: var(--color-primary-ink);
            border-color: currentColor;
        }
    }

    .custom-perks {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1rem;
        margin: 0;
        padding: 0;
        list-style: none;
        display: grid;

        & > li {
            align-items: flex-start;
            gap: 0.75rem;
            display: flex;
        }

        & i {
            color: var(--color-primary-ink);
            flex: none;
            margin-top: 0.125rem;
            font-size: 1.5rem;
        }

        & span {
            color: var(--color-text-soft);
            gap: 0.125rem;
            font-size: 0.9375rem;
            line-height: 1.4;
            display: grid;
        }

        & strong {
            color: var(--color-text);
            font-weight: 600;
        }
    }

    .custom-acc-trigger {
        font-family: var(--font-heading);
        padding-block: 1.75rem;
        font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
        font-weight: 800;
        font-stretch: 112%;
    }

    .custom-acc-no {
        font-family: var(--font-sans);
        color: var(--color-text-muted);
        font-variant-numeric: tabular-nums;
        font-size: 0.875rem;
        font-weight: 600;
        font-stretch: 100%;
    }

    .custom-tools-media {
        aspect-ratio: 1;
        background: var(--product-bg);
        border-radius: var(--radius-xl);
        place-items: center;
        padding: 10%;
        display: grid;

        & img {
            object-fit: contain;
            width: 100%;
            height: 100%;
        }
    }

    .custom-tools {
        border-top: 1px solid var(--color-border);
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 2.5rem;
        margin: 0;
        padding: 0;
        list-style: none;
        display: grid;

        & > li {
            border-bottom: 1px solid var(--color-border);
            gap: 1rem;
            padding-block: 0.75rem;
            font-weight: 500;
            display: flex;
        }

        & span {
            min-width: 1.5rem;
            color: var(--color-text-muted);
            font-variant-numeric: tabular-nums;
            font-size: 0.875rem;
            font-weight: 600;
            line-height: 1.7;
        }
    }

    .custom-specs {
        border-top: 1px solid var(--color-border);
        margin: 0;

        & > div {
            border-bottom: 1px solid var(--color-border);
            justify-content: space-between;
            gap: 1.5rem;
            padding-block: 1rem;
            display: flex;
        }

        & dt {
            color: var(--color-text-soft);
        }

        & dd {
            text-align: right;
            margin: 0;
            font-weight: 600;
        }
    }

    .custom-step {
        background: var(--color-bg-soft);
        border-radius: var(--radius-lg);
        align-content: start;
        gap: 0.375rem;
        padding: 1.5rem;
        display: grid;

        & > strong {
            color: var(--color-text);
            font-size: 1.0625rem;
            font-weight: 600;
        }

        & > span:last-child {
            color: var(--color-text-soft);
            line-height: 1.5;
        }
    }

    .custom-step-no {
        font-family: var(--font-heading);
        color: var(--color-primary-ink);
        margin-bottom: 0.75rem;
        font-size: 1.75rem;
        font-weight: 800;
        font-stretch: 112%;
        line-height: 1;
    }

    .custom-step-icon {
        color: var(--color-primary-ink);
        margin-bottom: 0.75rem;
        font-size: 1.75rem;
    }

    .custom-score {
        font-family: var(--font-heading);
        font-size: 3rem;
        font-weight: 800;
        font-stretch: 112%;
        line-height: 1;
    }

    @media (width <= 639px) {
        .custom-spec-strip {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .custom-spec-strip > div:nth-child(3) {
            border-left: 0;
            border-top: 1px solid var(--color-border);
            padding-left: 0;
        }

        .custom-spec-strip > div:nth-child(4) {
            border-top: 1px solid var(--color-border);
        }

        .custom-perks,
        .custom-tools {
            grid-template-columns: minmax(0, 1fr);
        }
    }

    html[data-demo='outdoor-store-1'] :is(.custom-cart-table .cart-thumb, .custom-thumb) {
        background: var(--product-bg);

        & img {
            object-fit: contain;
            padding: 10%;
        }
    }

    .custom-empty .empty-state-icon {
        color: var(--color-primary-ink);
    }

    .custom-help {
        color: var(--color-text-soft);
        background: var(--color-bg-soft);
        border-radius: var(--radius-lg);
        transition: background var(--duration-fast) var(--ease-out);
        align-content: start;
        gap: 0.5rem;
        padding: 1.75rem;
        text-decoration: none;
        display: grid;

        .custom-band & {
            background: var(--color-bg);
        }

        & > i {
            color: var(--color-primary-ink);
            margin-bottom: 0.75rem;
            font-size: 1.75rem;
        }

        & > strong {
            color: var(--color-text);
            font-size: 1.125rem;
            font-weight: 600;
        }

        &:hover {
            background: color-mix(in oklab, var(--color-bg-soft), var(--color-tertiary-base) 55%);
        }

        &:hover .custom-help-link i {
            translate: 0.1875rem;
        }
    }

    .custom-help-link {
        color: var(--color-text);
        align-items: center;
        gap: 0.375rem;
        margin-top: 0.75rem;
        font-weight: 600;
        display: inline-flex;

        & i {
            transition: translate var(--duration-fast) var(--ease-out);
        }
    }

    .custom-login {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: center;
        gap: clamp(2.5rem, 1rem + 5vw, 6rem);
        display: grid;
    }

    .custom-login-media {
        border-radius: var(--radius-xl);
        position: relative;
        overflow: clip;

        & img {
            aspect-ratio: 4 / 5;
            object-fit: cover;
            width: 100%;
        }

        & figcaption {
            color: #fff;
            background: linear-gradient(
                transparent,
                color-mix(in oklab, var(--custom-ink) 82%, transparent)
            );
            gap: 1rem;
            padding: 5rem 2rem 2rem;
            display: grid;
            position: absolute;
            inset: auto 0 0;
        }
    }

    .custom-login-perks {
        gap: 0.625rem;
        margin: 0;
        padding: 0;
        list-style: none;
        display: grid;

        & li {
            align-items: center;
            gap: 0.75rem;
            font-size: 1.0625rem;
            font-weight: 500;
            display: flex;
        }

        & i {
            color: oklch(from var(--color-primary) max(l, 0.74) c h);
            font-size: 1.25rem;
        }
    }

    .custom-login-form {
        width: 100%;
        max-width: 28rem;
    }

    .custom-ticket-card {
        color: #fff;
        background: var(--custom-ink);
        border-radius: var(--radius-xl);
        flex-direction: column;
        align-items: flex-start;
        padding: 1.75rem;
        display: flex;

        & .custom-ticket-head {
            width: 100%;
            margin: 0;
        }

        & .custom-guide-link {
            margin-top: auto;
            padding-top: 1.5rem;
            text-decoration: none;
        }
    }

    .custom-ticket-steps {
        gap: 0.5rem;
        width: 100%;
        margin: 1.75rem 0 0;
        padding: 0;
        list-style: none;
        display: flex;

        & li {
            color: #ffffff8c;
            border-top: 3px solid #ffffff2e;
            flex: 1;
            padding-top: 0.75rem;
            font-size: 0.9375rem;
        }

        & .is-done {
            color: #ffffffd9;
            border-color: #ffffffd9;
        }

        & .is-current {
            color: #fff;
            border-color: var(--color-primary);
            font-weight: 600;
        }
    }

    html[data-demo='outdoor-store-1'] .custom-orders .avatar-stack img {
        background: var(--product-bg);
        object-fit: contain;
        padding: 0.125rem;
    }

    @media (width <= 1023px) {
        .custom-login {
            grid-template-columns: minmax(0, 1fr);
        }

        .custom-login-media img {
            aspect-ratio: 16 / 10;
        }

        .custom-login-form {
            margin-inline: auto;
        }
    }

    .custom-jumps {
        padding-top: 2rem;
    }

    .custom-jumps-row {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 0.75rem;
        display: grid;
    }

    .custom-jump {
        color: var(--color-text);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg);
        transition: border-color var(--duration-fast) var(--ease-out);
        align-items: center;
        gap: 0.875rem;
        padding: 0.75rem 1rem;
        text-decoration: none;
        display: flex;

        & > i {
            aspect-ratio: 1;
            background: var(--color-bg-soft);
            border-radius: var(--radius-md);
            width: 2.75rem;
            transition:
                background var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out);
            flex: none;
            place-items: center;
            font-size: 1.375rem;
            display: grid;
        }

        & > span {
            min-width: 0;
            display: grid;
        }

        & strong {
            white-space: nowrap;
            text-overflow: ellipsis;
            font-weight: 600;
            overflow: hidden;
        }

        & span span {
            color: var(--color-text-muted);
            font-variant-numeric: tabular-nums;
            font-size: 0.875rem;
        }

        &:hover {
            border-color: color-mix(in oklab, var(--color-text) 40%, transparent);
        }

        &:hover > i {
            color: var(--color-on-primary);
            background: var(--color-primary);
        }
    }

    .custom-act-row {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
        align-items: center;
        gap: clamp(2.5rem, 1rem + 5vw, 6rem);
        display: grid;
    }

    .custom-act-row--flip > :first-child {
        order: 2;
    }

    .custom-act-photo {
        position: relative;

        & img {
            aspect-ratio: 4 / 3;
            object-fit: cover;
            border-radius: var(--radius-xl);
            width: 100%;
        }

        & figcaption {
            color: #fff;
            background: color-mix(in oklab, var(--custom-ink) 60%, transparent);
            border: 1px solid var(--custom-glass-line);
            border-radius: var(--radius-md);
            -webkit-backdrop-filter: blur(12px);
            backdrop-filter: blur(12px);
            align-items: center;
            gap: 0.5rem;
            padding: 0.5rem 0.875rem;
            font-size: 0.9375rem;
            font-weight: 600;
            display: inline-flex;
            position: absolute;
            bottom: 1.25rem;
            left: 1.25rem;
        }
    }

    .custom-gear-title {
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--color-text-muted);
        margin: 2rem 0 0.75rem;
        font-size: 0.8125rem;
        font-weight: 600;
    }

    .custom-gear-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem;
        margin: 0;
        padding: 0;
        list-style: none;
        display: grid;
    }

    .custom-gear {
        color: var(--color-text);
        background: var(--color-bg);
        border: 1px solid var(--color-border-soft);
        border-radius: var(--radius-lg);
        transition: border-color var(--duration-fast) var(--ease-out);
        grid-template-columns: 4rem minmax(0, 1fr) auto;
        align-items: center;
        gap: 0.875rem;
        padding: 0.5rem 1rem 0.5rem 0.5rem;
        text-decoration: none;
        display: grid;

        &:hover {
            border-color: color-mix(in oklab, var(--color-text) 40%, transparent);
        }
    }

    .custom-gear-well {
        aspect-ratio: 1;
        background: var(--product-bg);
        border-radius: calc(var(--radius-lg) - 0.5rem);
        place-items: center;
        padding: 10%;
        display: grid;

        & img {
            object-fit: contain;
            width: 100%;
            height: 100%;
        }
    }

    .custom-gear-name {
        gap: 0.125rem;
        font-weight: 600;
        line-height: 1.3;
        display: grid;
    }

    .custom-gear-name span {
        color: var(--color-text-muted);
        font-size: 0.875rem;
        font-weight: 400;
    }

    .custom-gear-price {
        font-variant-numeric: tabular-nums;
        font-weight: 700;
    }

    @media (width <= 1279px) {
        .custom-jumps-row {
            margin-inline: calc(var(--container-x) * -1);
            padding-inline: var(--container-x);
            scrollbar-width: none;
            display: flex;
            overflow-x: auto;

            &::-webkit-scrollbar {
                display: none;
            }

            & > a {
                flex: none;
                width: 13.5rem;
            }
        }
    }

    @media (width <= 1023px) {
        .custom-act-row {
            grid-template-columns: minmax(0, 1fr);
        }

        .custom-act-row--flip > :first-child {
            order: 0;
        }
    }

    @media (width <= 639px) {
        .custom-gear-list {
            grid-template-columns: minmax(0, 1fr);
        }
    }

    .custom-guide-card--feature {
        border-bottom: 1px solid var(--color-border);
        grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
        align-items: center;
        gap: clamp(2rem, 1rem + 4vw, 5rem);
        margin-top: 2rem;
        padding-bottom: clamp(2.5rem, 1.5rem + 3vw, 4rem);
        display: grid;

        & .custom-guide-photo img {
            aspect-ratio: 3 / 2;
        }

        & .custom-guide-name {
            font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem);
            line-height: 1.05;
        }
    }

    .custom-guide-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 3rem 1.5rem;
        margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem);
        display: grid;

        & .custom-guide-photo img {
            aspect-ratio: 4 / 3;
        }

        & .custom-guide-card {
            gap: 1.25rem;
        }
    }

    .custom-guide-copy .custom-more {
        margin-top: 1.25rem;
    }

    .custom-guide-by {
        color: var(--color-text-muted);
        margin: 1rem 0 0;
        font-size: 0.9375rem;
    }

    @media (width <= 1023px) {
        .custom-guide-card--feature {
            grid-template-columns: minmax(0, 1fr);
        }

        .custom-guide-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    @media (width <= 639px) {
        .custom-guide-grid {
            grid-template-columns: minmax(0, 1fr);
        }
    }

    .custom-ask {
        color: #ffffffb8;
        background: var(--custom-ink);
        border-radius: var(--radius-lg);
        isolation: isolate;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.625rem;
        padding: 2rem;
        text-decoration: none;
        display: flex;
        position: relative;
        overflow: clip;

        &:before {
            content: '';
            z-index: -1;
            background: radial-gradient(
                ellipse 70% 60% at 100% 0%,
                color-mix(in oklab, var(--color-primary) 22%, transparent),
                transparent 70%
            );
            position: absolute;
            inset: 0;
        }

        & .custom-guide-link {
            margin-top: auto;
            padding-top: 1.5rem;
        }

        &:hover .custom-guide-link i {
            translate: 0.1875rem;
        }

        & .custom-guide-link i {
            transition: translate var(--duration-fast) var(--ease-out);
        }
    }

    .custom-ask-icon {
        color: oklch(from var(--color-primary) max(l, 0.74) c h);
        margin-bottom: 1rem;
        font-size: 2rem;
    }

    .custom-ask-kicker {
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: oklch(from var(--color-primary) max(l, 0.74) c h);
        font-size: 0.8125rem;
        font-weight: 600;
    }

    .custom-ask-title {
        font-family: var(--font-heading);
        color: #fff;
        font-size: 1.625rem;
        font-weight: 800;
        font-stretch: 112%;
        line-height: 1.1;
    }

    .custom-ask-text {
        max-width: 22rem;
        line-height: 1.55;
    }

    .custom-bench {
        border-top: 1px solid var(--color-border);
        grid-template-columns: repeat(3, minmax(0, 1fr));
        margin: 0;
        display: grid;

        & > div {
            padding: 1.25rem 1rem 0 0;
        }

        & > div + div {
            border-left: 1px solid var(--color-border);
            padding-left: 1.25rem;
        }

        & dt {
            color: var(--color-text-muted);
            font-size: 0.9375rem;
        }

        & dd {
            font-family: var(--font-heading);
            font-variant-numeric: tabular-nums;
            margin: 0.375rem 0 0;
            font-size: clamp(1.75rem, 1.4rem + 1vw, 2.5rem);
            font-weight: 800;
            font-stretch: 112%;
            line-height: 1;
        }
    }

    .custom-cover {
        background: var(--color-bg-soft);
        border-radius: var(--radius-xl);
        padding: 2rem;

        & h3 {
            align-items: center;
            gap: 0.625rem;
            display: flex;
        }

        & ul {
            gap: 0.75rem;
            margin: 1.25rem 0 0;
            padding: 0;
            list-style: none;
            display: grid;
        }

        & li {
            color: var(--color-text-soft);
            border-bottom: 1px solid var(--color-border);
            padding-bottom: 0.75rem;
            line-height: 1.5;
        }
    }

    .custom-cover-yes {
        color: var(--color-success);
        font-size: 1.5rem;
    }

    .custom-cover-no {
        color: var(--color-text-muted);
        font-size: 1.5rem;
    }

    .custom-step--light {
        background: var(--color-bg);
    }

    .custom-visit-card {
        border: 1px solid var(--color-border);
        border-radius: var(--radius-xl);
        grid-template-columns: 9rem minmax(0, 1fr);
        align-items: center;
        gap: 1.5rem;
        padding: 0.75rem 1.5rem 0.75rem 0.75rem;
        display: grid;

        & img {
            object-fit: cover;
            border-radius: var(--radius-lg);
            width: 100%;
            height: 100%;
            min-height: 9rem;
        }
    }

    .custom-ticket-card--new {
        padding: clamp(2rem, 1.2rem + 2.4vw, 3rem);

        & .custom-ticket-steps {
            margin-top: 2.5rem;
        }
    }

    .custom-map {
        border-radius: var(--radius-xl);
        min-height: 26rem;
        overflow: clip;

        & .map {
            border-radius: inherit;
            min-height: 26rem;
        }
    }

    :is(.custom-rent, .custom-clinics, .custom-jobs) {
        border-top: 1px solid var(--color-border);
        margin: 0;
        padding: 0;
        list-style: none;

        & > li {
            border-bottom: 1px solid var(--color-border);
            grid-template-columns: 4.5rem minmax(0, 1fr) auto;
            align-items: center;
            gap: 1.25rem;
            padding-block: 1rem;
            display: grid;
        }
    }

    .custom-jobs > li {
        grid-template-columns: minmax(0, 1fr) auto;
        padding-block: 1.375rem;
    }

    .custom-jobs .custom-gear-name {
        font-size: 1.125rem;
    }

    .custom-rent-price {
        font-family: var(--font-heading);
        text-align: right;
        font-variant-numeric: tabular-nums;
        font-size: 1.375rem;
        font-weight: 800;
        font-stretch: 112%;

        & span {
            font-family: var(--font-sans);
            color: var(--color-text-muted);
            font-size: 0.875rem;
            font-weight: 400;
            font-stretch: 100%;
            display: block;
        }
    }

    .custom-clinic-date {
        aspect-ratio: 1;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: #ffffffb8;
        background: var(--custom-ink);
        border-radius: var(--radius-lg);
        place-items: center;
        font-size: 0.8125rem;
        font-weight: 600;
        display: grid;

        & strong {
            font-family: var(--font-heading);
            letter-spacing: 0;
            color: #fff;
            font-size: 1.625rem;
            font-weight: 800;
            font-stretch: 112%;
            line-height: 1;
        }
    }

    .custom-crew {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 1.5rem;
        margin: 0;
        padding: 0;
        list-style: none;
        display: grid;

        & li {
            gap: 0.25rem;
            display: grid;
        }

        & img {
            aspect-ratio: 4 / 5;
            object-fit: cover;
            border-radius: var(--radius-lg);
            width: 100%;
            margin-bottom: 1rem;
        }

        & strong {
            font-family: var(--font-heading);
            font-size: 1.25rem;
            font-weight: 800;
            font-stretch: 112%;
        }

        & span {
            color: var(--color-text-soft);
        }
    }

    .custom-years {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 1.5rem;
        margin: 0;
        padding: 0;
        list-style: none;
        display: grid;

        & li {
            border-top: 2px solid var(--color-text);
            align-content: start;
            gap: 0.375rem;
            padding-top: 1.25rem;
            display: grid;
        }

        & li:last-child {
            border-top-color: var(--color-primary);
        }

        & strong {
            font-size: 1.125rem;
            font-weight: 600;
        }

        & li > span:last-child {
            color: var(--color-text-soft);
            line-height: 1.5;
        }
    }

    .custom-year {
        font-family: var(--font-heading);
        font-variant-numeric: tabular-nums;
        margin-bottom: 0.5rem;
        font-size: clamp(2rem, 1.5rem + 1.4vw, 3rem);
        font-weight: 800;
        font-stretch: 125%;
        line-height: 1;
    }

    @media (width <= 1023px) {
        .custom-years {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 2rem 1.5rem;
        }

        .custom-crew {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    @media (width <= 639px) {
        .custom-bench {
            grid-template-columns: minmax(0, 1fr);
        }

        .custom-bench > div + div {
            border-left: 0;
            border-top: 1px solid var(--color-border);
            padding-top: 1rem;
            padding-left: 0;
        }

        .custom-bench > div {
            padding-bottom: 1rem;
        }

        .custom-visit-card {
            grid-template-columns: minmax(0, 1fr);
            padding: 0.75rem 0.75rem 1.25rem;
        }

        .custom-years {
            grid-template-columns: minmax(0, 1fr);
        }

        :is(.custom-rent, .custom-clinics) > li {
            grid-template-columns: 3.75rem minmax(0, 1fr);
        }

        :is(.custom-rent, .custom-clinics) > li > :last-child {
            text-align: left;
            grid-column: 2;
            justify-self: start;
        }
    }

    .custom-wide-photo {
        position: relative;

        & img {
            aspect-ratio: 21 / 9;
            object-fit: cover;
            border-radius: var(--radius-xl);
            width: 100%;
        }

        & figcaption {
            color: var(--color-text-muted);
            margin-top: 0.875rem;
            font-size: 0.9375rem;
        }
    }

    @media (width <= 767px) {
        .custom-wide-photo img {
            aspect-ratio: 4 / 3;
        }
    }

    .custom-founder-photo {
        @media (width < 48rem) {
            max-width: 16rem;
        }
    }

    .custom-founder-photo img {
        aspect-ratio: 4 / 5;
        object-fit: cover;
        object-position: 50% 100%;
        background: color-mix(in oklab, var(--color-primary) 10%, var(--color-bg-muted));
        border-radius: var(--radius-lg);
        width: 100%;
    }

    .custom-founder-quote {
        & p {
            font-family: var(--font-heading);
            color: var(--color-text);
            text-wrap: pretty;
            margin: 0;
            font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.25rem);
            font-weight: 700;
            line-height: 1.2;
        }

        & footer {
            color: var(--color-text-soft);
            gap: 0.125rem;
            margin-top: 1.5rem;
            display: grid;
        }

        & strong {
            color: var(--color-text);
            font-size: 1.125rem;
            font-weight: 600;
        }
    }

    .custom-founder-crew {
        color: var(--color-text-soft);
        border-top: 1px solid var(--color-border);
        flex-wrap: wrap;
        align-items: center;
        gap: 1rem 1.5rem;
        margin-top: 2.5rem;
        padding-top: 1.75rem;
        display: flex;
    }

    .custom-founder-faces {
        display: flex;

        & img {
            object-fit: cover;
            background: var(--color-bg-muted);
            border-radius: var(--radius-full);
            width: 3rem;
            height: 3rem;
            box-shadow: 0 0 0 3px var(--color-bg);
        }

        & img + img {
            margin-left: -0.75rem;
        }
    }
}