.modal {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 9999;
        display: none;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease;
    }

    .modal.open {
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 1;
        visibility: visible;
    }

    .modal__overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.6);
        cursor: pointer;
    }

    .modal__content {
        position: relative;
        max-width: 900px;
        width: 90%;
        background: #fff;
        border-radius: 12px;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
        z-index: 10;
        max-height: 90vh;
        overflow-y: auto;
        padding: 20px;
		font-family: "Kodchasan", sans-serif;

		@media(min-width: 768px) {
			padding: 40px;
		}
    }

    .modal__close {
        position: absolute;
        top: 20px;
        right: 20px;
        width: 40px;
        height: 40px;
        border: none;
        background: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
    }

    .modal__close-icon {
        font-size: 32px;
        line-height: 1;
        color: #333;
        transition: color 0.3s ease;
    }

    .modal__close-icon:hover {
        color: #000;
    }

    .modal__body {
        margin-top: 24px;
    }

    .modal-img img {
        width: 100%;
    object-fit: cover;
    height: 80px;
    border-radius: 16px;
    margin-bottom: 24px;
		
		@media(min-width: 768px) {
			height: 130px;
		}
    }

    .modal-title {
            margin: 0 0 12px;
    }

    .modal-description {
            margin-bottom: 12px;
		font-family: "Mulish", sans-serif;
    }

    .modal-info {
            margin-bottom: 20px;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 0 0 24px 0;
    overflow-x: auto;
    width: 100%;
font-family: "Mulish", sans-serif !important;
    }
		
		.modal-info table {
			width:100% !important;
			font-family: "Mulish" !important;
		}
		.modal-info td {
			font-family: "Mulish" !important;
		}
		
		.modal-row {
			display:flex;
			flex-direction: column;
			gap: 20px;
			
			@media(min-width: 768px) {
				flex-direction: row;
			justify-content: space-between;
			align-items: center;
			}
		}
		
		.modal-column {
			display:flex;
			flex-direction: column;
			
			> p {
				font-weight: 700;
			}
			
			@media(min-width: 768px) {
				
					width: 100%;
			}
		}

    .modal-packaging {
font-family: "Mulish", sans-serif;
    }

    /* Скролл для модалки */
    .modal__content::-webkit-scrollbar {
        width: 8px;
    }

    .modal__content::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 4px;
    }

    .modal__content::-webkit-scrollbar-thumb {
        background: #888;
        border-radius: 4px;
    }

    .modal__content::-webkit-scrollbar-thumb:hover {
        background: #555;
    }