salla-mini-checkout-widget {
    --salla-primary-color: #D4AF37 !important;
    --salla-primary-color-hover: #AA841D !important;
}

salla-mini-checkout-widget::part(button) {
    background-color: #D4AF37 !important;
    border-radius: 50px !important;
    height: 60px !important;
    font-weight: bold !important;
}

<script type="module" src="https://cdn.assets.salla.network/prod/@salla.sa/fast-checkout-widget/v0.0.25/widget.esm.js"></script>

<salla-mini-checkout-widget
  store-id="653303266"
  products="[2141860359]"
  language="ar"
></salla-mini-checkout-widget>

/* 2. تكبير المنتج ليمتد بملء عرض الشاشة (100%) */
.home .s-block-container, 
.home .s-product-card-entry, 
.home .s-product-card {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 3. تكبير الصورة لتصبح ضخمة وتاركة للفراغات */
.home .s-product-card-image img {
    width: 100% !important;
    max-height: 700px !important; /* زيادة الارتفاع ليعطي هيبة للمنتج */
    object-fit: contain !important;
    border-radius: 0 !important;
}

/* 4. تكبير زر السلة ليكون عريضاً ومتناسقاً مع حجم المنتج الجديد */
.home .btn-add-to-cart {
    width: 90% !important;
    height: 65px !important; /* زر ضخم واحترافي */
    font-size: 22px !important;
    font-weight: bold !important;
    margin: 20px auto !important;
    display: flex !important;
    border-radius: 50px !important;
}

/* 5. تصغير قسم الآراء لكي لا يطغى على المنتج */
.home .s-reviews-container, .home .s-block-reviews {
    max-width: 800px !important;
    margin: 40px auto !important;
    transform: scale(0.9); /* تصغير القسم قليلاً */
}
/* إعطاء مساحة تنفس بين المنتج وقسم الآراء */
.s-block {
    margin-bottom: 60px !important;
}
/* جعل الخطوط في الأسفل أوضح وأكثر ترتيباً */
.footer-main {
    border-top: 1px solid #f0f0f0;
    padding-top: 40px;
}

.s-block-featured-product .s-block__title {
    margin: 0 auto !important;
    text-align: center !important;
}

/* ترتيب الفوتر ليكون منظماً في أعمدة */
footer.footer-main .footer-inner {
    display: flex !important;
    justify-content: space-around !important;
    flex-wrap: wrap !important;
    text-align: right !important;
}