/* Add custom CSS styles below */
/* ==========================================================================
   saudi-mark.css
   شعار "صناعة سعودية" متحرك — دورة 4 ثوانٍ تتكرر، مطابقة لإيقاع
   lord-icon trigger="loop" delay="2000"
   يشتغل من غير جافاسكربت. ملف saudi-mark.js اختياري ويضيف تحسينين بس.
   ========================================================================== */

.saudi-mark {
  --sm-green: #0b6238;
  --sm-len: 840; /* محيط إطار الشعار — يُحدَّث تلقائيًا من الـ JS */
  --sm-cycle: 4s; /* مدة الدورة */

  height: var(--icon-size-mobile, 80px);
  width: auto;
  display: block;
  overflow: visible;
}

@media (min-width: 768px) {
  .saudi-mark {
    height: var(--icon-size-desktop, 120px);
  }
}

/* خلفية بيضاء تظهر في الوضع الداكن فقط */
.saudi-mark .sm-plate {
  opacity: 0;
}
.dark .saudi-mark .sm-plate {
  opacity: 1;
}

/* ---------- ربط العناصر بالحركات ---------- */

.saudi-mark #sm-frame {
  stroke-dasharray: var(--sm-len);
  animation: sm-frame var(--sm-cycle) linear infinite;
}

.saudi-mark #sm-block {
  transform-box: fill-box;
  transform-origin: center bottom;
  animation: sm-block var(--sm-cycle) ease-out infinite;
}

.saudi-mark .sm-pop {
  transform-box: fill-box;
  transform-origin: left center; /* السعف يكبر من ناحية القلب */
}
.saudi-mark #sm-trunk {
  transform-origin: center top;
}
.saudi-mark .sm-tuft {
  transform-origin: center bottom;
}

.saudi-mark .sm-a {
  animation: sm-pop-a var(--sm-cycle) cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
}
.saudi-mark .sm-b {
  animation: sm-pop-b var(--sm-cycle) cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
}
.saudi-mark .sm-c {
  animation: sm-pop-c var(--sm-cycle) cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
}

.saudi-mark .sm-w1 {
  animation: sm-word var(--sm-cycle) ease-out infinite;
}
.saudi-mark .sm-w2 {
  animation: sm-word-b var(--sm-cycle) ease-out infinite;
}

/* ---------- الحركات ---------- */

@keyframes sm-frame {
  0% {
    stroke-dashoffset: var(--sm-len);
    opacity: 1;
  }
  30% {
    stroke-dashoffset: 0;
  }
  90% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
  98%,
  100% {
    stroke-dashoffset: 0;
    opacity: 0;
  }
}

@keyframes sm-block {
  0%,
  18% {
    opacity: 0;
    transform: scale(0.9);
  }
  34% {
    opacity: 1;
    transform: scale(1);
  }
  90% {
    opacity: 1;
    transform: scale(1);
  }
  98%,
  100% {
    opacity: 0;
    transform: scale(1);
  }
}

@keyframes sm-pop-a {
  0%,
  28% {
    opacity: 0;
    transform: scale(0.3);
  }
  42% {
    opacity: 1;
    transform: scale(1);
  }
  90% {
    opacity: 1;
    transform: scale(1);
  }
  98%,
  100% {
    opacity: 0;
    transform: scale(1);
  }
}

@keyframes sm-pop-b {
  0%,
  33% {
    opacity: 0;
    transform: scale(0.3);
  }
  47% {
    opacity: 1;
    transform: scale(1);
  }
  90% {
    opacity: 1;
    transform: scale(1);
  }
  98%,
  100% {
    opacity: 0;
    transform: scale(1);
  }
}

@keyframes sm-pop-c {
  0%,
  37% {
    opacity: 0;
    transform: scale(0.3);
  }
  51% {
    opacity: 1;
    transform: scale(1);
  }
  90% {
    opacity: 1;
    transform: scale(1);
  }
  98%,
  100% {
    opacity: 0;
    transform: scale(1);
  }
}

@keyframes sm-word {
  0%,
  50% {
    opacity: 0;
    transform: translateY(9px);
  }
  64% {
    opacity: 1;
    transform: translateY(0);
  }
  90% {
    opacity: 1;
    transform: translateY(0);
  }
  98%,
  100% {
    opacity: 0;
    transform: translateY(0);
  }
}

@keyframes sm-word-b {
  0%,
  56% {
    opacity: 0;
    transform: translateY(9px);
  }
  70% {
    opacity: 1;
    transform: translateY(0);
  }
  90% {
    opacity: 1;
    transform: translateY(0);
  }
  98%,
  100% {
    opacity: 0;
    transform: translateY(0);
  }
}

/* ---------- إيقاف الحركة وقت ما الشعار يكون برّه الشاشة (يضيفها الـ JS) ---------- */
.saudi-mark.sm-paused * {
  animation-play-state: paused;
}

/* ---------- احترام تفضيل تقليل الحركة ---------- */
@media (prefers-reduced-motion: reduce) {
  .saudi-mark * {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .saudi-mark #sm-frame {
    stroke-dashoffset: 0 !important;
  }
}

