/* =========================================
   TRIAQ PRODUCT HEADER
   Desktop = 2 Columns
   Right: Product title + Price
   Left: Rating + Sold Count
========================================= */

:root {
    --triaq-green: #3F5D43;
    --triaq-gold: #CDA579;
    --triaq-cream: #F8F4EB;
    --triaq-gray: #777777;
}


/* =========================================
   DESKTOP
========================================= */

@media (min-width: 768px) {

    .sand-main-content {
        display: grid !important;

        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr);

        grid-template-rows:
            auto
            auto;

        column-gap: 28px !important;
        row-gap: 10px !important;

        align-items: center !important;

        direction: ltr !important;
    }


    /* المحتوى العربي */
    .sand-main-content > * {
        direction: rtl;
    }


    /* =====================================
       اسم المنتج
       العمود اليمين
       يبدأ من بداية العمود بدون سنترة
    ===================================== */

    .sand-main-content > h1 {
        grid-column: 2 !important;
        grid-row: 1 !important;

        width: 100% !important;
        max-width: none !important;

        justify-self: stretch !important;

        margin: 0 !important;

        text-align: right !important;

        direction: rtl !important;
    }


    /* =====================================
       السعر
       تحت العنوان مباشرة
       بدون سنترة
    ===================================== */

    .sand-main-content > .sand-price {
        grid-column: 2 !important;
        grid-row: 2 !important;

        width: 100% !important;
        max-width: none !important;

        justify-self: stretch !important;

        margin: 0 !important;

        display: flex !important;
        align-items: center !important;

        justify-content: flex-start !important;

        gap: 10px !important;

        flex-wrap: nowrap !important;

        text-align: right !important;

        direction: rtl !important;
    }


    /* نشيل أي pseudo قديم من السعر */
    .sand-price::before,
    .sand-price::after {
        content: none !important;
        display: none !important;
    }


    /* =====================================
       التقييم
       العمود الشمال - فوق
    ===================================== */

    .sand-main-content::before {
        content: "★★★★★  (5,311 تقييم)";

        grid-column: 1 !important;
        grid-row: 1 !important;

        width: 100% !important;
        max-width: 250px !important;

        justify-self: center !important;
        align-self: center !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        box-sizing: border-box !important;

        color: var(--triaq-gold) !important;

        font-size: 13px !important;
        font-weight: 700 !important;

        line-height: 1.2 !important;

        white-space: nowrap !important;

        direction: ltr !important;

        text-align: center !important;
    }


    /* =====================================
       تم شراء
       العمود الشمال - تحت
    ===================================== */

    .sand-main-content::after {
        content: "🔥 تم شراء 236,132 مرة";

        grid-column: 1 !important;
        grid-row: 2 !important;

        width: 100% !important;
        max-width: 250px !important;

        min-height: 46px !important;

        justify-self: center !important;
        align-self: center !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        box-sizing: border-box !important;

        padding: 7px 12px !important;

        background: var(--triaq-cream) !important;

        border: 1px solid var(--triaq-green) !important;
        border-radius: 11px !important;

        box-shadow:
            0 4px 0 var(--triaq-green) !important;

        color: var(--triaq-green) !important;

        font-size: 13px !important;
        font-weight: 700 !important;

        line-height: 1.3 !important;

        direction: rtl !important;

        white-space: nowrap !important;

        text-align: center !important;
    }


    /* =====================================
       باقي عناصر المنتج
       تمارا - تابي - الكمية - الأزرار...
       ترجع Full Width
    ===================================== */

    .sand-main-content > :not(h1):not(.sand-price) {
        grid-column: 1 / -1 !important;
    }
}



/* =========================================
   MOBILE
========================================= */

@media (max-width: 767px) {

    .sand-main-content {
        display: block !important;
        direction: rtl !important;
    }


    /* نشيل نسخة الديسكتوب */
    .sand-main-content::before,
    .sand-main-content::after {
        content: none !important;
        display: none !important;
    }


    /* =====================================
       العنوان
    ===================================== */

    .sand-main-content > h1 {
        width: 100% !important;

        margin: 0 0 10px !important;

        text-align: right !important;

        direction: rtl !important;
    }


    /* =====================================
       السعر
    ===================================== */

    .sand-main-content > .sand-price {
        width: 100% !important;

        margin: 0 0 20px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;

        gap: 8px !important;

        flex-wrap: wrap !important;

        direction: rtl !important;

        text-align: right !important;
    }


    /* السعر أول حاجة */
    .sand-price > * {
        order: 1;
    }


    /* =====================================
       التقييم
    ===================================== */

    .sand-price::before {
        content: "★★★★★  (5,311 تقييم)" !important;

        order: 2;

        flex-basis: 100% !important;

        display: block !important;

        width: 100% !important;

        margin-top: 12px !important;
        margin-bottom: 10px !important;

        color: var(--triaq-gold) !important;

        font-size: 12px !important;
        font-weight: 700 !important;

        text-align: center !important;

        direction: ltr !important;

        white-space: nowrap !important;
    }


    /* =====================================
       تم شراء
    ===================================== */

    .sand-price::after {
        content: "🔥 تم شراء 236,132 مرة" !important;

        order: 3;

        flex-basis: 100% !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        max-width: 250px !important;

        min-height: 44px !important;

        margin: 0 auto 6px !important;

        padding: 7px 10px !important;

        box-sizing: border-box !important;

        background: var(--triaq-cream) !important;

        border: 1px solid var(--triaq-green) !important;
        border-radius: 10px !important;

        box-shadow:
            0 4px 0 var(--triaq-green) !important;

        color: var(--triaq-green) !important;

        font-size: 13px !important;
        font-weight: 700 !important;

        line-height: 1.3 !important;

        direction: rtl !important;

        white-space: nowrap !important;
    }
}