/*------------------------------------------
  Global Typography
-------------------------------------------*/
*,
.s-add-product-button-mini-checkout-content,
.s-button-text,
.s-comment-form-input,
button,
span,
p,
a,
div,
h1, h2, h3, h4, h5, h6 {
  font-family: 'BrokenBox', sans-serif !important;
}

@media screen and (max-width: 768px) {
  body {
    font-family: 'BrokenBox', sans-serif !important;
  }

  .s-button-text,
  .s-comment-form-input,
  .s-add-product-button-mini-checkout-content {
    font-family: 'BrokenBox', sans-serif !important;
  }
}

/*------------------------------------------
  Buttons Styling
-------------------------------------------*/

/* Global button style */
.s-button-element {
  background-color: #000000 !important;
  color: #ffffff !important;
  border: 1px solid #000000 !important;
  padding: 12px 20px;
  font-size: 16px;
  border-radius: 5px !important;
  cursor: pointer;
}

/* Wishlist Button */
.btn--wishlist.s-button-element {
  background-color: #ffffff !important;
  color: #000000 !important;
  border: 1px solid #000000 !important;
  padding: 10px 15px;
  font-size: 16px;
  cursor: pointer;
}

/* Add to Cart Button – Solid Version */
.s-button-element.s-button-btn.s-button-solid.s-button-wide.s-button-primary {
  background-color: #ffffff !important;
  color: #000000 !important;
  border: 1px solid #000000 !important;
  font-weight: bold;
  padding: 12px 20px;
  font-size: 16px;
  cursor: pointer;
  position: relative !important;
  z-index: 5 !important;
}

.s-button-element.s-button-btn.s-button-solid.s-button-wide.s-button-primary .s-button-text {
  color: #000000 !important;
}

salla-mini-checkout-widget .s-add-product-button-mini-checkout-content,
salla-mini-checkout-widget .s-add-product-button-mini-checkout-content span {
  color: #000000 !important;
  font-weight: bold !important;
}

/* Submit Button inside salla-button */
salla-button .s-button-element.s-button-btn.s-button-solid.s-button-primary .s-button-text {
  color: #000000 !important;
  font-weight: bold !important;
}

/* Price Text Styling */
h4.text-\[var\(--color-primary\)\] {
  color: #ff0000 !important;
  font-weight: bold !important;
}

.total-price {
  color: #000000 !important;
  font-weight: bold !important;
}

h3.text-\[var\(--color-primary-reverse\)\] {
  color: White !important;
  text-shadow: 1.5px 1.5px 5px rgba(0, 0, 0, 0.7) !important;
  font-weight: bold !important;
}

/* Heart Icon in Button Text
   ✅ تعديل مهم: خلي الـ SVG يتبع لون النص/الزر بدل تثبيته أسود
*/
.s-button-text svg {
  fill: currentColor !important;
  stroke: currentColor !important;
  color: currentColor !important;
}

/*------------------------------------------
  Additional Elements Styling
-------------------------------------------*/

/* Promotion Title (e.g., "30%") */
.art-promotion-title {
  border-radius: 5px !important;
  padding: 5px 10px;
  background-color: rgba(0, 0, 0, 0.1);
}

/* Sticky Product Bar */
.sticky-product-bar {
  position: static; /* كان default (غير صحيح في CSS) */
}

.is-sticky-product-bar .sticky-product-bar {
  z-index: 10 !important;
}

/* Localization Modal Input */
.s-localization-modal-input:checked {
  background-color: #000000 !important;
  accent-color: #000000 !important;
}

/* Modal Close Icon */
.s-modal-close svg path {
  fill: #000000 !important;
}

/* Form Controls */
.art-main-content .art-product-form salla-product-options .s-form-control {
  /* empty as in your original */
}

.s-form-control {
  border: 1.5px solid #ccc !important;
  padding: 10px;
  font-size: 16px;
  color: #000;
  position: relative;
}

/* Remove Shadows */
.shadow-md {
  --tw-shadow: none !important;
  box-shadow: none !important;
}

/* Close Button */
.btn--close {
  color: black !important;
  background-color: transparent !important;
  border: none !important;
}

/* Comments Section */
.s-comments-product {
  background-color: #ffffff !important;
  color: #000000 !important;
}

/* Hide Product Grid (إذا لزم الأمر) */
.grid.grid-cols-1.lg\:grid-cols-3 {
  display: none !important;
}

/* Page Main Title Margin */
#page-main-title {
  margin: 5px;
}

/* Loader/ Button Centering (Force Center) */
#force-center {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

#force-center img {
  display: block;
  margin: 0 auto;
}

/* Removing Shadow from Loader Center Button */
.s-button-element.s-button-btn.s-button-solid.s-button-primary.s-button-loader-center {
  background-color: transparent !important;
}

