.constructor-container {
		    background: rgba(255, 255, 255, 0.95);
		    border-radius: 20px;
		    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
		    overflow: hidden;
		}

		.pizza-preview {
		    background: #f8f9fa;
		    padding: 30px;
		    text-align: center;
		    position: relative;
		}

		.pizza-base {
		    width: 340px;
		    height: 340px;
		    border-radius: 50%;
		    background: url(/images/ingredients/testo.webp);
		    background-size: cover;
		    background-position: center;
		    background-repeat: no-repeat;
		    margin: 0 auto 20px;
		    position: relative;
		}

		/* Адаптивность для мобильных устройств */
		@media (max-width: 768px) {
		    .pizza-base {
		        width: 280px;
		        height: 280px;
		    }
		    
		    .pizza-constructor-container {
		        padding: 20px 15px;
		    }
		    
		    .pizza-preview {
		        margin-bottom: 0px;
				padding: 6px;
		    }
		}

		.ingredient-layer {
		    position: absolute;
		    top: 0;
		    left: 0;
		    width: 100%;
		    height: 100%;
		    border-radius: 50%;
		    pointer-events: none;
		}

		/* Z-index для каждого слоя */
		.sauce-layer {
		    z-index: 1;
		}

		.cheese-base-layer {
		    z-index: 2;
		}

		.meat-layer {
		    z-index: 3;
		}

		.fish-layer {
		    z-index: 4;
		}

		.other-layer {
		    z-index: 5;
		}

		.vegetables-layer {
		    z-index: 6;
		}

		.cheese-top-layer {
		    z-index: 7;
		}

		.spices-layer {
		    z-index: 8;
		}

		.ingredient-item {
		    position: absolute;
		    top: 0;
		    left: 0;
		    width: 100%;
		    height: 100%;
		    border-radius: 50%;
		    background-size: cover;
		    background-position: center;
		    background-repeat: no-repeat;
		    pointer-events: none;
		}

		.ingredients-panel {
		    background: white;
		    padding: 30px;
		    max-height: 80vh;
		    overflow-y: auto;
		}

		/* Tabs for constructor (mobile-first) */
		.constructor-tabs {
		    display: none;
		    margin-bottom: 10px;
		}
		.tabs-header {
		    display: flex;
		    gap: 8px;
		    overflow-x: auto;
		    -webkit-overflow-scrolling: touch;
		    padding-bottom: 8px;
		}
		.tab-btn {
		    white-space: nowrap;
		    border: 1px solid #e9ecef;
		    background: #fff;
		    padding: 3px 10px;
		    border-radius: 20px;
		    font-size: 13px;
		}
		.tab-btn.active {
		    border-color: #28a745;
		    background: #f0fff4;
		}
		.tab-content { display: block; }

		@media (max-width: 768px) {
		    .constructor-tabs { display: block; }
		    /* Прячем заголовки категорий на мобиле, оставляя только внутри активного таба */
		    #ingredientsContainer .category-section { display: none; }
		    #ingredientsContainer .category-section.active { display: block; }
		    .ingredients-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
		}


		.category-section {
		    margin-bottom: 30px;
		}

		.category-title {
		    background: linear-gradient(45deg, #cd2729, #a51319);
		    color: white;
		    padding: 7px 14px;
		    border-radius: 10px;
		    margin-bottom: 11px;
		    font-weight: bold;
		    font-size: 16px;
		}

		.ingredients-grid {
		    display: grid;
		    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
		    gap: 13px;
		    align-items: start;
		}

		.ingredient-card {
		    background: white;
		    border: 2px solid #e9ecef;
		    border-radius: 15px;
		    padding: 8px;
		    text-align: center;
		    cursor: pointer;
		    transition: all 0.3s ease;
		    position: relative;
		    min-height: 180px;
		    display: flex;
		    flex-direction: column;
		    justify-content: space-between;
		}

		/* Info tooltip */
		.ingredient-info {
		    position: absolute;
		    top: 8px;
		    right: 8px;
		    z-index: 2;
		}
		.info-btn {
		    display: inline-flex;
		    align-items: center;
		    justify-content: center;
		    width: 18px;
		    height: 18px;
		    border-radius: 50%;
		    background: #e9ecef;
		    color: #333;
		    font-weight: 700;
		    font-size: 12px;
		    line-height: 1;
		}


		@media (max-width: 768px) {
		    .info-btn { width: 20px; height: 20px; font-size: 12px; }
		}


		.ingredient-card:hover {
		    border-color: #667eea;
		    transform: translateY(-5px);
		    box-shadow: 0 10px 20px rgba(102, 126, 234, 0.2);
		}

		.ingredient-card.selected {
		    border-color: #28a745;
		    background: #f8fff9;
		}

		.ingredient-image {
		    width: 80px;
		    margin: 0 auto 10px;
		    display: flex;
		    align-items: center;
		    justify-content: center;
		    overflow: hidden;
		    position: relative;
		}

		.ingredient-image img {
		    width: 100%;
		    height: 100%;
		    object-fit: cover;
		    border-radius: 50%;
		}

		.ingredient-fallback {
		    width: 100%;
		    height: 100%;
		    display: flex;
		    align-items: center;
		    justify-content: center;
		    font-size: 30px;
		    color: #495057;
		}

		/* Адаптивность для мобильных устройств */
		@media (max-width: 768px) {
		    .ingredients-grid {
		        grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
		        gap: 10px;
		    }
		    
		    .ingredient-card {
		        min-height: 120px;
		        padding: 8px;
		    }
		    
		    .ingredient-image {
		        width: 40px;
		        height: 40px;
		    }
		    
		    .ingredient-name {
		        font-size: 11px;
		        min-height: 25px;
		        line-height: 1.2;
		    }
		    
		    .ingredient-meta {
		        font-size: 11px;
		    }
		    .ingredient-meta .ingredient-weight { font-size: 9px; }
		    .ingredient-meta .ingredient-price { font-size: 13px!important; }
		}

		.ingredient-name {
    font-weight: bold;
    margin-bottom: 0px;
    font-size: 13px;
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 22px;
}

		.ingredient-meta {
		    display: flex;
		    align-items: center;
		    justify-content: center;
		    gap: 4px;
		    font-size: 15px;
		}

		.ingredient-meta .ingredient-weight {
		    color: #6c757d;
		    font-size: 12px;
		    font-weight: 400;
		}

		.ingredient-meta .ingredient-price {
		    color: #28a745;
		    font-size: 16px;
		    font-weight: 700;
		}

		.price-summary {
		    background: linear-gradient(45deg, #28a745, #20c997);
		    color: white;
		    padding: 11px;
		    border-radius: 15px;
		    margin-bottom: 10px;
		}

		.total-price {
		    font-size: 21px;
			margin-bottom: 20px;
		    font-weight: bold;
		}

		@media (max-width: 768px) {
		  .price-summary {
		        padding: 5px;
		        border-radius: 10px;
		        margin-bottom: 0px;
		    }
		    .ingredients-panel {
		    background: white;
		    padding: 5px 5px 0px 5px;
		    max-height: 80vh;
		    overflow-y: auto;
		}
		    .total-price {
		        font-size: 16px;
		        margin-bottom: 15px;
		    }
		    .selected-count {
		        font-size: 11px;
		    }
		    .base-price {
		        padding: 7px !important;
		        border-radius: 8px;
		        margin-bottom: 6px !important;
		    }
		    .base-price .price {
		        font-size: 16px!important;
		    }
		    .add-to-cart-btn {
		        padding: 8px 12px;
		        border-radius: 15px;
		        font-size: 13px;
		        min-height: 40px;
		    }
		}

		.selected-ingredients {
		    background: #f8f9fa;
		    padding: 20px;
		    border-radius: 15px;
		}

		.selected-ingredient {
		    display: grid;
		    grid-template-columns: 1fr auto 24px;
		    align-items: center;
		    gap: 10px;
		    padding: 4px 0;
		    border-bottom: 1px solid #dee2e6;
		}
		.selected-ingredient .ingredient-name {
		    min-width: 0;
		    word-break: break-word;
		}
		.selected-ingredient .ingredient-price {
		    white-space: nowrap;
		}

		.selected-ingredient:last-child {
		    border-bottom: none;
		}

		.remove-ingredient {
		    background: #dc3545;
		    color: white;
		    border: none;
		    border-radius: 50%;
		    width: 20px;
		    height: 20px;
		    display: flex;
		    align-items: center;
		    justify-content: center;
		    cursor: pointer;
		    transition: all 0.3s ease;
		}
		.remove-ingredient i {
		    font-size: 12px;
		    line-height: 1;
		}

		.remove-ingredient:hover {
		    background: #c82333;
		    transform: scale(1.1);
		}

		.add-to-cart-btn {
		    background: linear-gradient(45deg, #28a745, #20c997);
		    border: none;
		    color: white;
		    padding: 15px 30px;
		    border-radius: 25px;
		    font-size: 18px;
		    font-weight: bold;
		    cursor: pointer;
		    transition: all 0.3s ease;
		    width: 100%;
		}

		.add-to-cart-btn:hover {
		    transform: translateY(-2px);
		    box-shadow: 0 10px 20px rgba(40, 167, 69, 0.3);
		}

		.add-to-cart-btn:disabled {
		    background: #6c757d;
		    cursor: not-allowed;
		    transform: none;
		    box-shadow: none;
		}

		.base-price {
		    background: #e9ecef;
		    padding: 10px;
		    border-radius: 10px;
		    text-align: center;
		    margin-bottom: 9px;
		}

		.base-price .price {
		    font-size: 20px;
		    font-weight: bold;
		    color: #495057;
		}

		@media (max-width: 768px) {
		    .pizza-base {
		        width: 180px;
		        height: 180px;
		    }

		    .ingredient-layer {
		        width: 180px;
		        height: 180px;
		    }

		    .ingredients-grid {
		        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
		        gap: 8px;
		    }

		    .ingredient-card {
		        padding: 6px;
		        min-height: 100px;
		    }

		    .ingredient-icon {
		        width: 35px;
		        height: 35px;
		        font-size: 18px;
		    }
		}

		/* Дополнительная оптимизация для очень маленьких экранов */
		@media (max-width: 480px) {
		    .ingredients-grid {
		        grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
		        gap: 6px;
		    }
		    
		    .ingredient-card {
		        min-height: 90px;
		        padding: 4px;
		    }
		    
		    .ingredient-image {
		        width: 30px;
		        height: 30px;
		    }
		    
		    .ingredient-name {
		        font-size: 10px;
		        min-height: 20px;
		    }
		    
		    .ingredient-meta {
		        font-size: 9px;
		    }
		    
		    .add-to-cart-btn {
		        padding: 6px 10px;
		        font-size: 12px;
		        min-height: 35px;
		    }
		}
		</style>