body:has(.lightbox[open]) {
    overflow: hidden;
}
main {
    .product {
        padding: 12px 0 100px;
    }
    .summary {
        display: flex;
        align-items: flex-start;
        gap: 40px;
        padding: 20px;
        border-radius: 24px;
        background: var(--bg-4);
        box-shadow: var(--shadow-1);
        margin-bottom: 24px;
        .media {
            flex: none;
            display: flex;
            flex-direction: column;
            gap: 12px;
            width: 460px;
            .gallery {
                display: flex;
                flex-direction: column;
                gap: 12px;
                position: relative;
                .tag {
                    top: 30px;
                    left: -26px;
                }
                .image {
                    position: relative;
                    height: 320px;
                    border-radius: 12px;
                    overflow: hidden;
                    background: var(--bg-11);
                    cursor: zoom-in;
                    img {
                        display: block;
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                        transition: transform 0.3s;
                    }
                    .zoom {
                        background: var(--bg-21);
                        backdrop-filter: blur(5px);
                        opacity: 0;
                        pointer-events: none;
                        transition: opacity 0.3s, background 0.3s;
                        &::before {
                            content: '\f028';
                        }
                        &:hover {
                            background: var(--bg-22);
                        }
                    }
                    &:hover, &:focus-within {
                        .zoom {
                            opacity: 1;
                            pointer-events: auto;
                        }
                    }
                    @media (hover: hover) {
                        &:hover img {
                            transform: scale(1.06);
                        }
                    }
                    @media (hover: none) {
                        .zoom {
                            opacity: 1;
                            pointer-events: auto;
                        }
                    }
                }
                .thumbs {
                    display: flex;
                    gap: 8px;
                    overflow-x: auto;
                    scrollbar-width: none;
                    button {
                        flex: none;
                        width: 100px;
                        height: 70px;
                        border: 1px solid transparent;
                        border-radius: 12px;
                        overflow: hidden;
                        background: var(--bg-11);
                        &.active {
                            border-color: var(--bg-14);
                        }
                        img {
                            display: block;
                            width: 100%;
                            height: 100%;
                            object-fit: cover;
                        }
                    }
                }
                .zoom, .close {
                    position: absolute;
                    top: 20px;
                    right: 20px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width: 40px;
                    height: 40px;
                    padding: 0;
                    border-radius: 12px;
                    &::before {
                        font-family: icon;
                        font-size: 20px;
                        line-height: 20px;
                        color: var(--text-6);
                    }
                }
                .lightbox {
                    --thumb-space: 0px;
                    --view-width: min(1000px, calc(100vw - 40px), calc((100dvh - 40px - var(--thumb-space) * 2) * 4 / 3));
                    position: fixed;
                    inset: 0;
                    width: 100vw;
                    height: 100dvh;
                    max-width: none;
                    max-height: none;
                    margin: 0;
                    padding: 20px;
                    border: 0;
                    background: transparent;
                    &[open] {
                        display: grid;
                        grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr);
                        justify-items: center;
                    }
                    &:has(.thumbs) {
                        --thumb-space: 90px;
                    }
                    &::backdrop {
                        background: var(--bg-21);
                        backdrop-filter: blur(5px);
                    }
                    .picture {
                        grid-row: 2;
                        position: relative;
                        width: var(--view-width);
                        aspect-ratio: 4 / 3;
                        border-radius: 20px;
                        overflow: hidden;
                        background: var(--bg-11);
                        img {
                            position: absolute;
                            inset: 0;
                            width: 100%;
                            height: 100%;
                            object-fit: cover;
                        }
                    }
                    .thumbs {
                        grid-row: 3;
                        align-self: start;
                        width: max-content;
                        max-width: var(--view-width);
                        margin-top: 20px;
                    }
                    .close {
                        background: var(--bg-1);
                        transition: background 0.3s;
                        &::before {
                            content: '\f021';
                        }
                        &:hover {
                            background: var(--text-1);
                        }
                    }
                }
            }
            .certificates {
                display: flex;
                flex-direction: column;
                gap: 10px;
                margin-top: 12px;
                padding: 12px;
                border-radius: 12px;
                background: var(--bg-3);
                position: relative;
                &::before {
                    content: '';
                    position: absolute;
                    top: -12px;
                    left: 0;
                    width: 100%;
                    height: 1px;
                    background: var(--bg-8);
                }
                h2 {
                    font-size: 14px;
                    line-height: 20px;
                    font-weight: 700;
                    color: var(--text-7);
                }
                .files {
                    display: flex;
                    flex-direction: column;
                    gap: 16px;
                    a {
                        display: flex;
                        align-items: center;
                        gap: 6px;
                        .format {
                            flex: none;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            width: 24px;
                            height: 18px;
                            border-radius: 4px;
                            background: var(--bg-18);
                            font-size: 9px;
                            font-weight: 700;
                            color: var(--bg-10);
                        }
                        .name {
                            flex: 1;
                            min-width: 0;
                            font-size: 12px;
                            line-height: 12px;
                            letter-spacing: -0.24px;
                            color: var(--text-10);
                            overflow-wrap: anywhere;
                        }
                        &::after {
                            content: '\f026';
                            flex: none;
                            width: 16px;
                            height: 16px;
                            font-family: icon;
                            font-size: 16px;
                            line-height: 16px;
                            color: var(--text-1);
                        }
                    }
                }
            }
        }
        .info {
            flex: 1;
            min-width: 0;
            align-self: stretch;
            display: flex;
            flex-direction: column;
            gap: 20px;
            .meta {
                display: flex;
                align-items: center;
                flex-wrap: wrap;
                gap: 8px;
                &> span {
                    display: flex;
                    align-items: center;
                    gap: 4px;
                    min-height: 32px;
                    padding: 8px 12px;
                    border-radius: 8px;
                    background: var(--bg-3);
                    font-size: 12px;
                    line-height: 14px;
                }
                .sku {
                    .label, .number {
                        font-size: inherit;
                        line-height: inherit;
                    }
                    .number {
                        font-weight: 700;
                        color: var(--text-7);
                    }
                    .copy {
                        flex: none;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        width: 16px;
                        height: 16px;
                        background: none;
                        &::before {
                            content: '\f00d';
                            font-family: icon;
                            font-size: 16px;
                            color: var(--text-3);
                        }
                        &:hover::before {
                            color: var(--text-1);
                        }
                    }
                }
                .stock {
                    background: var(--bg-18);
                    color: var(--text-9);
                    font-weight: 500;
                    line-height: 12px;
                    &::before {
                        content: '';
                        flex: none;
                        width: 8px;
                        height: 8px;
                        border-radius: 50%;
                        border: var(--border-4);
                        background: var(--bg-10);
                        background-clip: padding-box;
                    }
                    &.in-stock {
                        background: var(--bg-19);
                        color: var(--text-8);
                        &::before {
                            border: var(--border-3);
                            background: var(--bg-5);
                            background-clip: padding-box;
                        }
                    }
                }
                .actions {
                    flex: none;
                    display: flex;
                    gap: 8px;
                    margin-left: auto;
                    button {
                        width: 32px;
                        height: 32px;
                        padding: 0;
                        border-radius: 8px;
                        &.compare{
                            &.active {
                                &::before {
                                    color: var(--text-10);
                                }
                            }
                            &::before {
                                content: '\f020';
                            }
                        }
                        &.favorite {
                            &.active {
                                &::before {
                                    color: var(--text-10);
                                }
                            }
                            &::before {
                                content: '\f01f';
                            }
                        }
                        &::before {
                            color: var(--text-3);
                        }
                    }
                }
            }
            .details {
                display: flex;
                flex-direction: column;
                gap: 12px;
                h1 {
                    font-size: 24px;
                    line-height: 1.1;
                    color: var(--text-7);
                }
                .features {
                    display: flex;
                    gap: 8px;
                    .feature {
                        flex: 1;
                        min-width: 0;
                        display: flex;
                        flex-direction: column;
                        gap: 6px;
                        position: relative;
                        &.open {
                            button {
                                background: var(--bg-4);
                                border: var(--border-6);
                                &.value::after {
                                    transform: rotate(180deg);
                                }
                                &:hover {
                                    background: var(--bg-4);
                                }
                            }
                            .sub {
                                display: flex;
                            }
                        }
                        .label {
                            font-size: 12px;
                            line-height: 12px;
                            letter-spacing: -0.24px;
                            color: var(--text-1);
                        }
                        .value {
                            display: flex;
                            align-items: center;
                            justify-content: space-between;
                            gap: 6px;
                            min-height: 28px;
                            padding: 6px;
                            border-radius: 6px;
                            background: var(--bg-3);
                            font-size: 14px;
                            line-height: 16px;
                            letter-spacing: -0.28px;
                            color: var(--text-7);
                            text-align: left;
                        }
                        button {
                            border: 1px solid transparent;
                            &.value {
                                width: 100%;
                                &::after {
                                    content: '\f00f';
                                    flex: none;
                                    font-family: icon;
                                    font-size: 16px;
                                    line-height: 16px;
                                    color: var(--text-3);
                                }
                            }
                            &:hover {
                                background: var(--bg-8);
                            }
                        }
                        .sub {
                            display: none;
                            position: absolute;
                            top: calc(100% + 4px);
                            left: 0;
                            width: 311px;
                            flex-wrap: wrap;
                            align-items: center;
                            gap: 6px;
                            padding: 12px;
                            border: var(--border-6);
                            border-radius: 12px;
                            background: var(--bg-4);
                            box-shadow: var(--shadow-2);
                            z-index: 20;
                            a, span {
                                display: flex;
                                align-items: center;
                                padding: 5px 6px;
                                border-radius: 6px;
                                background: var(--bg-3);
                                font-size: 12px;
                                line-height: 14px;
                                letter-spacing: -0.24px;
                                color: var(--text-7);
                                white-space: nowrap;
                                &.current {
                                    background: var(--bg-1);
                                    color: var(--text-5);
                                }
                                &:not(.current):hover {
                                    background: var(--bg-8);
                                }
                            }
                        }
                    }
                }
            }
            .pricing {
                display: flex;
                flex-direction: column;
                gap: 12px;
                padding-top: 20px;
                border-top: 1px solid var(--bg-8);
                .head {
                    gap: 12px;
                    h2 {
                        font-family: Inter;
                        font-size: 14px;
                        font-weight: 700;
                    }
                    .step {
                        font-size: 14px;
                    }
                }
                .tiers {
                    display: flex;
                    gap: 8px;
                    .tier, .offer {
                        flex: 1;
                        min-width: 0;
                        display: flex;
                        flex-direction: column;
                        gap: 4px;
                        padding: 14px;
                        border: 1px solid var(--bg-8);
                        border-radius: 12px;
                        background: var(--bg-4);
                        .range {
                            font-size: 12px;
                            line-height: 14px;
                        }
                        .price {
                            display: flex;
                            align-items: center;
                            font-size: 20px;
                            line-height: 24px;
                            font-weight: 700;
                            color: var(--text-7);
                            &::after {
                                content: '\f007';
                                font-family: icon;
                                font-size: 12px;
                            }
                        }
                        .note {
                            margin-top: auto;
                            font-size: 11px;
                            &.discount {
                                font-size: 12px;
                                line-height: 14px;
                                font-weight: 700;
                                color: var(--text-8);
                            }
                        }
                        &.active {
                            border-color: var(--bg-14);
                            box-shadow: var(--shadow-1);
                            .range {
                                position: relative;
                                padding-right: 24px;
                                font-weight: 700;
                                color: var(--text-8);
                                &::after {
                                    content: '\f023';
                                    position: absolute;
                                    top: 50%;
                                    right: 0;
                                    transform: translateY(-50%);
                                    width: 16px;
                                    height: 16px;
                                    border-radius: 4px;
                                    background: var(--bg-16);
                                    font-family: icon;
                                    font-size: 14px;
                                    line-height: 16px;
                                    text-align: center;
                                    color: var(--text-6);
                                }
                            }
                            .price {
                                color: var(--text-8);
                            }
                        }
                    }
                    .offer {
                        gap: 0;
                        .range {
                            margin-bottom: 4px;
                        }
                        .prices {
                            display: flex;
                            align-items: baseline;
                            gap: 16px;
                        }
                        .price {
                            color: var(--text-8);
                        }
                        .old {
                            display: flex;
                            align-items: center;
                            font-size: 16px;
                            line-height: 20px;
                            font-weight: 600;
                            color: var(--text-1);
                            text-decoration: line-through;
                            &::after {
                                content: '\f007';
                                font-family: icon;
                                font-size: 8px;
                                margin-left: 2px;
                            }
                        }
                        .note {
                            font-size: 12px;
                            line-height: 14px;
                        }
                    }
                }
            }
            .order {
                display: flex;
                flex-direction: column;
                gap: 14px;
                padding: 16px;
                border: 1px solid var(--bg-8);
                border-radius: 12px;
                background: var(--bg-4);
                &.guest {
                    gap: 10px;
                    .minimum {
                        display: flex;
                        align-items: center;
                        flex-wrap: wrap;
                        gap: 8px;
                        .label {
                            padding: 4px 8px;
                            border-radius: 6px;
                            background: var(--bg-3);
                            font-size: 12px;
                            font-weight: 700;
                        }
                        .value {
                            font-size: 13px;
                        }
                    }
                    .hints {
                        display: flex;
                        flex-wrap: wrap;
                        gap: 8px;
                        span {
                            padding: 4px 8px;
                            border-radius: 6px;
                            background: var(--bg-17);
                            font-size: 12px;
                            line-height: 14px;
                            color: var(--text-8);
                        }
                    }
                }
                .controls {
                    display: flex;
                    align-items: flex-end;
                    flex-wrap: wrap;
                    gap: 12px;
                    .label {
                        font-size: 13px;
                        font-weight: 700;
                        line-height: normal;
                    }
                    .quantity-group {
                        flex: none;
                        display: flex;
                        flex-direction: column;
                        gap: 6px;
                        max-width: 100%;
                        .quantity {
                            display: flex;
                            align-items: center;
                            gap: 4px;
                            padding: 4px;
                            border-radius: 12px;
                            background: var(--bg-3);
                            .minus, .plus {
                                flex: none;
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                width: 42px;
                                height: 42px;
                                border-radius: 8px;
                                background: var(--bg-4);
                                &::before {
                                    font-family: icon;
                                    font-size: 20px;
                                    line-height: 20px;
                                    color: var(--text-3);
                                    transition: 0.3s;
                                }
                                &:hover:not(:disabled) {
                                    &::before {
                                        color: var(--text-10);
                                    }
                                }
                                &:disabled {
                                    opacity: 0.3;
                                    cursor: default;
                                }
                            }
                            .minus::before {
                                content: '\f010';
                            }
                            .plus::before {
                                content: '\f011';
                            }
                            .value {
                                flex: 1;
                                min-width: 48px;
                                display: flex;
                                flex-direction: column;
                                text-align: center;
                                .number {
                                    font-size: 16px;
                                    line-height: 20px;
                                    color: var(--text-7);
                                }
                                .unit {
                                    font-size: 12px;
                                    line-height: 12px;
                                    letter-spacing: -0.24px;
                                    color: var(--text-1);
                                }
                            }
                        }
                    }
                    .company {
                        position: relative;
                        flex: 1 1 240px;
                        min-width: 0;
                        display: flex;
                        flex-direction: column;
                        gap: 6px;
                        > .value {
                            display: flex;
                            align-items: center;
                            justify-content: space-between;
                            gap: 12px;
                            width: 100%;
                            height: 50px;
                            padding: 0 14px;
                            border: 1px solid var(--bg-8);
                            border-radius: 10px;
                            background: var(--bg-4);
                            .name {
                                min-width: 0;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                white-space: nowrap;
                                font-size: 14px;
                                line-height: 20px;
                                font-weight: 700;
                                color: var(--text-7);
                            }
                            &:not(:disabled)::after {
                                content: '\f00f';
                                flex: none;
                                font-family: icon;
                                font-size: 16px;
                                line-height: 16px;
                                color: var(--text-3);
                            }
                            &:disabled {
                                cursor: default;
                            }
                        }
                        .sub {
                            display: none;
                            flex-direction: column;
                            gap: 4px;
                            position: absolute;
                            top: calc(100% + 4px);
                            left: 0;
                            width: 100%;
                            padding: 6px;
                            border: var(--border-6);
                            border-radius: 12px;
                            background: var(--bg-4);
                            box-shadow: var(--shadow-2);
                            z-index: 20;
                            button {
                                padding: 10px;
                                border-radius: 6px;
                                background: transparent;
                                font-size: 14px;
                                line-height: 20px;
                                text-align: left;
                                overflow-wrap: anywhere;
                                color: var(--text-7);
                                &:hover, &.current {
                                    background: var(--bg-3);
                                }
                                &.current {
                                    font-weight: 700;
                                    color: var(--text-8);
                                }
                            }
                        }
                        &.open {
                            > .value::after {
                                transform: rotate(180deg);
                            }
                            .sub {
                                display: flex;
                            }
                        }
                    }
                }
                .totals {
                    display: flex;
                    align-items: flex-end;
                    justify-content: space-between;
                    flex-wrap: wrap;
                    gap: 12px;
                    .amount {
                        display: flex;
                        align-items: baseline;
                        flex-wrap: wrap;
                        gap: 6px;
                        .label, .value {
                            font-size: 20px;
                            line-height: 24px;
                            font-weight: 700;
                        }
                        .label {
                            color: var(--text-10);
                        }
                        .value {
                            display: flex;
                            align-items: center;
                            color: var(--text-7);
                            &::after {
                                content: '\f007';
                                font-family: icon;
                                font-size: 12px;
                                font-weight: 400;
                                color: inherit;
                            }
                        }
                        .tax {
                            font-size: 12px;
                            line-height: 20px;
                            color: var(--text-1);
                        }
                    }
                    .discount {
                        display: none;
                        padding: 6px 12px;
                        border-radius: 6px;
                        background: var(--bg-17);
                        font-size: 14px;
                        line-height: 20px;
                        color: var(--text-8);
                        span, strong {
                            font: inherit;
                            color: inherit;
                        }
                        strong {
                            font-weight: 700;
                        }
                        &.active {
                            display: block;
                        }
                    }
                }
            }
        }
        .purchase {
            display: flex;
            gap: 8px;
            &.guest {
                flex-direction: column;
                margin-top: auto;
                .login {
                    width: 100%;
                    height: 50px;
                    padding: 0 16px;
                    background: var(--bg-14);
                    font-size: 15px;
                    color: var(--text-6);
                }
                .note {
                    font-size: 12px;
                    line-height: 14px;
                    text-align: center;
                }
            }
            .add-cart, .bill {
                flex: 1;
                min-width: 0;
                height: 50px;
                padding: 0 16px;
                font-size: 15px;
                color: var(--text-6);
            }
            .add-cart {
                &::before {
                    left: calc(50% - 95px);
                }
                &> span.first {
                    right: calc(50% - 95px);
                }
                &.added {
                    &::before {
                        left: -20px;
                    }
                    &::after {
                        right: calc(50% - 54px);
                    }
                    &> span.first {
                        right: -400px;
                    }
                    &> span.second {
                        left: calc(50% - 54px);
                    }
                }
            }
            .bill {
                background: var(--bg-1);
            }
            .sample {
                flex: none;
                width: 200px;
                height: 50px;
                padding: 0 16px;
                font-size: 14px;
                font-weight: 600;
                color: var(--text-1);
            }
            button:disabled {
                cursor: default;
                box-shadow: none;
                &:not(.added) {
                    opacity: 0.3;
                }
            }
        }
    }
    .information {
        margin-bottom: 24px;
        .tabs {
            display: flex;
            gap: 4px;
            width: max-content;
            max-width: 100%;
            padding: 4px;
            border-radius: 16px;
            background: var(--bg-3);
            margin-bottom: 20px;
            button {
                padding: 10px 20px;
                border-radius: 12px;
                background: transparent;
                font-size: 14px;
                line-height: 20px;
                font-weight: 700;
                &.active {
                    background: var(--bg-4);
                    color: var(--bg-13);
                }
            }
        }
        .video {
            display: none;
            flex-wrap: wrap;
            gap: 48px;
            &.active {
                display: flex;
            }
            .review {
                display: flex;
                flex-wrap: wrap;
                align-items: flex-start;
                gap: 48px;
                width: 100%;
            }
            .chapters {
                flex: 1 1 320px;
                min-width: 0;
                > p {
                    margin-bottom: 8px;
                    font-size: 12px;
                    line-height: 14px;
                    text-transform: uppercase;
                }
                ol {
                    list-style: none;
                }
                li {
                    display: flex;
                    align-items: center;
                    gap: 16px;
                    padding: 8px 0;
                    border-bottom: 1px solid var(--bg-8);
                    .time {
                        background: transparent;
                        padding: 0;
                        text-align: left;
                        flex: none;
                        width: 52px;
                        font-size: 12px;
                        line-height: 14px;
                        font-weight: 700;
                        color: var(--bg-14);
                    }
                    > div {
                        display: flex;
                        flex-direction: column;
                        flex: 1;
                        min-width: 0;
                        gap: 2px;
                        overflow-wrap: anywhere;
                        strong {
                            font-size: 14px;
                            line-height: 20px;
                            font-weight: 700;
                            color: var(--text-7);
                        }
                        span {
                            font-size: 14px;
                            line-height: normal;
                            color: var(--text-3);
                        }
                    }
                }
            }
            .player {
                position: relative;
                width: 500px;
                max-width: 100%;
                aspect-ratio: 500 / 252;
                border-radius: 14px;
                overflow: hidden;
                iframe, video {
                    position: absolute;
                    inset: 0;
                    display: block;
                    visibility: hidden;
                    width: 100%;
                    height: 100%;
                    border: 0;
                }
                .preview {
                    position: absolute;
                    inset: 0;
                    z-index: 1;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width: 100%;
                    height: 100%;
                    padding: 0;
                    background: var(--bg-1);
                    text-align: left;
                    img {
                        position: absolute;
                        inset: 0;
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                        opacity: 0.3;
                    }
                    .play {
                        position: relative;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        width: 50px;
                        height: 50px;
                        border-radius: 16px;
                        background: var(--bg-14);
                        &::before {
                            font-family: icon;
                            content: '\f027';
                            font-size: 20px;
                            line-height: 20px;
                            color: var(--text-6);
                        }
                    }
                    .caption {
                        position: absolute;
                        left: 20px;
                        bottom: 16px;
                        display: flex;
                        flex-direction: column;
                        gap: 2px;
                        width: 320px;
                        max-width: calc(100% - 40px);
                        strong {
                            font-size: 16px;
                            line-height: 20px;
                            font-weight: 700;
                            color: var(--text-6);
                        }
                        span {
                            font-size: 12px;
                            line-height: 14px;
                            color: var(--text-6);
                            opacity: 0.72;
                        }
                    }
                }
                .duration {
                    position: absolute;
                    top: 12px;
                    right: 12px;
                    z-index: 2;
                    padding: 4px 8px;
                    border-radius: 8px;
                    background: var(--bg-20);
                    font-size: 12px;
                    line-height: 14px;
                    font-weight: 700;
                    color: var(--text-6);
                    pointer-events: none;
                    &:empty {
                        display: none;
                    }
                }
                &.playing {
                    iframe, video {
                        visibility: visible;
                    }
                    .preview, .duration {
                        display: none;
                    }
                }
            }
        }
       .content {
            display: none;
            width: 900px;
            max-width: 100%;
            overflow-wrap: anywhere;
            &.active {
                display: block;
            }
            > * + * {
                margin-top: 10px;
            }
            p, li {
                font-size: 14px;
                line-height: normal;
            }
            > p:first-child {
                font-size: 18px;
                font-weight: 600;
                color: var(--text-7);
            }
            span, a, strong, b, em, i {
                font-size: inherit;
                line-height: inherit;
                color: inherit;
            }
            strong, b {
                font-weight: 700;
            }
            ul, ol {
                padding-left: 21px;
            }
            li + li {
                margin-top: 6px;
            }
        }
        .specifications {
            display: none;
            flex-wrap: wrap;
            column-gap: 40px;
            &.active {
                display: flex;
            }
            dl {
                flex: 1 1 400px;
                min-width: 0;
                > div {
                    display: flex;
                    align-items: baseline;
                    justify-content: space-between;
                    gap: 16px;
                    padding: 12px 0;
                    border-bottom: var(--border-10);
                }
            }
            dt, dd {
                min-width: 0;
                font-size: 14px;
                line-height: 20px;
                overflow-wrap: anywhere;
            }
            dd {
                font-weight: 700;
                color: var(--text-7);
                text-align: right;
            }
        }
    }
    .conditions {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        .item {
            display: flex;
            flex-direction: column;
            flex: 1 1 320px;
            min-width: 0;
            padding: 20px;
            border-radius: 16px;
            background: var(--bg-3);
        }
        h2 {
            display: flex;
            align-items: center;
            gap: 6px;
            margin-bottom: 8px;
            font-family: SSFBreakthrough;
            font-size: 18px;
            font-weight: 800;
            line-height: normal;
            color: var(--text-7);
            &::before {
                content: '';
                flex: none;
                width: 14px;
                height: 18px;
                background: url(../images/mark.svg) no-repeat center;
            }
        }
        p {
            margin-bottom: 10px;
            line-height: 20px;
            overflow-wrap: anywhere;
        }
        .btn {
            align-self: flex-end;
            margin-top: auto;
            padding: 10px 16px;
            border-radius: 8px;
            background: var(--bg-14);
            font-size: 14px;
            font-weight: 600;
            line-height: normal;
        }
    }
    .related {
        margin-top: 100px;
        .head {
            margin-bottom: 24px;
            h2 {
                line-height: 1.1;
            }
        }
    }
}
@media screen and (max-width: 1279px) {
    main {
        .product {
            width: calc(100% - 48px);
            padding-bottom: 80px;
            .summary {
                display: grid;
                grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
                gap: 24px;
                .media {
                    width: auto;
                    min-width: 0;
                    .gallery {
                        .image {
                            height: auto;
                            aspect-ratio: 460 / 320;
                        }
                        > .thumbs {
                            button {
                                width: 88px;
                                height: 62px;
                            }
                        }
                    }
                }
                .info {
                    .meta {
                        .sku {
                            max-width: 100%;
                            .number {
                                min-width: 0;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                white-space: nowrap;
                            }
                        }
                    }
                    .details {
                        .features {
                            display: grid;
                            grid-template-columns: repeat(2, minmax(0, 1fr));
                            .feature {
                                .sub {
                                    width: min(311px, calc(200% + 8px));
                                    a, span {
                                        max-width: 100%;
                                        white-space: normal;
                                        overflow-wrap: anywhere;
                                    }
                                }
                                &:nth-child(even) {
                                    .sub {
                                        left: auto;
                                        right: 0;
                                    }
                                }
                            }
                        }
                    }
                    .pricing {
                        .head {
                            flex-wrap: wrap;
                        }
                        .tiers {
                            display: grid;
                            grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
                            .offer {
                                grid-column: 1 / -1;
                                .prices {
                                    flex-wrap: wrap;
                                    gap: 4px 12px;
                                }
                            }
                        }
                    }
                    .purchase {
                        flex-wrap: wrap;
                        .add-cart, .bill {
                            flex: 1 1 220px;
                        }
                        .sample {
                            flex: 1 1 200px;
                            width: auto;
                        }
                    }
                }
            }
            .information {
                .tabs {
                    overflow-x: auto;
                    overscroll-behavior-x: contain;
                    scrollbar-width: none;
                    button {
                        flex: none;
                        white-space: nowrap;
                    }
                }
                .specifications {
                    column-gap: 24px;
                }
                .video {
                    gap: 32px;
                    .review {
                        display: grid;
                        grid-template-columns: repeat(2, minmax(0, 1fr));
                        gap: 24px;
                        .player {
                            display: grid;
                            width: 100%;
                            min-width: 0;
                            min-height: 220px;
                            aspect-ratio: 16 / 9;
                            .preview {
                                position: relative;
                                display: grid;
                                grid-template-columns: minmax(0, 1fr);
                                grid-template-rows: minmax(50px, 1fr) auto;
                                gap: 16px;
                                height: auto;
                                padding: 40px 16px 16px;
                                .play {
                                    place-self: center;
                                }
                                .caption {
                                    position: relative;
                                    inset: auto;
                                    width: 100%;
                                    max-width: none;
                                    overflow-wrap: anywhere;
                                }
                            }
                            &.playing {
                                .preview {
                                    display: none;
                                }
                            }
                        }
                    }
                }
            }
            .related {
                margin-top: 80px;
                .head {
                    h2 {
                        font-size: 28px;
                    }
                }
            }
        }
    }
}
@media screen and (max-width: 767px) {
    main {
        .product {
            width: calc(100% - 32px);
            .summary {
                grid-template-columns: minmax(0, 1fr);
                padding: 16px;
                border-radius: 16px;
                .media {
                    .gallery {
                        .tag {
                            left: -22px;
                        }
                        > .thumbs {
                            button {
                                width: 80px;
                                height: 56px;
                            }
                        }
                        .lightbox {
                            &:has(.thumbs) {
                                --thumb-space: 68px;
                            }
                            .picture {
                                border-radius: 16px;
                                .close {
                                    top: 12px;
                                    right: 12px;
                                }
                            }
                            .thumbs {
                                margin-top: 12px;
                                button {
                                    width: 80px;
                                    height: 56px;
                                }
                            }
                        }
                    }
                }
                .info {
                    gap: 16px;
                    .details {
                        h1 {
                            font-size: 22px;
                        }
                    }
                    .order {
                        padding: 12px;
                        .controls {
                            display: grid;
                            grid-template-columns: minmax(0, 1fr);
                            .quantity-group {
                                width: 100%;
                            }
                        }
                        .totals {
                            .amount {
                                .label, .value {
                                    font-size: 18px;
                                    line-height: 22px;
                                }
                            }
                        }
                    }
                    .purchase {
                        flex-direction: column;
                        .add-cart, .bill, .sample {
                            flex: none;
                            width: 100%;
                        }
                    }
                }
            }
            .information {
                .tabs {
                    margin-bottom: 16px;
                    button {
                        padding: 10px 12px;
                    }
                }
                .specifications {
                    dl {
                        > div {
                            gap: 12px;
                            padding: 10px 0;
                        }
                    }
                    dt, dd {
                        flex: 1;
                    }
                }
                .content {
                    p, li {
                        line-height: 20px;
                    }
                    > p:first-child {
                        font-size: 16px;
                        line-height: 22px;
                    }
                }
                .video {
                    gap: 24px;
                    .review {
                        grid-template-columns: minmax(0, 1fr);
                        gap: 16px;
                        .player {
                            .preview {
                                gap: 12px;
                                padding: 32px 12px 12px;
                                .caption {
                                    strong {
                                        font-size: 14px;
                                        line-height: 18px;
                                    }
                                }
                            }
                        }
                        .chapters {
                            li {
                                align-items: flex-start;
                                gap: 12px;
                            }
                        }
                    }
                }
            }
            .conditions {
                flex-direction: column;
                gap: 8px;
                .item {
                    flex: none;
                    padding: 16px;
                    h2 {
                        font-size: 16px;
                    }
                    p {
                        font-size: 14px;
                    }
                }
            }
            .related {
                margin-top: 60px;
                .head {
                    margin-bottom: 20px;
                    h2 {
                        font-size: 22px;
                    }
                }
            }
        }
    }
}