/* ===== Hero / المعرض الرئيسي — يأخذ مقاسه الطبيعي (فيديو 1800×800) ===== */
.sofa-hero {
  --hero-ar: 9/4;
}

.sofa-hero salla-slider,
.sofa-hero salla-slider > div {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: var(--hero-ar);
  overflow: hidden;
}

.sofa-hero .swiper-slide,
.sofa-hero .swiper-lazy-wrap {
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
}

.sofa-hero .slide__first-img,
.sofa-hero .swiper-lazy-wrap > video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  object-position: center;
}

/* تابلت */
@media (max-width: 1024px) {
  .sofa-hero {
    --hero-ar: 2/1;
  }
  .sofa-hero .slide-content {
    padding-inline: 24px !important;
  }
  .sofa-hero .slide-content h2 {
    font-size: clamp(20px, 3.4vw, 30px);
    line-height: 1.3;
  }
  .sofa-hero .slide-content p {
    font-size: clamp(13px, 1.9vw, 16px);
    line-height: 1.6;
  }
}

/* موبايل */
@media (max-width: 640px) {
  .sofa-hero {
    --hero-ar: 5/4;
  }
  .sofa-hero .slide-content {
    padding-inline: 18px !important;
  }
  .sofa-hero .slide-content > div {
    max-width: 100%;
    gap: 8px;
  }
  .sofa-hero .slide-content h2 {
    font-size: clamp(19px, 5.6vw, 26px);
  }
  .sofa-hero .slide-content p {
    font-size: 13.5px;
  }
}
/* ===== إظهار/إخفاء السكاشن حسب اللغة — استهداف ثابت لا يتأثر بترتيب السكاشن ===== */

/* السلايدر الرئيسي: الأول عربي والتاني إنجليزي */
html[lang^="en"] .s-block--main-slider-1:has(+ .s-block--main-slider-1) {
  display: none !important;
}
html[lang^="ar"] .s-block--main-slider-1 + .s-block--main-slider-1 {
  display: none !important;
}

/* البنرات: كلاس lang-ar / lang-en بيتحط تلقائيًا من ملف الجافاسكربت حسب صورة البنر */
html[lang^="en"] .lang-ar,
html[lang^="ar"] .lang-en {
  display: none !important;
}
html[lang^="en"] #main-slider-1-0{
  display: none;
}
html[lang^="ar"] #main-slider-1-1{
  display: none;
}
/* ~~~~~ الهيرو (عربي + إنجليزي): مقاسات السيكشن (enh-fit) ~~~~~ */
/* صور الشرايح: 1440x640 نسبة 9:4 و 1280x718 نسبة 16:9 */
.s-block--main-slider-1 :is(salla-slider, salla-slider>div, .swiper, .swiper-wrapper, .swiper-slide){
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  aspect-ratio:auto!important;
}

.s-block--main-slider-1 .swiper-lazy-wrap{
  position:relative;
  height:auto!important;
  min-height:0!important;
  aspect-ratio:9/4!important;
  max-height:min(70vh,700px)!important;
}

.s-block--main-slider-1 .swiper-lazy-wrap > :is(img, video){
  position:absolute;
  inset:0;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center;
}

/* الموبايل: مساحة أطول للنص + الصورة كاملة بدون قص (enh-mob) */
@media (max-width:767px){
  .s-block--main-slider-1 .swiper-lazy-wrap{
    aspect-ratio:16/9!important;
  }
  .s-block--main-slider-1 .swiper-lazy-wrap > :is(img, video){
    object-fit:fill!important;
  }
}
/* عربي: يخفي التاني ويسيب الأول */
html[lang^="ar"] .s-block--bundle-social-links ~ .s-block--bundle-social-links {
  display: none !important;
}

/* إنجليزي: يخفي الكل ويرجّع التاني */
html:not([lang^="ar"]) .s-block--bundle-social-links {
  display: none !important;
}
html:not([lang^="ar"]) .s-block--bundle-social-links ~ .s-block--bundle-social-links {
  display: block !important;
}

.all-products-btn-wrap { text-align: center; margin-top: 28px; }

.all-products-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 36px;
  border-radius: 999px;
  background: var(--color-primary, #000);
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  line-height: 1;
  letter-spacing: .2px;
  transition: opacity .2s ease, transform .2s ease;
  margin-top: 20px;
}

.all-products-btn:hover {
  color: #fff;
  opacity: .85;
  transform: translateY(-2px);
}

/* Arabic banners: hide when the store is in English */
html:not([lang^="ar"]) .s-block--fixed-banner:has(img[src*="2fd48ec9-1648-4ca1-b894-44a9e11a0e06"]),
html:not([lang^="ar"]) .s-block--fixed-banner:has(img[src*="d4b8ba74-fc44-4c7b-9cf0-b64cf2a0b82f"]) {
  display: none !important;
}

/* English banners: hide when the store is in Arabic */
html[lang^="ar"] .s-block--fixed-banner:has(img[src*="5113e98e-1444-432a-85c1-b895c6492a23"]),
html[lang^="ar"] .s-block--fixed-banner:has(img[src*="43f64a67-7263-4c34-b0f1-d013dd2fd7bd"]) {
  display: none !important;
}