.undefined.s-button-element.s-button-btn.s-button-solid.s-button-primary.s-button-loader-center {
  z-index: 5 !important;
}

.s-modal-body.s-modal-align-middle.s-modal-xs.s-modal-padding.s-modal-entering {
  z-index: 1000 !important;
}

.s-comment-form-content {
  display: none !important;
}

.s-button-element.s-button-link.s-button-solid.s-button-primary-link.s-button-loader-after {
  padding: 10px !important;
}

.art-text-button {
  border-radius: 5px !important;
}

.undefined.s-button-element.s-button-btn.s-button-solid.s-button-wide.s-button-primary.s-button-loader-center.s-button-text {
  color: #000 !important;
}

.undefined.s-button-element.s-button-btn.s-button-solid.s-button-wide.s-button-primary.s-button-loader-center {
  border-radius: 5px !important;
  background-color: #000 !important; /* لون الزر الأساسي */
  border: 1px solid #000 !important; /* بوردر أسود */
  color: #000 !important;            /* لون النص الأساسي */
  animation: none !important;
  transition: none !important;
  box-shadow: none !important;
  transform: none !important;
}

.undefined.s-button-element.s-button-btn.s-button-solid.s-button-wide.s-button-primary.s-button-loader-center .s-button-text {
  color: #fff;
}

.undefined.s-button-element.s-button-btn.s-button-solid.s-button-wide.s-button-primary.s-button-loader-center {
  position: relative;
  overflow: hidden;
}

/* الطبقة التي ستظهر عند hover لتغيير الخلفية */
.undefined.s-button-element.s-button-btn.s-button-solid.s-button-wide.s-button-primary.s-button-loader-center::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000; /* لون خلفية الطبقة */
  transform: scaleX(1);
  transform-origin: left;
  transition: transform 0.5s ease;
  border-radius: 5px; /* ✅ كان ناقص ; */
  z-index: 7;         /* ✅ كانت ملصوقة بدون ; */
}

/* عند hover أو focus أو active، تظهر الطبقة وتتحول الخلفية للنص الأبيض */
.undefined.s-button-element.s-button-btn.s-button-solid.s-button-wide.s-button-primary.s-button-loader-center:hover::after,
.undefined.s-button-element.s-button-btn.s-button-solid.s-button-wide.s-button-primary.s-button-loader-center:focus::after,
.undefined.s-button-element.s-button-btn.s-button-solid.s-button-wide.s-button-primary.s-button-loader-center:active::after {
  transform: scaleX(0);
}

/* النص داخل الزر */
.undefined.s-button-element.s-button-btn.s-button-solid.s-button-wide.s-button-primary.s-button-loader-center .s-button-text {
  position: relative;
  z-index: 8;
  transition: color 0.3s ease;
}

/* عند hover، يتحول لون النص إلى أبيض */
.undefined.s-button-element.s-button-btn.s-button-solid.s-button-wide.s-button-primary.s-button-loader-center:hover .s-button-text,
.undefined.s-button-element.s-button-btn.s-button-solid.s-button-wide.s-button-primary.s-button-loader-center:focus .s-button-text,
.undefined.s-button-element.s-button-btn.s-button-solid.s-button-wide.s-button-primary.s-button-loader-center:active .s-button-text {
  color: #fff !important;
}

/* ------------------------
   (was: ////////////////////////)  ✅ تعليقات CSS صحيحة
------------------------- */

/* تنسيق الزر الأساسي الذي يحمل الأصناف التالية:
   s-button-element s-button-btn s-button-solid s-button-wide s-button-primary s-button-loader-center */
.undefined.s-button-element.s-button-btn.s-button-solid.s-button-wide.s-button-primary.s-button-loader-center {
  border-radius: 5px !important;
  background-color: #000 !important; /* خلفية الزر أسود */
  border: 1px solid #000 !important; /* بوردر أسود */
  color: #000 !important;            /* لون النص الأساسي (يمكن تغييره إذا أردت) */
  animation: none !important;
  transition: none !important;
  box-shadow: none !important;
  transform: none !important;
  position: relative;
  overflow: hidden;
}

/* تنسيق النص داخل الزر */
.undefined.s-button-element.s-button-btn.s-button-solid.s-button-wide.s-button-primary.s-button-loader-center .s-button-text {
  color: #fff !important; /* لون النص داخل الزر يكون أبيض */
  position: relative;
  z-index: 8;
  transition: color 0.3s ease;
}

