.c-locked {
    width: 100%;
    height: 100%;

    overflow: hidden;
}

.c-container {
    height: 100%;
    
    overflow-x: hidden;
    overflow-y: auto;

    -webkit-overflow-scrolling: touch;
}

.c-container::-webkit-scrollbar {
    background-color: transparent;

    display: none;
}

.c-container::-webkit-scrollbar-track {
    background-color: transparent;
}

.c-container::-webkit-scrollbar-button {
    display: none;
}

.c-media-placeholder {
    background: linear-gradient(
        100deg,
        #ececec 25%,
        #ffffff 50%,
        #ececec 75%
    );
    background-size: 200% 100%;

    animation: shimmer 1.4s infinite;
}

.c-media-placeholder--hidden {
    background: none;
}

.c-lazy-media {
    opacity: 0;

    transition: var(--transition-01);
    -webkit-transition: var(--transition-01);
}

.c-lazy-media--loaded {
    opacity: 1;
}

.c-overlay {
    width: 100%;
    height: 100%;

    position: absolute;

    top: 0;
    left: 0;

    z-index: 2;
}

.c-overlay--01 {
    background-color: rgba(0, 0, 0, 0.2);
}

.c-overlay--02 {
    background-color: rgba(0, 0, 0, 0.4);
}

.c-decorated-dash {
    width: calc(160px - var(--space-xs) - var(--space-xs));
    height: 1px;

    position: relative;
}

.c-decorated-dash::before {
    content: "";

    width: calc(var(--space-xs) - 2px);
    height: calc(var(--space-xs) - 2px);
    
    border: 1px solid;

    transform: translateY(-50%) rotate(45deg);
    -webkit-transform: translateY(-50%) rotate(45deg);

    position: absolute;

    top: 50%;

    z-index: 1;
}

.c-decorated-dash::after {
    content: "";

    width: var(--space-xs);
    height: 1px;
    
    background-color: var(--color-02);

    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    
    position: absolute;
    
    top: 50%;
}

.c-decorated-dash--light {
    background-color: var(--color-06);
}

.c-decorated-dash--light::before {
    border-color: var(--color-02);
}

.c-decorated-dash--light::after {
    background-color: var(--color-06);
}

.c-decorated-dash--dark {
    background-color: var(--color-05);
}

.c-decorated-dash--dark::before {
    border-color: var(--color-01);
}

.c-decorated-dash--dark::after {
    background-color: var(--color-05);
}

.c-decorated-dash--left {
    margin-left: calc(var(--space-xs) + var(--space-xs));
}

.c-decorated-dash--left::before {
    left: calc(0px - var(--space-xs));
}

.c-decorated-dash--left::after {
    left: calc(0px - var(--space-xs) - var(--space-xs));
}

.c-decorated-dash--right {
    margin-right: calc(var(--space-xs) + var(--space-xs));
}

.c-decorated-dash--right::before {
    right: calc(0px - var(--space-xs));
}

.c-decorated-dash--right::after {
    right: calc(0px - var(--space-xs) - var(--space-xs));
}

.c-header {
    width: 50%;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-m);
}

.c-heading__wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.c-heading__wrapper-group {
    display: flex;
    align-items: center;
    gap: var(--space-m);
}

.c-heading {
    font-size: var(--font-size-xxl);
}

.c-heading--decorative {
    font-family: Brilliant, NotoSans, Helvetica, Arial, sans-serif;
    font-size: var(--font-size-xxl);
}

.c-heading-line {
    text-align: center;
}

.c-subheading {
    font-size: var(--font-size-l);
    /* font-weight: 350; */
}

.c-clamp-text--01 {
    text-overflow: ellipsis;
    
    white-space: nowrap;
    
    overflow: hidden;
}

.c-link--01 {
    background: linear-gradient(var(--color-01) 0 0) 0 100% / var(--underline-width, 0) 1px no-repeat;

    transition: var(--transition-01);
    -webkit-transition: var(--transition-01);
}

.c-link--01:hover {
    --underline-width: 100%;

    color: var(--color-01);
}

.c-link--02 {
    text-transform: lowercase;

    padding: 0 calc(var(--space-xs) + var(--space-xs));

    position: relative;
}

.c-link--02::before,
.c-link--02::after {
    content: "";

    width: var(--space-xs);
    height: 1px;
    
    background-color: var(--color-02);

    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);

    position: absolute;

    top: 50%;
}

