/* ============================================================
   Design By @Pixeez
   ============================================================ */


/* ============================================================
   1. CSS VARIABLES (المتغيرات)
   ============================================================ */
:root {
  --prand-main-color:       #EFECD6;
  --prand-dark-green-color: #B4AA57;
  --prand-dark-burgundy-color: #8E1B50;
}


/* ============================================================
   2. BUTTONS (الأزرار)
   ============================================================ */

.art-banner-header{
  justify-content: start !important;
}



.art-banner-button,
.art-text-button {
  padding-top:    .5rem;
  padding-bottom: .5rem;
  border-radius: 8px;
  font-size: 14px;
}

.s-products-list .s-product-card-content-footer .s-button-btn,
.s-products-slider-slider .s-product-card-content-footer .s-button-btn {
  padding: 0 !important;
  background-color: var(--prand-dark-burgundy-color) !important;
  border-radius: 8px !important;
}

.s-button-btn:hover {
  border: 1px solid var(--prand-dark-burgundy-color) !important;
}


/* ============================================================
   3. BEST OFFERS SLIDER (سلايدر أفضل العروض)
   ============================================================ */
.art-product-slider-custom {
  margin-top: 1rem;
  border-top-left-radius: 45px;
  border-top-right-radius: 45px;
  background-color: var(--prand-main-color);
}

.art-product-slider-custom .s-slider-block__title .s-slider-block__title-right h2 {
  font-weight: 700 !important;
}

#slider-with-bg-1 > div.swiper.s-slider-container.swiper-initialized.swiper-horizontal.swiper-rtl.swiper-android.swiper-backface-hidden {
  margin-block: 4rem;
}

art-product-slider-custom


/* ============================================================
   4. PRODUCT CARDS (بطاقات المنتجات)
   ============================================================ */
.s-products-list .s-slider-swiper-wrapper .s-product-card-entry,
.s-products-list .s-products-list-wrapper .s-product-card-entry,
.s-products-slider-slider .s-slider-swiper-wrapper .s-product-card-entry,
.s-products-slider-slider .s-products-list-wrapper .s-product-card-entry {
  border-radius: 8px !important;
  background-color: #fff !important;
}

.s-products-list .s-slider-swiper-wrapper .s-product-card-entry .s-product-card-image,
.s-products-list .s-products-list-wrapper .s-product-card-entry .s-product-card-image,
.s-products-slider-slider .s-slider-swiper-wrapper .s-product-card-entry .s-product-card-image,
.s-products-slider-slider .s-products-list-wrapper .s-product-card-entry .s-product-card-image {
  border-radius: 8px !important;
}

.s-product-card-fit-height .s-product-card-image {
    height: 15rem;
    max-height: 17rem;
}


/* ============================================================
   5. TEXT WITH PHOTO SECTION (قسم النص مع الصورة)
   ============================================================ */
.art-text-with-photo {
  background-color: var(--prand-main-color);
}

section.art-text-with-photo > div > div {
  background-color: #fff;
  border-radius: 40px !important;
}

section.art-text-with-photo > div > div > div.flex.flex-col.gap-4.lg\:px-10.order-last {
  align-items: center;
  margin-bottom: 1rem;
  gap: 0;
}

/* إزالة طبقة التعتيم الداكنة */
.after\:bg-black\/20::after {
  content: var(--tw-content);
  background-color: unset;
}

/* إلغاء الإزاحة الافتراضية */
.rtl\:-translate-x-2:where([dir="rtl"], [dir="rtl"] *) {
  --tw-translate-x: 0rem !important;
}

.ltr\:-translate-x-2:where([dir="ltr"], [dir="ltr"] *) {
    --tw-translate-x: 0rem !important;
    transform: translate(0rem, var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.ltr\:translate-x-2:where([dir="ltr"], [dir="ltr"] *) {
  --tw-translate-x: 0rem !important;
    transform: translate(0rem, var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}


/* حاوية الصورة الرئيسية */
section.art-text-with-photo.h-full.w-full.relative.overflow-hidden.lg\:px-10.md\:px-5.px-1.lg\:py-9.md\:py-7.py-5.block.block
  > div > div
  > div.grid.w-full.h-full.grid-cols-8.grid-rows-3.items-center.justify-center.order-first
  > div.col-span-4.row-span-3.md\:rtl\:-translate-x-10.rtl\:-translate-x-2.md\:ltr\:translate-x-10.ltr\:translate-x-2.relative.z-20 {
  grid-column: span 8 / span 8;
  width: 100%;
  height: 400px;
  max-height: 700px;
  overflow: hidden;
}

/* إخفاء العنصر الثانوي */
#app > div.app-inner.flex.flex-col.min-h-full
  > section.art-text-with-photo.h-full.w-full.relative.overflow-hidden.lg\:px-10.md\:px-5.px-1.lg\:py-9.md\:py-7.py-5.block.block
  > div > div
  > div.grid.w-full.h-full.grid-cols-8.grid-rows-3.items-center.justify-center.order-first
  > div.col-span-4.row-span-2.relative.z-10.rtl\:translate-x-2.ltr\:-translate-x-2 {
  display: none;
}


/* ============================================================
   6. DESCRIPTION TEXT (نص الوصف)
   ============================================================ */
.art-text-description {
  text-align: center;
  max-width: 400px;
}

.art-text-title {
  font-weight: 700 !important;
}


/* ============================================================
   7. IMAGES (الصور)
   ============================================================ */
section.art-text-with-photo > div > div > div > div > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* object-position: top center; */
  
  border-radius: 24px !important;
}

#app > div.app-inner.flex.flex-col.min-h-full > section > div > div > div.grid.w-full.h-full.grid-cols-8.grid-rows-3.items-center.justify-center.order-first {
  grid-template-rows: repeat(1, minmax(0, 1fr)) !important;
  grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
}

#app > div.app-inner.flex.flex-col.min-h-full > section > div > div > div.grid.w-full.h-full.grid-cols-8.grid-rows-3.items-center.justify-center.order-first > div.col-span-4.row-span-3.md\:rtl\:-translate-x-10.rtl\:-translate-x-2.md\:ltr\:translate-x-10.ltr\:translate-x-2.relative.z-20 {
      padding: 1rem !important;
}

