/* แก้ของที่ JS ของ Elementor เคยจัดให้ แต่ไม่มีแล้วบนเว็บ static (jlcurtain.net)
   ไม่แก้สี ไม่แก้ฟอนต์ แตะเฉพาะการจัดวางที่เคยพึ่ง JS */

/* เผื่อยังมี elementor-invisible หลงเหลือที่ไหน */
.elementor-invisible { visibility: visible !important; }

/* แกลเลอรี: ปกติ JS เป็นคนใส่คลาส grid/justified และค่า --columns/--hgap ให้
   เมื่อไม่มี JS จึงจัดเป็นกริดตอบสนองเองแทน */
.elementor-gallery__container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}
.elementor-gallery__container .e-gallery-item {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  width: auto !important;
  height: auto !important;
}
/* ความสูงของรูปมาจาก padding-bottom ที่เขียนไว้ใน style ของแต่ละรูป */
.elementor-gallery__container .e-gallery-image { width: 100%; }

/* สไลด์รูป (image carousel) ปกติใช้ Swiper ซึ่งต้องมี JS
   ให้เลื่อนด้วยนิ้ว/เมาส์แทน และโชว์รูปครบ */
.elementor-widget-image-carousel .swiper-wrapper,
.elementor-widget-image-carousel .swiper-container .swiper-wrapper {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 10px;
  -webkit-overflow-scrolling: touch;
}
.elementor-widget-image-carousel .swiper-slide {
  flex: 0 0 auto;
  width: min(86%, 340px);
  scroll-snap-align: center;
}

/* สไลด์รูป (image carousel) ของ Elementor ใช้ Swiper ซึ่งต้องมี JS คอยตั้งความกว้าง
   สไลด์และเลื่อน ถ้าไม่มี JS รูปจะถูก overflow:hidden บังไว้จนดูเหมือนไม่มีอะไร
   แก้ให้เลื่อนด้วยนิ้ว/เมาส์แทน และโชว์รูปครบ */
.elementor-widget-image-carousel .elementor-image-carousel-wrapper,
.elementor-widget-image-carousel .swiper-container {
  overflow-x: auto !important;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.elementor-widget-image-carousel .swiper-wrapper,
.elementor-widget-image-carousel .elementor-image-carousel {
  display: flex !important;
  transform: none !important;
  gap: 10px;
  width: auto !important;
}
.elementor-widget-image-carousel .swiper-slide {
  flex: 0 0 auto !important;
  width: min(84%, 320px) !important;
  margin: 0 !important;
  scroll-snap-align: center;
}
.elementor-widget-image-carousel .swiper-slide-image { width: 100%; height: auto; display: block; }
/* ปุ่มลูกศรกับจุดของ swiper ใช้งานไม่ได้เมื่อไม่มี JS จึงซ่อนไว้ */
.elementor-widget-image-carousel .swiper-button-next,
.elementor-widget-image-carousel .swiper-button-prev,
.elementor-widget-image-carousel .swiper-pagination { display: none !important; }

/* section ที่ตั้งพื้นหลังเป็น slideshow: รูปแรกถูกเขียนเป็น background-image ไว้ในไฟล์แล้ว
   กันไว้ไม่ให้ความสูงยุบถ้า min-height ของ Elementor ไม่ทำงาน */
section[data-bg-slideshow] { background-color: #4A1F07; }

/* เมนูย่อย (sub-menu) ของ Elementor Pro เปิดด้วยปลั๊กอิน smartmenus
   ซึ่งไม่มีบนเว็บ static ทำให้หัวข้อที่เป็น "#" กลายเป็นลิงก์ตาย
   -> เปิดด้วย CSS เอง บนจอใหญ่ใช้ hover บนจอเล็กกางไว้เลย */
.elementor-nav-menu--main .elementor-nav-menu > li,
.elementor-nav-menu--main .elementor-nav-menu li.menu-item-has-children { position: relative; }

.elementor-nav-menu--main .elementor-nav-menu ul.sub-menu {
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 16rem;
  margin: 0;
  padding: 6px 0;
  list-style: none;
  background: #fff;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .14);
  border-radius: 6px;
  z-index: 9998;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
.elementor-nav-menu--main .elementor-nav-menu li:hover > ul.sub-menu,
.elementor-nav-menu--main .elementor-nav-menu li:focus-within > ul.sub-menu,
.elementor-nav-menu--main .elementor-nav-menu li.jl-open > ul.sub-menu {
  visibility: visible;
  opacity: 1;
  transform: none;
}
.elementor-nav-menu--main .elementor-nav-menu ul.sub-menu > li { position: relative; }
.elementor-nav-menu--main .elementor-nav-menu ul.sub-menu a {
  white-space: nowrap;
  padding: 9px 18px;
  display: block;
}
/* หัวข้อที่มีเมนูย่อยให้เห็นว่ากดได้ */
.elementor-nav-menu--main .elementor-nav-menu li.menu-item-has-children > a { cursor: pointer; }

/* ในเมนูมือถือ ให้กางเมนูย่อยไว้เลย ไม่ต้องกดซ้อน */
nav.elementor-nav-menu--dropdown ul.sub-menu {
  display: block !important;
  position: static !important;
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
  box-shadow: none !important;
  background: transparent !important;
  padding-left: 14px;
  min-width: 0;
}