.elementor-589 .elementor-element.elementor-element-a0764f9{--display:flex;}#elementor-popup-modal-589 .dialog-widget-content{animation-duration:0.5s;background-color:#100E0C;box-shadow:2px 8px 23px 3px rgba(0,0,0,0.2);}#elementor-popup-modal-589{background-color:#00000099;justify-content:flex-end;align-items:flex-end;pointer-events:all;}#elementor-popup-modal-589 .dialog-message{height:auto;}#elementor-popup-modal-589 .dialog-close-button{display:flex;font-size:15px;}#elementor-popup-modal-589 .dialog-close-button i{color:var( --e-global-color-secondary );}#elementor-popup-modal-589 .dialog-close-button svg{fill:var( --e-global-color-secondary );}@media(max-width:767px){#elementor-popup-modal-589 .dialog-message{width:100vw;}#elementor-popup-modal-589{justify-content:center;align-items:flex-end;}}/* Start custom CSS *//* =========================================================================
   SHOP FILTER POPUP — Custom CSS  (ธีมเข้ม charcoal + ทอง · เลย์เอาต์ตาม ref)
   วางที่: Templates → Popups → แก้ป๊อปอัพ "Popup Filter" (id 589)
            → Advanced → Custom CSS   (ไม่ใช่ Site Settings)
   ทำ: การ์ดลอย มุมขวาล่าง (มือถือ = กลางล่าง) · สูงตามเนื้อหา เกินจอค่อย scroll (กัน crop)
       · ไม่มีเลื่อนซ้าย-ขวา · title serif · ปุ่ม Apply(ยืนยัน,ทอง)/Clear(ล้าง,ขอบทอง)
   ⚠️ ถ้า popup id ไม่ใช่ 589 → แก้เลข 589 ทุกที่ในไฟล์
   สี: bg #100e0c/#0a0908 · gold #cda349 · text #cbc4b6 · title #efe2c4
   ========================================================================= */

/* ---- 0) กันเลื่อนซ้าย-ขวา (popup ตั้ง width ที่ wrapper ชั้นใน = ล้นกล่อง) ---- */
#elementor-popup-modal-589 *{ box-sizing:border-box }
#elementor-popup-modal-589 .dialog-message,
#elementor-popup-modal-589 .elementor-location-popup,
#elementor-popup-modal-589 .e-con,
#elementor-popup-modal-589 .e-con-inner,
#elementor-popup-modal-589 .widget_wpc_filters_widget,
#elementor-popup-modal-589 .wpc-filters-main-wrap,
#elementor-popup-modal-589 .wpc-filters-widget-wrapper,
#elementor-popup-modal-589 .wpc-filters-widget-content{ width:100% !important; max-width:100% !important }

/* ---- 1) ตำแหน่ง + ขนาดการ์ด ----
   ⚠️ ต้องใช้ prefix `html body` เพราะ popup setting (Vertical=Center) สร้าง rule
      `body #...{top:50%!important}` ที่ prefix `body` เท่ากับเรา + โหลดทีหลัง → เราต้องแรงกว่า
   ✅ แนะนำตั้งที่ Popup Settings ด้วย: Height=Fit To Content ·
      Desktop Position H=End V=End · Mobile(ไอคอนมือถือ) H=Center V=End (ดูหมายเหตุ A) */

/* Desktop = มุมขวาล่าง */
html body #elementor-popup-modal-589 .dialog-widget-content{
  position:fixed !important;
  top:auto !important; bottom:24px !important; left:auto !important; right:24px !important;
  transform:none !important;
  width:430px !important; max-width:calc(100vw - 48px) !important;
  height:auto !important; max-height:calc(100dvh - 48px) !important;   /* เกินจอ scroll */
  margin:0 !important; border-radius:3px !important;
  background:#100e0c !important; box-shadow:0 30px 80px rgba(0,0,0,.55) !important;
  display:flex !important; flex-direction:column !important; overflow:hidden !important;
}
#elementor-popup-modal-589 .dialog-message{
  flex:1 1 auto !important; height:auto !important; max-height:none !important;
  overflow-y:auto !important; overflow-x:hidden !important; -webkit-overflow-scrolling:touch !important;
}
html body #elementor-popup-modal-589 .we-filter{
  color:#cbc4b6; padding:40px 30px 20px !important;
  min-height:0 !important; display:flex !important; flex-direction:column !important;
}
#elementor-popup-modal-589 .we-filter,
#elementor-popup-modal-589 .we-filter *{ font-family:'Raleway',sans-serif }

