@import url('https://fonts.googleapis.com/css2?family=Alexandria:wght@300;400;500;600;700;800&display=swap');
/*
 Theme Name:   Woodmart Child
 Description:  Woodmart Child Theme
 Author:       XTemos
 Author URI:   http://xtemos.com
 Template:     woodmart
 Version:      1.0.0
 Text Domain:  woodmart
*/

/* ======================================================
   توزيع عناصر الهيدر بشكل Space-Between متناسق ومتوازن
   ====================================================== */

/* مساواة عرض الطرفين على شاشات الكمبيوتر لضمان بقاء اللوجو في السنتر تماماً */
@media (min-width: 1025px) {
    .whb-general-header .whb-col-left,
    .whb-general-header .whb-col-right {
        flex: 1 1 0% !important;
    }
}

/* القائمة الرئيسية: تبدأ من الحافة الخارجية تماماً */
.whb-general-header .whb-col-left {
    justify-content: flex-start !important;
}
.whb-general-header .whb-col-left .wd-header-main-nav {
    text-align: start !important;
    display: flex !important;
    justify-content: flex-start !important;
    flex: 0 0 auto !important;
}
.whb-general-header .whb-col-left .wd-nav {
    justify-content: flex-start !important;
}

/* أدوات الهيدر (البحث، الحساب، السلة، واللغة): تتجمع عند الحافة الأخرى بدون فراغات متباعدة */
.whb-general-header .whb-col-right {
    justify-content: flex-end !important;
}
.whb-general-header .whb-col-right .wd-header-nav {
    flex: 0 0 auto !important;
}

/* توسيط الشعار بدقة في العمود الأوسط */
.whb-col-center,
.whb-mobile-center {
    justify-content: center !important;
}

/* ======================================================
   De La Luné Hero Section - Cosmic Moon & Orbit (Exact Specification)
   ====================================================== */
.moon-orbit,
.elementor-element.moon-orbit {
  position: absolute !important;
  width: 490px !important;
  height: 490px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  border: 1px solid rgba(255,255,255,.15) !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  z-index: 1 !important;
  right: 8% !important;
}
html[dir="rtl"] .moon-orbit,
html[dir="rtl"] .elementor-element.moon-orbit {
  right: auto !important;
  left: 8% !important;
}
.moon-orbit::before,
.moon-orbit::after,
.elementor-element.moon-orbit::before,
.elementor-element.moon-orbit::after {
  content: "" !important;
  position: absolute !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  border-radius: 50% !important;
  inset: -70px !important;
  pointer-events: none !important;
}
.moon-orbit::after,
.elementor-element.moon-orbit::after {
  inset: -145px !important;
}
.moon,
.elementor-element.moon,
.moon-orbit .elementor-widget-image,
.moon-orbit .elementor-image {
  position: absolute !important;
  width: 130px !important;
  height: 130px !important;
  right: -26px !important;
  top: 63px !important;
  pointer-events: none !important;
  filter: drop-shadow(0 0 26px rgba(255,255,255,.3)) !important;
  animation: floatMoon 5.5s ease-in-out infinite !important;
}
html[dir="rtl"] .moon,
html[dir="rtl"] .elementor-element.moon,
html[dir="rtl"] .moon-orbit .elementor-widget-image,
html[dir="rtl"] .moon-orbit .elementor-image {
  right: auto !important;
  left: -26px !important;
}
.moon img,
.elementor-element.moon img,
.moon-orbit .elementor-widget-image img {
  width: 130px !important;
  height: 130px !important;
  max-width: 130px !important;
  max-height: 130px !important;
  object-fit: contain !important;
  display: block !important;
}

@keyframes floatMoon {
  50% { transform: translateY(-12px); }
}

@media (max-width: 1100px) {
  .moon-orbit,
  .elementor-element.moon-orbit {
    opacity: .55 !important;
    right: -80px !important;
  }
  html[dir="rtl"] .moon-orbit,
  html[dir="rtl"] .elementor-element.moon-orbit {
    right: auto !important;
    left: -80px !important;
  }
}