/* الطبقة التي تظهر عند hover وتغطي الزر */
.undefined.s-button-element.s-button-btn.s-button-solid.s-button-wide.s-button-primary.s-button-loader-center::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000 !important; /* خلفية الطبقة أسود */
  transform: scaleX(1);
  transform-origin: left;
  transition: transform 0.5s ease;
  border-radius: 5px;
  z-index: 7;
}

/* عند hover أو focus أو active، تختفي الطبقة وتصبح النصوص (داخل الزر) بيضاء */
.undefined.s-button-element.s-button-btn.s-button-solid.s-button-wide.s-button-primary.s-button-loader-center:hover::after,
.undefined.s-button-element.s-button-btn.s-button-solid.s-button-wide.s-button-primary.s-button-loader-center:focus::after,
.undefined.s-button-element.s-button-btn.s-button-solid.s-button-wide.s-button-primary.s-button-loader-center:active::after {
  transform: scaleX(0);
}

.undefined.s-button-element.s-button-btn.s-button-solid.s-button-wide.s-button-primary.s-button-loader-center:hover .s-button-text,
.undefined.s-button-element.s-button-btn.s-button-solid.s-button-wide.s-button-primary.s-button-loader-center:focus .s-button-text,
.undefined.s-button-element.s-button-btn.s-button-solid.s-button-wide.s-button-primary.s-button-loader-center:active .s-button-text {
  color: #fff !important;
}

/* First image */
body > 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-20.md\:py-10.py-5.block > div > div > div.grid.w-full.h-full.grid-cols-8.grid-rows-3.items-center.justify-center.order-last > 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 > img {
  border-radius: 9px;
}

/* Second image */
body > 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-20.md\:py-10.py-5.block > div > div > div.grid.w-full.h-full.grid-cols-8.grid-rows-3.items-center.justify-center.order-last > div.col-span-4.row-span-2.relative.z-10.rtl\:translate-x-2.ltr\:-translate-x-2 > img {
  border-radius: 9px;
}

/* شكل كل الأزرار الافتراضية */
label > .s-product-options-grid-mode-span {
  background-color: #fff !important;
  border: 1px solid #ccc !important;
  color: #000 !important;
  padding: 8px 12px;
  border-radius: 4px;
  transition: none !important;
  display: inline-block;
}

/* شكل الزر لما يكون input محدد */
label:has(input:checked) > .s-product-options-grid-mode-span {
  background-color: #000 !important;
  border: 1px solid #888 !important;
  color: #fff !important;
}

#mainnav {
  background-color: var(--color-header-main, #fff) !important;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1) !important;
  z-index: 99 !important;
}

.s-button-element.s-button-btn.s-button-solid.s-button-wide.s-button-primary {
  border-radius: 5px !important;
}

.art-main-content .art-single-btns .s-button-icon {
  border-radius: 5px !important;
}

.s-social-share-btn button,
.s-social-share-btn.s-button-element {
  background-color: black !important;
  color: white !important;
  border: 1px solid black !important;
}

.s-social-share-btn svg path {
  fill: Black !important;
}

.s-social-share-btn:hover button,
.s-social-share-btn:hover.s-button-element {
  background-color: #000 !important;
}

.s-social-share-btn:hover svg path {
  fill: white !important;
}

.undefined.s-button-element.s-button-btn.s-button-solid.s-button-wide.s-button-primary.s-button-loader-center:hover .s-button-text,
.undefined.s-button-element.s-button-btn.s-button-solid.s-button-wide.s-button-primary.s-button-loader-center:focus .s-button-text,
.undefined.s-button-element.s-button-btn.s-button-solid.s-button-wide.s-button-primary.s-button-loader-center:active svg {
  fill: #fff;
}

.undefined.s-button-element.s-button-btn.s-button-solid.s-button-wide.s-button-primary.s-button-loader-center svg {
  fill: #000 !important;
}

button.undefined.s-button-element.s-button-btn.s-button-solid.s-button-wide.s-button-primary.s-button-loader-center svg {
  fill: #ffffff !important;
  color: #ffffff !important;
}

/* نحف البوردر للصورة المختارة في الشريط */
.swiper-slide-thumb-active {
  border: 1px solid #2b2b2b !important; /* غيّر اللون حسب ما تريد */
  box-shadow: none !important;
}

/* إزالة أي ظل أو بوردر إضافي محيط بالصورة */
.swiper-slide-thumb-active::before,
.swiper-slide-thumb-active::after {
  display: none !important;
  box-shadow: none !important;
  border: none !important;
}

.art-banner-header {
  display: none !important;
}

@media (max-width: 768px) {
  .art-banner-2 {
    height: 50vh !important; /* بدل h-screen، نخليها 50% من الشاشة */
    background-size: cover !important;
    background-position: center center !important;
  }

  .art-banner-header {
    transform: scale(0.85); /* تصغير المحتوى الداخلي */
  }
}