/* ---- 2) TITLE serif (= ช่อง Title ของ widget · h2.widgettitle) ---- */
#elementor-popup-modal-589 .wpc-filter-set-widget-title .widgettitle,
#elementor-popup-modal-589 .we-filter .widgettitle{
  font-family:'Cormorant Garamond',serif !important; font-weight:400 !important;
  font-size:clamp(40px,7vw,52px) !important; line-height:1 !important;
  color:#efe2c4 !important; letter-spacing:.01em !important; text-transform:none !important;
  margin:0 0 24px !important; padding:0 !important;
}
#elementor-popup-modal-589 .wpc-widget-close-container{ display:none !important }

/* ---- 3) หัวข้อหมวด ---- */
#elementor-popup-modal-589 .wpc-filter-title{
  color:#cda349 !important; font-size:11px !important; letter-spacing:.22em !important;
  text-transform:uppercase !important; font-weight:500 !important; margin:0 0 14px !important;
}
#elementor-popup-modal-589 .wpc-filters-section{ margin-bottom:26px !important }

/* ---- 4) Availability checkbox + label ---- */
#elementor-popup-modal-589 .we-filter .wpc-term{ display:flex !important; align-items:center !important; gap:12px !important; padding:7px 0 !important }
#elementor-popup-modal-589 .we-filter label,
#elementor-popup-modal-589 .we-filter a{ color:#cbc4b6 !important; text-decoration:none; font-size:15px !important }
#elementor-popup-modal-589 .we-filter a:hover{ color:#cda349 !important }
#elementor-popup-modal-589 .we-filter .wpc-term-count{ color:#6f6961 !important }
#elementor-popup-modal-589 .we-filter input[type="checkbox"]{
  -webkit-appearance:none; appearance:none; width:18px; height:18px; flex:0 0 auto;
  border:1px solid rgba(205,163,73,.5) !important; border-radius:2px; background:transparent !important;
  position:relative; cursor:pointer;
}
#elementor-popup-modal-589 .we-filter input[type="checkbox"]:checked{ background:#cda349 !important; border-color:#cda349 !important }
#elementor-popup-modal-589 .we-filter input[type="checkbox"]:checked::after{
  content:""; position:absolute; left:6px; top:2px; width:4px; height:9px;
  border:solid #0a0908; border-width:0 2px 2px 0; transform:rotate(45deg);
}

/* ---- 5) Price (min/max) + Brand (select) — พอดี ไม่ล้น ---- */
#elementor-popup-modal-589 [class*="wpc-filters-range-columns"],
#elementor-popup-modal-589 [class*="range-inputs"]{ display:flex !important; gap:12px !important; margin-top:6px }
#elementor-popup-modal-589 [class*="wpc-filters-range-column"]{ flex:1 1 0 !important; min-width:0 !important }
#elementor-popup-modal-589 .we-filter input[type="number"],
#elementor-popup-modal-589 .we-filter input[type="text"],
#elementor-popup-modal-589 .wpc-filters-widget-select{
  width:100% !important; min-width:0 !important;
  background:#0a0908 !important; border:1px solid rgba(205,163,73,.26) !important; color:#cbc4b6 !important;
  border-radius:2px !important; padding:12px !important; font-size:13px !important;
}
#elementor-popup-modal-589 .wpc-filters-widget-select{ cursor:pointer }
#elementor-popup-modal-589 .we-filter input::placeholder{ color:#6f6961 !important }
#elementor-popup-modal-589 .wpc-filters-range-slider-wrapper,
#elementor-popup-modal-589 [class*="wpc-slider-control"],
#elementor-popup-modal-589 .wpc-filters-range-values-wrapper{ display:none !important }

/* ---- 6) ซ่อนของซ้ำ ----
   · ปุ่ม toggle "Filters" ของปลั๊ก
   · ชุดปุ่ม popup-mode "Show (N)" + "Cancel" (ใช้ Apply/Clear จาก Apply Button mode แทน)
     ปุ่มพวกนี้ถูก JS ใส่ inline display:block → ต้องซ่อนที่ wrapper + prefix html body */
#elementor-popup-modal-589 .wpc-filters-open-button-container{ display:none !important }
html body #elementor-popup-modal-589 .wpc-filters-widget-controls-wrapper{ display:none !important }

/* ---- 7) ปุ่ม Apply(ยืนยัน) + Clear(ล้าง) = .wpc-sticky-buttons (Apply Button mode) ----
   sticky ล่างของการ์ด · Apply ทองทึบ · Clear ขอบทอง */
