/********* CATEGORY PAGE *********/
.archive {
    /* Base Styles */
    .archive-title {
        text-align: center;
        font-size: 2.5rem;
        padding: 3rem 0;
        font-weight: 400;
        margin-top: 3rem;
    }

    .page-title-inner {
        display: none;
    }

    .shop-container {
        display: flex;
        flex-direction: column;
    }

    .category-page-row .large-3 {
        display: none;
    }

    .large-9 {
        flex-basis: unset;
        max-width: unset;
    }

    .term-description .number-list .row {
        order: 1;
    }

    .products {
        order: 2;
    }

    /* Step Styles */
    .step-icon {
        display: none;
        height: auto;
        width: 44px;
        padding: 8px 1rem 0 0;
    }

    .step-text {
        padding: 0;
        margin: 0;
        flex-grow: 1;
    }

    .step-number {
        font-size: 1rem;
        padding: 3px 1rem 0 0;
        color: #9c1d20;
        font-weight: 600;
    }

    .steps {
        display: flex;
        flex-flow: row wrap;
        gap: 1rem;
        align-items: flex-start;
        justify-content: center;
        margin: 1rem 0 3rem 0;
    }

    .step {
        display: inline-flex;
        flex-flow: row;
        align-items: flex-start;
        justify-content: center;
        padding: 0 2rem;
        min-width: 100%;
        box-sizing: border-box;
    }

    .step:last-child {
        border-right: none;
    }

    /* Carousel Container */
    .steps-container {
        position: relative;
        width: 100%;
        overflow: hidden;
        margin-bottom: 1.5rem;
    }

    .steps-carousel {
        display: flex;
        transition: transform 0.3s ease-in-out;
        width: 100%;
    }

    /* Carousel Dots */
    .carousel-dots {
        display: flex;
        justify-content: center;
        padding: 1.5rem 0 0.5rem;
        gap: 0.75rem;
    }

    .carousel-dot {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background-color: #e0e0e0;
        cursor: pointer;
        transition: all 0.3s ease;
        border: 2px solid transparent;
    }

    .carousel-dot:hover {
        background-color: #c0c0c0;
    }

    .carousel-dot.active {
        background-color: #9c1d20;
        transform: scale(1.1);
        border-color: rgba(156, 29, 32, 0.3);
    }

    /* Media Queries */
    @media screen and (min-width: 380px) {
        .step-icon {
            display: block;
            height: auto;
            width: 54px;
        }
    }

    @media screen and (min-width: 500px) {
        .steps-container {
            display: flex;
            flex-flow: row nowrap;
            width: 100%;
            justify-content: center;
            overflow: visible;
        }

        .steps-carousel {
            display: flex;
            flex-flow: column nowrap;
            width: 100% !important;
            transform: none !important;
            justify-content: center;
            gap: 1rem;
        }

        .step {
            min-width: 0;
            flex: 1;
            max-width: 100%;
            padding: 0 0.5rem;
            opacity: 1 !important;
            transform: none !important;
        }

        .step-text {
            flex-grow: unset;
        }

        .carousel-dots {
            display: none;
        }
    }

    @media screen and (min-width: 903px) {
        .steps {
            margin: 4rem 0 10rem 0;
        }

        .step-icon {
            height: 74px;
            width: auto;
        }
        .step:nth-child(1) {
            border-right: 1px solid #ccc;
        }
    }

    @media screen and (min-width: 1226px) {
        .steps-carousel {
            flex-flow: row wrap;
        }
        .step {
            border-right: 1px solid #ccc;
        }
        .step:nth-last-child(2) {
            border-right: none;
        }
    }
}