/* ============================================================
   8. عن Pieces ؟ (من بيسزز)
   ============================================================ */
#app > div.app-inner.flex.flex-col.min-h-full > section.art-banner-2.h-screen.w-full.relative.bg-no-repeat.bg-center.bg-cover.bg-origin-border.overflow-hidden.after\:absolute.after\:top-0.after\:left-0.after\:w-full.after\:h-full.after\:bg-black\/20.after\:z-30.lg\:px-10.md\:px-5.px-1.lg\:py-9.md\:py-7.py-5.block.block > div > div > h4 {
      font-weight: 700;
}

#app > div.app-inner.flex.flex-col.min-h-full > section.art-banner-2.h-screen.w-full.relative.bg-no-repeat.bg-center.bg-cover.bg-origin-border.overflow-hidden.after\:absolute.after\:top-0.after\:left-0.after\:w-full.after\:h-full.after\:bg-black\/20.after\:z-30.lg\:px-10.md\:px-5.px-1.lg\:py-9.md\:py-7.py-5.block.block > div > div {

  border-radius: 24px;
    background-color: #ffffff;
    opacity: 0.8;

}


/* ============================================================
   9. gift Section ؟ (هدية )
   ============================================================ */

.art-text-with-photo {
  background-color: var(--prand-main-color);
}

/* سيستهدف الديف رقم 17 من هذا النوع */
.art-text-with-photo.h-full.w-full.relative.overflow-hidden:nth-of-type(17) {
  background-color: #fff !important;
}

div.app-inner.flex.flex-col.min-h-full > section:nth-child(17) > div > div > div.flex.flex-col.gap-4.lg\:px-10.order-last > h2,
div.app-inner.flex.flex-col.min-h-full > section:nth-child(17) > div > div > div.flex.flex-col.gap-4.lg\:px-10.order-last > p{
  color : #93853C !important;
}



/* ============================================================
   10. footer
   ============================================================ */
.store-footer.art-store-footer {
border-top-left-radius: 45px;
  border-top-right-radius: 45px;
  position: relative;
  
}


.store-footer.art-store-footer::before {
  content: "";
  position: absolute;
  top: 0px;    
  left: 0px;  
  right: 0px;  
  bottom: 0px; 
  background-color: var(--prand-main-color);
   z-index: -1;
}

/* ============================================================
   11. RESPONSIVE - MOBILE (الجوال — أقل من 768px)
   ============================================================ */
@media (max-width: 767px) {

  .s-products-slider-card {
    padding-block: 1.5rem;
    width: 100%;
    max-width: 280px;
    padding-left:  0.5rem;
    padding-right: 0.5rem;
  }

  section.art-text-with-photo {
    padding-top: 4rem;
  }

  #slider-with-bg-1 > div.swiper.s-slider-container.swiper-initialized.swiper-horizontal.swiper-rtl.swiper-android.swiper-backface-hidden {
    margin-block: 4rem;
  }

}

/* ============================================================
   12. RESPONSIVE - MOBILE (الجوال —  اعلى  من 1280)
   ============================================================ */
@media (min-width: 1280px) {
    .container {
        max-width: 100%;
    }
}



/* ============================================================
   12. Product Page ( صفحة المنتج)
   ============================================================ */


.main-content.art-main-content{
  background-color: var(--prand-main-color)!important;
  border-radius: 24px;
}
.s-comments-product {
  background-color: #fff !important;

  
}

div.product__descriptionp > article.article--main > p.ql-align-center.ql-direction-rtl > strong {
 color: #8E1B50 !important;
}
div.main-content.art-main-content.md\:sticky.md\:overflow-hidden.top-24.w-full.md\:w-3\/6.md\:pb-16 > div.product__description.p-2.px-5.sm\:p-1.leading-7.mb-3 > article > p > span {
   color: #8E1B50 !important;
}


/* ============================================================
   12. Help Page ( صفحة المساعدة)
   ============================================================ */
main ,.title-section ,.btn-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #8D1C50;
    /* background-color:#EFECD6; */
        gap: 1rem;
}
.btn-section , .title-section{

    width: 80%;
}

.title-section,h2,h1,p,h4{
    padding: 0;
    margin: 0;
    text-align: center;
}


    .help-btn {
    text-align: center;
	background-color: #8D1C50;
	border-radius:6px;
	display:inline-block;
	cursor:pointer;
	color:#EFECD6;
	font-family:Arial;
	font-size:17px;
    width: clamp(300px, 100%, 800px);
	padding:14px 0px;
	text-decoration:none;
    border: 2px solid #8D1C50;
  
}
.help-btn:hover {
	background-color:#EFECD6;
    border: 2px solid #8D1C50;
    color: #8D1C50;
}
.help-btn:active {
	position:relative;
	top:1px;
}