:root { --primary: #055541; --secondary: #6c757d; --accent: #ff4757; }

    .product-container { background: #fff; border-radius: 20px; padding: 20px; }



    /* خيارات الألوان والمقاسات */
    .variant-picker { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 10px; }

    .color-option {
        width: 38px; height: 38px; border-radius: 50%;
        border: 3px solid #eee; cursor: pointer; transition: 0.3s; position: relative;
    }
    .color-option.active { border-color: var(--primary); transform: scale(1.1); }
    .color-option.active::after {
        content: '\f00c'; font-family: 'Font Awesome 5 Free'; font-weight: 900;
        position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
        color: white; font-size: 10px; text-shadow: 0 0 3px rgba(0,0,0,0.5);
    }

    .size-option {
        min-width: 50px; height: 45px; border: 1px solid #ddd;
        display: flex; align-items: center; justify-content: center;
        border-radius: 10px; cursor: pointer; font-weight: bold; transition: 0.2s;
    }
    .size-option:hover { border-color: var(--primary); background: #f0f7ff; }
    .size-option.active { background: var(--primary); color: white; border-color: var(--primary); }

    /* الأزرار والكمية */
    .qty-input-group {
        display: flex; align-items: center; background: #f8f9fa;
        border-radius: 50px; padding: 5px; border: 1px solid #eee;
    }
    .qty-btn {
        width: 35px; height: 35px; border-radius: 50%; border: none;
        background: #fff; display: flex; align-items: center; justify-content: center;
        box-shadow: 0 2px 5px rgba(0,0,0,0.05); transition: 0.2s;
    }
    .qty-btn:hover { background: var(--primary); color: white; }
    .qty-val { width: 45px; text-align: center; border: none; background: transparent; font-weight: bold; }

    .btn-add-main {
        background: var(--primary); color: #fff; border: none;
        padding: 15px 30px; border-radius: 12px; font-weight: bold;
        transition: 0.3s; flex-grow: 1;
    }
    .btn-add-main:hover { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(5, 85, 65, 0.2); color: #fff; }

    /* التنبيهات */
    .toast-success, .toast-error {
        position: fixed; top: 20px; left: 20px; padding: 15px 25px;
        width: 300px;
        border-radius: 12px; display: none; z-index: 9999; color: white; box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    }
    .toast-success { background: #2ecc71; }
    .toast-error { background: #e74c3c; }
    /* جعل الحاوية تأخذ الحيز بالكامل */
    .main-image-wrapper {
        width: 100%;
        height: 550px; /* الارتفاع الكبير للشاشات الواسعة */
        background: #fdfdfd;
        border-radius: 15px;
        overflow: hidden;
        position: relative;
        cursor: crosshair;
    }

    /* جعل الصورة تغطي المساحة بالكامل */
    .main-image-wrapper img {
        width: 100%;
        height: 100%;
        object-fit: cover; /* تجعل الصورة تمتد لتغطي الإطار بالكامل */
        object-position: center;
        transition: transform 0.3s ease-out; /* حركة ناعمة عند الزووم */
    }

    .main-image-wrapper:hover img {
        transform: scale(1.5);
    }

    .img-thumb {
        width: 80px; height: 80px; cursor: pointer; border: 2px solid #eee;
        border-radius: 12px; overflow: hidden; transition: 0.3s; opacity: 0.7;
    }
    .img-thumb:hover, .img-thumb.active { opacity: 1; border-color: var(--primary); transform: translateY(-3px); }


    .main-image-wrapper {
        perspective: 1000px;
    }
    @media (max-width: 767px) {
        .main-image-wrapper {
            height: 350px; /* تصغير الارتفاع في الموبايل */
            border-radius: 10px; /* تنعيم الحواف بشكل يتناسب مع الموبايل */
            margin-bottom: 15px;
        }

        .img-thumb {
            width: 60px; /* تصغير الصور المصغرة أيضاً لتناسب عرض الشاشة */
            height: 60px;
        }

        /* إلغاء تأثير الزووم في الموبايل لأنه بيضايق المستخدم عند السحب باللمس */
        .main-image-wrapper:hover img {
            transform: none !important;
        }
    }