#elementor-popup-modal-589 .wpc-sticky-buttons{
  background:#100e0c !important; border:0 !important; box-shadow:none !important; outline:0 !important;
  position:sticky !important; bottom:0 !important; z-index:5 !important;
  display:flex !important; gap:12px !important; padding:16px 0 4px !important; margin-top:8px !important;
  border-top:1px solid rgba(205,163,73,.16) !important;
}
#elementor-popup-modal-589 .wpc-sticky-buttons > *{ margin:0 !important; flex:1 1 0 !important }
#elementor-popup-modal-589 .wpc-filters-submit-button{
  display:flex !important; align-items:center !important; justify-content:center !important; text-align:center !important;
  background:#cda349 !important; color:#0a0908 !important; border:0 !important;
  padding:11px 10px !important; border-radius:2px !important; min-height:0 !important; line-height:1.1 !important;
  font-size:10.5px !important; letter-spacing:.12em !important; text-transform:uppercase !important; font-weight:600 !important;
}
#elementor-popup-modal-589 .wpc-filters-submit-button:hover{ background:#d8b977 !important; color:#0a0908 !important }
#elementor-popup-modal-589 .wpc-filters-reset-button{
  display:flex !important; align-items:center !important; justify-content:center !important; text-align:center !important;
  background:transparent !important; color:#cbc4b6 !important; border:1px solid rgba(205,163,73,.4) !important;
  padding:11px 10px !important; border-radius:2px !important; min-height:0 !important; line-height:1.1 !important;
  font-size:10.5px !important; letter-spacing:.12em !important; text-transform:uppercase !important;
}
#elementor-popup-modal-589 .wpc-filters-reset-button:hover{ border-color:#cda349 !important; color:#cda349 !important }

/* ---- 8) ปุ่มปิด × ---- */
#elementor-popup-modal-589 .dialog-close-button{
  color:#cbc4b6 !important; opacity:.7; font-size:20px !important; top:22px !important; right:24px !important;
}
#elementor-popup-modal-589 .dialog-close-button:hover{ color:#cda349 !important; opacity:1 }

/* ---- 9) RESPONSIVE (มือถือ = การ์ดกลางล่าง เว้นขอบ) ---- */
@media (max-width:767px){
  html body #elementor-popup-modal-589 .dialog-widget-content{
    left:50% !important; right:auto !important; bottom:16px !important; top:auto !important;
    transform:translateX(-50%) !important;
    width:calc(100vw - 24px) !important; max-width:calc(100vw - 24px) !important;
    max-height:calc(100dvh - 32px) !important;
  }
  html body #elementor-popup-modal-589 .we-filter{ padding:34px 22px 14px !important }
}

/* =========================================================================
   หมายเหตุ — ตั้งในเว็บด้วย (CSS อย่างเดียวไม่พอ)
   -------------------------------------------------------------------------
   A. ⚠️ อาการ "เด้งไปกลางจอ" (โดยเฉพาะมือถือ) = ต้องแก้ที่ Popup Settings เท่านั้น
      เหตุผล: animation ของ Elementor วิ่งไป "ตำแหน่งที่ตั้งไว้" (ตอนนี้ Vertical=Center)
      ก่อน แล้ว CSS ค่อยดึงกลับมุมล่าง → เห็นเป็นการเด้ง (CSS อย่างเดียวหยุดไม่ได้)
      แก้: Popup Settings (ไอคอนเฟือง) → Layout:
        · Height = Fit To Content
        · Desktop: Position Horizontal = End · Vertical = **End**
        · Mobile (คลิกไอคอนมือถือด้านบน): Horizontal = **Center** · Vertical = **End**
      (ตั้ง Vertical=End ให้ตรงกับ CSS แล้วจะไม่เด้ง · CSS ข้อ 1 คุมระยะขอบให้)
      เสริม: ถ้าอยากให้นิ่งขึ้น เปลี่ยน Entrance Animation = "Fade In" (ไม่มีเลื่อนขึ้น)

   B. Filter Everything → filter set → ตั้งค่า:
        · «Apply Button» mode = ON  (เลือกแบรนด์แล้วยังไม่กรอง จนกดปุ่ม)
        · Apply Button label = ยืนยัน   · Reset Button label = ล้าง
      (ตอนนี้เปิดแล้ว = ปุ่ม Apply/Clear ในกล่อง · CSS ข้อ 7 จัดสีให้)
   ========================================================================= *//* End custom CSS */