/* =========================================================
   ✅ FIX BLOCK (المهم): عند hover يصير النص + الأيقونة أبيض
   ضع هذا آخر شيء (هو هنا آخر الملف)
========================================================= */

/* زر "إضافة للسلة" (primary) */
.s-button-element.s-button-btn.s-button-solid.s-button-wide.s-button-primary:is(:hover, :focus, :focus-visible, :active) {
  color: #fff !important;
}

/* النص داخل الزر */
.s-button-element.s-button-btn.s-button-solid.s-button-wide.s-button-primary:is(:hover, :focus, :focus-visible, :active) .s-button-text {
  color: #fff !important;
}

/* أيقونة السلة / أي SVG داخل الزر */
.s-button-element.s-button-btn.s-button-solid.s-button-wide.s-button-primary:is(:hover, :focus, :focus-visible, :active) svg,
.s-button-element.s-button-btn.s-button-solid.s-button-wide.s-button-primary:is(:hover, :focus, :focus-visible, :active) svg path {
  fill: #fff !important;
  stroke: #fff !important;
  color: #fff !important;
}

/* لو الأيقونة مبنية بـ pseudo-element */
.s-button-element.s-button-btn.s-button-solid.s-button-wide.s-button-primary:is(:hover, :focus, :focus-visible, :active)::before,
.s-button-element.s-button-btn.s-button-solid.s-button-wide.s-button-primary:is(:hover, :focus, :focus-visible, :active)::after,
.s-button-element.s-button-btn.s-button-solid.s-button-wide.s-button-primary:is(:hover, :focus, :focus-visible, :active) .s-button-text::before,
.s-button-element.s-button-btn.s-button-solid.s-button-wide.s-button-primary:is(:hover, :focus, :focus-visible, :active) .s-button-text::after {
  color: #fff !important;
}

/* =========================================================
   EXTRA: Make Outline cart icon button BLACK
   Target: .s-button-outline .s-button-primary-outline
========================================================= */

.s-button-element.s-button-btn.s-button-outline.s-button-wide.s-button-primary-outline {
  background: #000 !important;
  border: 1px solid #000 !important;
    border-radius: 5px !important;
  color: #fff !important; /* يخلي المحتوى يتبع الأبيض */
}

/* الأيقونة (font icon) تتبع لون الزر */
.s-button-element.s-button-btn.s-button-outline.s-button-wide.s-button-primary-outline .s-button-text,
.s-button-element.s-button-btn.s-button-outline.s-button-wide.s-button-primary-outline .sicon-cart-add,
.s-button-element.s-button-btn.s-button-outline.s-button-wide.s-button-primary-outline i {
  color: #fff !important;
}

/* لو فيه SVG داخل نفس الزر */
.s-button-element.s-button-btn.s-button-outline.s-button-wide.s-button-primary-outline svg,
.s-button-element.s-button-btn.s-button-outline.s-button-wide.s-button-primary-outline svg path {
  fill: #fff !important;
  stroke: #fff !important;
}

/* Hover/Focus/Active (خليه ثابت أسود/أبيض) */
.s-button-element.s-button-btn.s-button-outline.s-button-wide.s-button-primary-outline:is(:hover,:focus,:focus-visible,:active) {
  background: #000 !important;
  border-color: #000 !important;
  color: #fff !important;
}
.s-button-element.s-button-btn.s-button-outline.s-button-wide.s-button-primary-outline:is(:hover,:focus,:focus-visible,:active) .sicon-cart-add,
.s-button-element.s-button-btn.s-button-outline.s-button-wide.s-button-primary-outline:is(:hover,:focus,:focus-visible,:active) i {
  color: #fff !important;
}

/* FIX: Checkout button - make background go black when text turns white */
.s-button-element.s-button-btn.s-button-solid.s-button-wide.s-button-primary.s-button-loader-center{
  transition: background-color .25s ease, color .25s ease, border-color .25s ease !important;
}

/* Hover/Focus/Active: background black + text white */
.s-button-element.s-button-btn.s-button-solid.s-button-wide.s-button-primary.s-button-loader-center:is(:hover,:focus,:focus-visible,:active){
  background: #000 !important;
  border-color: #000 !important;
  color: #fff !important;
}

.s-button-element.s-button-btn.s-button-solid.s-button-wide.s-button-primary.s-button-loader-center:is(:hover,:focus,:focus-visible,:active) .s-button-text{
  color: #fff !important;
}

/* Radius 10px للصورة الأولى */
.col-span-4.row-span-3.relative.z-20 > img{
  border-radius: 10px !important;
}

/* Radius 10px للصورة الثانية */
.col-span-4.row-span-2.relative.z-10 > img{
  border-radius: 10px !important;
}