.c-link--02::before {
    left: 0;
}

.c-link--02::after {
    right: 0;
}

.c-note {
    display: none;
}

.c-field-wrapper {
    width: max-content;

    display: flex;
    flex-direction: column;
    gap: var(--space-m);
}

.c-field__label {
    line-height: 1;
}

.c-field {
    width: 100%;
    height: 40px;

    border: 1px solid var(--color-05);
    border-radius: 0;

    outline: none;

    color: var(--color-01);

    font-family: Chillax, NotoSans, Helvetica, Arial, sans-serif;
    font-size: var(--font-size-m);
    font-weight: 300;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0 calc(var(--space-xs) + var(--space-xs));
}

.c-field:focus {
    border-color: var(--color-12);
}

.c-field--select {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDE0IDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0xMyAxTDcgN0wxIDEiIHN0cm9rZT0iYmxhY2siLz4KPC9zdmc+Cg==");
    background-repeat: no-repeat;
    background-position: right calc(var(--space-xs) + 6px) center;
    background-size: 12px auto;
    
    padding: 0 calc(var(--space-xs) + var(--space-xs) + 12px + var(--space-xs)) 0 calc(var(--space-xs) + var(--space-xs));

    position: relative;
    
    cursor: pointer;
}

.c-field--textarea {
    min-height: 120px;

    padding: var(--space-xs) calc(var(--space-xs) + var(--space-xs));

    resize: none;
}

.c-btn {
    width: max-content;
    height: 40px;

    border: 1px solid var(--color-05);
    
    color: var(--color-01);

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-xs);

    padding: 0 calc(var(--space-xs) + var(--space-xs));

    cursor: pointer;
}

.c-btn--solid {
    color: var(--color-02);

    background-color: var(--color-01);
}

.c-btn__icon {
    height: 12px;
}

.c-btn__icon--l {
    height: 16px;
}

.c-btn__icon--animated {
    animation: spinner 2s linear infinite;
}

.c-response-message {
    display: none;
}

.c-response-message--active {
    display: block;
}

.c-response-message--active.c-response-message--success {
    color: var(--color-10);
}

.c-response-message--active.c-response-message--failure {
    color: var(--color-11);
}

.c-products__wrapper {
    width: 100%;
    
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xxxl);
}

.c-product {
    width: calc(100% / 3 - (2 * var(--space-xxxl) / 3));

    display: flex;
    flex-direction: column;
    gap: var(--space-l);

    position: relative;
}

.c-product__label {
    color: var(--color-02);

    background-color: var(--color-04);

    padding: var(--space-xxs) var(--space-xs);

    position: absolute;

    top: 0;
    right: 0;

    z-index: 2;
}

.c-product__img-slider-outer-wrapper {
    width: 100%;

    position: relative;
}

.c-product__img-slider {
    max-width: 100%;
    height: 100%;
}

.c-product__img-slider > .swiper-wrapper {
    width: 100%;
}

.c-product__img-slide {
    width: 100%;
    height: 100%;
    
    display: flex;
}

.c-product__img-slide__img-wrapper {
    width: 100%;
    
    aspect-ratio: 4 / 5;

    display: flex;
}

.c-product__img {
    width: 100%;

    user-select: none;
    -webkit-user-drag: none;
}

.c-product__img-slider-scrollbar-wrapper {
    width: calc(100% - var(--space-m) - var(--space-m));

    position: absolute;

    bottom: var(--space-m);
    left: var(--space-m);

    z-index: 1;
}

.c-product__img-slider-scrollbar.swiper-scrollbar {
    width: 100%;
    height: 1px;

    border-radius: 0;

    background: none;
    background-color: var(--color-05);

    bottom: 0;
    left: 0;
}

.c-product__img-slider-scrollbar.swiper-scrollbar > .swiper-scrollbar-drag {
    height: 1px;

    border-radius: 0;

    background: none;
    background-color: var(--color-01);
}

.c-product__info {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

@media (max-width: 1280px) {
    
}

@media (max-width: 1024px) {
    
}

@media (max-width: 768px) {
    .c-decorated-dash {
        width: calc(60px - var(--space-xs) - var(--space-xs));
    }

    .c-header {
        width: 100%;
    }

    .c-products__wrapper {
        flex-direction: column;
    }

    .c-product {
        width: 100%;
    }
}

@media (max-width: 480px) {
    
}