/*
 * CSS Code to force WooCommerce Variation Attribute Labels
 * to appear on a separate line above the Swatches/Options.
 * This overrides the default table layout (side-by-side).
 */
/*
 * كود CSS لإجبار عناوين خصائص المنتج (Attribute Labels) في ووكومرس
 * على الظهور في سطر منفصل فوق خيارات الاختيار (Swatches/Options).
 * هذا يتجاوز التنسيق الافتراضي للجدول (جنبًا إلى جنب).
 */

/*
 * Target the main variations table container to increase selector specificity.
 * This selector is often used to ensure the styles apply only to the product summary area.
 */
/*
 * استهداف الحاوية الرئيسية لجدول الخيارات لزيادة قوة المحدد.
 * هذا المحدد يضمن تطبيق التنسيقات فقط على منطقة ملخص المنتج.
 */
.product .summary .variations {
    /* No direct styles needed here, but the selector is crucial for specificity. */
    /* لا حاجة لتنسيقات مباشرة هنا، لكن المحدد ضروري لزيادة القوة. */
}

/*
 * Target the table row (<tr>) which contains both the label and the options.
 * Forcing it to 'display: block' makes it take up the full width,
 * effectively separating it from other rows/elements.
 */
/*
 * استهداف صف الجدول (<tr>) الذي يحتوي على كل من العنوان والخيارات.
 * إجباره على 'display: block' يجعله يشغل العرض الكامل،
 * مما يفصله بفعالية عن الصفوف/العناصر الأخرى.
 */
.product .summary .variations tr {
    display: block; /* Force the row to be a block element (full width) */
    /* إجبار الصف على أن يكون عنصرًا كتليًا (عرض كامل) */
    margin-bottom: 10px; /* Add space between different attributes */
    /* إضافة مسافة بين الخصائص المختلفة */
}

/*
 * Target the table header cell (<th>) which holds the attribute label.
 * Forcing it to 'display: block' ensures it occupies its own line.
 */
/*
 * استهداف خلية رأس الجدول (<th>) التي تحمل عنوان الخاصية.
 * إجبارها على 'display: block' يضمن أنها تشغل سطرًا خاصًا بها.
 */
.product .summary .variations th.label {
    display: block; /* Force the label to be a block element (full width) */
    /* إجبار العنوان على أن يكون عنصرًا كتليًا (عرض كامل) */
    font-weight: bold; /* Make the label text bold for better visibility */
    /* جعل نص العنوان عريضًا لتحسين الرؤية */
    padding-bottom: 5px; /* Add space below the label before the options start */
    /* إضافة مسافة أسفل العنوان قبل بدء الخيارات */
}

/*
 * Target the table data cell (<td>) which holds the swatches/options.
 * Forcing it to 'display: block' ensures it starts on a new line below the label.
 */
/*
 * استهداف خلية بيانات الجدول (<td>) التي تحمل خيارات الاختيار (Swatches/Options).
 * إجبارها على 'display: block' يضمن أنها تبدأ في سطر جديد أسفل العنوان.
 */
.product .summary .variations td.value {
    display: block; /* Force the options cell to be a block element */
    /* إجبار خلية الخيارات على أن تكون عنصرًا كتليًا */
    padding-left: 0; /* Remove any default left padding from the table cell */
    /* إزالة أي حشوة يسارية افتراضية من خلية الجدول */
}