@media (max-width: 820px) {
  .moon-orbit,
  .elementor-element.moon-orbit {
    width: 320px !important;
    height: 320px !important;
    opacity: .38 !important;
    right: -130px !important;
    top: 32% !important;
  }
  html[dir="rtl"] .moon-orbit,
  html[dir="rtl"] .elementor-element.moon-orbit {
    left: -130px !important;
    right: auto !important;
  }
  .moon,
  .elementor-element.moon,
  .moon-orbit .elementor-widget-image,
  .moon-orbit .elementor-image,
  .moon img,
  .elementor-element.moon img,
  .moon-orbit .elementor-widget-image img {
    width: 92px !important;
    height: 92px !important;
    max-width: 92px !important;
    max-height: 92px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .moon,
  .elementor-element.moon,
  .moon-orbit .elementor-widget-image {
    animation: none !important;
  }
}

/* ======================================================
   De La Luné Hero Section - Dual-Rail Vertical Infinite Slider
   ====================================================== */
@keyframes heroRailUp {
  0% { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}
@keyframes heroRailDown {
  0% { transform: translateY(-50%); }
  100% { transform: translateY(0); }
}

/* Slider Main Container - Preserves side-by-side flex row on desktop, tablet, and mobile */
.hero-collage,
.elementor-element.hero-collage {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 14px !important;
  height: 650px !important;
  max-height: 650px !important;
  min-height: 650px !important;
  overflow: hidden !important;
  position: relative !important;
  mask-image: linear-gradient(to bottom, transparent 0%, #000 8%, #000 92%, transparent 100%) !important;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 8%, #000 92%, transparent 100%) !important;
}

@media (max-width: 1024px) {
  .hero-collage,
  .elementor-element.hero-collage {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    height: 520px !important;
    max-height: 520px !important;
    min-height: 520px !important;
    gap: 14px !important;
  }
}

@media (max-width: 767px) {
  .hero-collage,
  .elementor-element.hero-collage {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 14px !important;
    width: 100% !important;
    height: 480px !important;
    max-height: 480px !important;
    min-height: 480px !important;
  }
}

/* Pause slider ONLY when hovering directly over the slider / collage */
.hero-collage:hover .hero-rail-up,
.hero-collage:hover .hero-rail-down,
.hero-rail-up:hover,
.hero-rail-down:hover {
  animation-play-state: paused !important;
}

/* Rail containers */
.hero-rail-up,
.elementor-element.hero-rail-up {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  width: 54% !important;
  flex: 0 0 54% !important;
  max-width: 54% !important;
  height: auto !important;
  min-height: min-content !important;
  flex-shrink: 0 !important;
  align-self: flex-start !important;
  will-change: transform;
  animation: heroRailUp 22s linear infinite !important;
}

.hero-rail-down,
.elementor-element.hero-rail-down {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  width: 46% !important;
  flex: 0 0 46% !important;
  max-width: 46% !important;
  height: auto !important;
  min-height: min-content !important;
  flex-shrink: 0 !important;
  align-self: flex-start !important;
  will-change: transform;
  animation: heroRailDown 25s linear infinite !important;
}

@media (max-width: 767px) {
  .hero-rail-up,
  .elementor-element.hero-rail-up {
    width: calc(54% - 7px) !important;
    flex: 0 0 calc(54% - 7px) !important;
    max-width: calc(54% - 7px) !important;
  }
  .hero-rail-down,
  .elementor-element.hero-rail-down {
    width: calc(46% - 7px) !important;
    flex: 0 0 calc(46% - 7px) !important;
    max-width: calc(46% - 7px) !important;
  }
}

/* Individual shots on desktop */
.hero-rail-up > .e-con,
.hero-rail-up > .e-child,
.hero-rail-up .hero-shot,
.hero-rail-up > div {
  height: 315px !important;
  min-height: 315px !important;
  max-height: 315px !important;
  flex: 0 0 315px !important;
  flex-shrink: 0 !important;
  width: 100% !important;
  position: relative !important;
  overflow: hidden !important;
}

.hero-rail-down > .e-con,
.hero-rail-down > .e-child,
.hero-rail-down .hero-shot,
.hero-rail-down > div {
  height: 260px !important;
  min-height: 260px !important;
  max-height: 260px !important;
  flex: 0 0 260px !important;
  flex-shrink: 0 !important;
  width: 100% !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Individual shots on mobile */
@media (max-width: 767px) {
  .hero-rail-up > .e-con,
  .hero-rail-up > .e-child,
  .hero-rail-up .hero-shot,
  .hero-rail-up > div {
    height: 220px !important;
    min-height: 220px !important;
    max-height: 220px !important;
    flex: 0 0 220px !important;
  }
  .hero-rail-down > .e-con,
  .hero-rail-down > .e-child,
  .hero-rail-down .hero-shot,
  .hero-rail-down > div {
    height: 190px !important;
    min-height: 190px !important;
    max-height: 190px !important;
    flex: 0 0 190px !important;
  }

  /* Hide bottom bar on mobile */
  .hero-bottom,
  .elementor-element.hero-bottom {
    display: none !important;
  }
}

@media (max-width: 560px) {
  .hero-actions {
    width: 100% !important;
  }
  .hero-actions .elementor-widget-button,
  .hero-actions .elementor-button {
    width: 100% !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-rail-up, .hero-rail-down {
    animation: none !important;
  }
}

/* ======================================================
   De La Luné Homepage - Comprehensive Mobile Responsive Rules (All 7 Sections)
   ====================================================== */
@media (max-width: 767px) {
  /* Section standard padding: 82px 0 */
  .section-pad,
  .elementor-element.section-pad,
  .experience-section,
  .process-section,
  .gallery-section {
    padding-top: 82px !important;
    padding-bottom: 82px !important;
  }

  /* Section 1: Hero mobile typography & spacing */
  .hero-grid {
    gap: 38px !important;
  }
  .hero-copy {
    padding-top: 38px !important;
  }
  html[dir="rtl"] .hero-heading h1,
  html[dir="rtl"] .hero-title,
  html[dir="rtl"] .hero-copy h1 {
    font-size: clamp(43px, 13vw, 66px) !important;
    line-height: 1.08 !important;
  }
  .hero-sub,
  .hero-sub p {
    font-size: 13px !important;
    margin-top: 22px !important;
  }
  .hero-actions {
    margin-top: 26px !important;
  }

  /* Section 2: Experience */
  .promise-head {
    margin-bottom: 42px !important;
  }
  .experience-grid {
    flex-direction: column !important;
  }
  .experience-item,
  .elementor-element.experience-item {
    width: 100% !important;
    min-height: 0 !important;
    padding: 28px 0 !important;
    border-right: none !important;
    border-left: none !important;
  }
  .experience-item + .experience-item {
    border-top: 1px solid rgba(10,11,13,0.13) !important;
  }
  .experience-item h3 {
    margin: 26px 0 8px !important;
  }

  /* Section 3: Statement */
  .statement-section,
  .elementor-element.statement-section {
    min-height: 650px !important;
    padding-top: 70px !important;
    padding-bottom: 70px !important;
  }

  /* Section 4: Carts / Store Products */
  .carts-head {
    margin-bottom: 36px !important;
  }
  .carts-note {
    margin-top: 22px !important;
  }
  .cart-card-item,
  .elementor-element.cart-card-item {
    width: 100% !important;
    max-width: 100% !important;
  }
  .cart-img-box,
  .elementor-element.cart-img-box {
    height: 270px !important;
    min-height: 270px !important;
  }

  /* Section 5: Process */
  .process-grid,
  .elementor-element.process-grid {
    gap: 48px !important;
  }
  .step,
  .elementor-element.step {
    padding: 24px 0 !important;
    gap: 16px !important;
  }
  .step-no,
  .step-no .elementor-heading-title {
    width: 42px !important;
    min-width: 42px !important;
    flex-shrink: 0 !important;
  }

  /* Section 6: Gallery */
  .gallery-head,
  .elementor-element.gallery-head {
    margin-bottom: 34px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  .gallery-link,
  .elementor-element.gallery-link {
    margin-top: 22px !important;
    display: inline-block !important;
  }
  .gallery-grid {
    flex-direction: column !important;
    gap: 14px !important;
  }
  .gallery-item-main,
  .elementor-element.gallery-item-main {
    width: 100% !important;
    height: 300px !important;
    min-height: 300px !important;
  }
  .gallery-item,
  .elementor-element.gallery-item {
    height: 210px !important;
    min-height: 210px !important;
  }
  .gallery-item-wide,
  .elementor-element.gallery-item-wide {
    width: 100% !important;
    height: 210px !important;
    min-height: 210px !important;
  }

  /* Section 7: Final CTA */
  .final-cta-section,
  .elementor-element.final-cta-section {
    padding-top: 82px !important;
    padding-bottom: 70px !important;
  }
  .final-inner,
  .elementor-element.final-inner {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 36px !important;
    padding-top: 40px !important;
  }
  .round-cta,
  .elementor-element.round-cta .elementor-button,
  .round-cta .elementor-button {
    width: 120px !important;
    height: 120px !important;
    font-size: 11px !important;
    padding: 14px !important;
  }
}