/*
Theme Name:   Synergy Theme
Theme URI:    https://xstore.8theme.com
Description:  XStore is a multi-purpose theme that offers the ultimate WordPress and WooCommerce synergy, providing a comprehensive, all-in-one solution.
Author:       8theme
Author URI:   https://www.8theme.com
Template:     xstore
Version:      2.16
Text Domain:  xstore-child
Tags: e-commerce, two-columns, left-sidebar, right-sidebar, custom-background, custom-colors, custom-header, custom-menu, custom-logo, featured-images, full-width-template, threaded-comments, accessibility-ready, rtl-language-support, footer-widgets, sticky-post, theme-options, translation-ready, ecommerce, woocommerce, shop, elementor, business, corporate, blog, news, light, dark
*/

.jet-select__control,
.jet-sorting-select {
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.9);
  color: #0a1a4e;
  width: 100%;
}

/* Ensure option text is also dark (OS-rendered native dropdown) */
.jet-sorting-select option {
  color: #0a1a4e;
  background: #fff;
}

.woocommerce .woocommerce-MyAccount-navigation-wrapper.type-new {
  border-radius: 32px;
  border: 1px solid #fff;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0 4px 36.9px 0 rgba(0, 0, 0, 0.1);
  display: flex;
  padding: 40px 0 40px 0;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  align-self: stretch;
}

.woocommerce-MyAccount-navigation {
  width: 100%;
}

.MyAccount-user-info {
  justify-content: center;
}

.woocommerce-MyAccount-navigation-link:not(.is-active) {
  border-bottom: 1px solid #d9d9d9;
}

.woocommerce-MyAccount-navigation-link.is-active {
  border-top: 2px solid var(--Gradient-Green-Gradient, #0c9048);
  border-bottom: 2px solid var(--Gradient-Green-Gradient, #0c9048);
  background: linear-gradient(90deg, #f5f5f5 0%, #fff 100%);
}

.woocommerce-MyAccount-navigation-link a {
  justify-content: center;
}

.woocommerce-MyAccount-navigation-link.woocommerce-MyAccount-navigation-link--customer-logout {
  border: none;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  display: flex;
  justify-content: center;
}

.woocommerce-MyAccount-navigation-link--customer-logout a {
  border-radius: 36px;
  background: var(
    --Gradient-Orange-Gradient,
    linear-gradient(
      90deg,
      var(--Color-Brand-Secondary-Orange, #f15a2c) 0%,
      var(--Color-Brand-Secondary-Yellow, #f3ea07) 100%
    )
  );
  color: #fff;
  font-weight: 600;
  padding: 0.65rem 1.25rem;
  text-decoration: none;
  width: 100%;
  max-width: 80%;
  box-sizing: border-box;
  justify-content: center;
  border: none;
  transition: opacity 0.2s ease;
}

.woocommerce-MyAccount-navigation-link--customer-logout a:hover {
  opacity: 0.92;
  color: #fff;
}

.woocommerce-MyAccount-navigation-link--customer-logout a:focus-visible {
  outline: 2px solid #1e3a5f;
  outline-offset: 2px;
}

/* Container and Table Base */
.woocommerce-orders-table {
  border-collapse: collapse !important;
  border: none !important;
  width: 100%;
  font-family: "Sarabun", sans-serif; /* Recommended for Thai web design */
}

/* Header Styling */
.woocommerce-orders-table thead th {
  background-color: transparent !important;
  border-top: none !important;
  border-bottom: 2px solid #333 !important; /* Thick dark line like image */
  padding: 15px 10px !important;
  color: #000 !important;
  font-weight: 700 !important;
  font-size: 1.1em;
}

/* Table Body Cells */
.woocommerce-orders-table td,
.woocommerce-orders-table th.woocommerce-orders-table__cell-order-number {
  border-top: none !important;
  border-bottom: 1px solid #eee !important; /* Subtle gray line */
  padding: 20px 10px !important;
  vertical-align: middle !important;
  background: #fff !important;
}

/* Order ID Styling */
.woocommerce-orders-table__cell-order-number a {
  font-weight: 800 !important;
  color: #000 !important;
  text-decoration: none;
}

/* Status and Date text */
.woocommerce-orders-table__cell-order-date,
.woocommerce-orders-table__cell-order-status,
.woocommerce-orders-table__cell-order-total {
  color: #333 !important;
  font-weight: 400;
}

/* Gradient Button Styling (The "ดูรายละเอียด" Button) */
.woocommerce-orders-table__cell-order-actions a.button.view {
  background: linear-gradient(90deg, #4da352 0%, #d4e05b 100%) !important;
  color: #fff !important;
  border-radius: 50px !important; /* Pill shape */
  padding: 10px 25px !important;
  border: none !important;
  font-weight: 600 !important;
  text-shadow: none !important;
  box-shadow: none !important;
  display: inline-block;
}

.woocommerce-orders-table__cell-order-actions a.button.view:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

/* Pay Button - Primary (The "ชำระเงิน" Button) */
.woocommerce-orders-table__cell-order-actions a.button.pay {
  background: linear-gradient(90deg, #0c9048 0%, #58c06a 100%) !important;
  color: #fff !important;
  border-radius: 50px !important; /* Pill shape */
  padding: 10px 25px !important;
  border: none !important;
  font-weight: 700 !important;
  text-shadow: none !important;
  box-shadow: none !important;
  display: inline-block;
  transition:
    opacity 0.15s ease,
    transform 0.15s ease,
    box-shadow 0.15s ease;
}

.woocommerce-orders-table__cell-order-actions a.button.pay:hover {
  background: linear-gradient(90deg, #0a7a3d 0%, #3fb85a 100%) !important;
  opacity: 1;
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(12, 144, 72, 0.22);
}

.woocommerce-orders-table__cell-order-actions a.button.pay:focus,
.woocommerce-orders-table__cell-order-actions a.button.pay:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(12, 144, 72, 0.25);
}

/* Cancel Button - Subtle Red/Grey */
.woocommerce-orders-table__cell-order-actions a.button.cancel {
  background: transparent !important;
  color: #cc0000 !important; /* Muted Red */
  border: 2px solid #cc0000 !important;
  border-radius: 50px !important;
  padding: 8px 20px !important;
  font-weight: 600 !important;
}

.woocommerce-orders-table__cell-order-actions a.button.cancel:hover {
  background: #f8f8f8 !important;
}

/* Responsive adjustments for mobile */
@media screen and (max-width: 600px) {
  .woocommerce-orders-table__header {
    display: none;
  }
  .woocommerce-orders-table__row {
    display: block;
    margin-bottom: 20px;
    border-bottom: 2px solid #eee;
  }
  .woocommerce-orders-table__cell {
    display: block;
    text-align: right !important;
    padding-left: 50% !important;
    position: relative;
  }
  .woocommerce-orders-table__cell::before {
    content: attr(data-title);
    position: absolute;
    left: 10px;
    font-weight: bold;
  }
}

/* Force the Elementor Menu Cart container to fill the screen */
.elementor-menu-cart__container.elementor-lightbox {
  height: 100vh !important;
  top: 0 !important;
  bottom: 0 !important;
}

/* Ensure the main sidebar also fills the screen */
.elementor-menu-cart__main {
  height: 100vh !important;
  top: 0 !important;
}

/* ============================================================
   Galaxy Fold 6 + Tablet Responsive Fix
   Target: 768px – 1024px CSS viewport (เช่น Galaxy Fold กางออก ~852px)
   ============================================================ */
@media (min-width: 768px) and (max-width: 1024px) {

  /* 1. ป้องกัน horizontal overflow ทั้งหน้า */
  html,
  body {
    overflow-x: hidden !important;
    max-width: 100% !important;
  }

  /* 2. Force ทุก Elementor Section/Container เต็มความกว้าง */
  .elementor-section,
  .elementor-container,
  .e-con,
  .e-con-full {
    width: 100% !important;
    max-width: 100% !important;
    min-width: unset !important;
    box-sizing: border-box !important;
  }

  /* 3. Hero Slider เต็มความกว้าง */
  .swiper,
  .swiper-container,
  .e-n-carousel,
  .elementor-widget-n-carousel {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* 4. Layout 2 คอลัมน์ → Stack เป็น 1 คอลัมน์ */
  .elementor-row,
  .e-con > .e-con,
  .elementor-section > .elementor-container > .elementor-row {
    flex-wrap: wrap !important;
  }

  .elementor-column,
  .elementor-col-50,
  .elementor-col-60,
  .elementor-col-40,
  [class*="elementor-col-"] {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* 5. Product Grid → 2 คอลัมน์ */
  .elementor-loop-container.elementor-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }

  /* 6. รูปภาพไม่ overflow */
  img,
  .elementor-widget-image img,
  .attachment-full {
    max-width: 100% !important;
    height: auto !important;
  }

  /* 7. Text ขนาดพอดี ไม่เล็กเกินไป */
  .elementor-heading-title {
    font-size: clamp(1.4rem, 3vw, 2.2rem) !important;
  }

}

/* ============================================================
   Galaxy Fold 6 — Round 2 Fixes (ตาม user screenshots จริง)
   ============================================================ */
@media (min-width: 768px) and (max-width: 1024px) {

  /* ─── Fix A: Icon benefit section ───────────────────────────
     ปัญหา: 4 benefit icons อยู่ใน flex-column container
             → stack 1 ต่อแถว กินพื้นที่มาก
     แก้: บังคับ flex-row wrap → แสดง 2 icons ต่อแถว
     Target: data-id="4e4f4ec" (parent container ที่ Playwright ยืนยัน)
     Root cause: Elementor gap between items prevents 2-per-row at 50%
     Solution: zero gap, use calc(50%) with box-sizing trick
  ─────────────────────────────────────────────────────────── */
  [data-id="4e4f4ec"] {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    column-gap: 0 !important;
    row-gap: 8px !important;
  }

  /* แต่ละ icon child → 50% width (2 per row), gap=0 แก้ด้วย padding */
  [data-id="4e4f4ec"] > .e-con-full {
    width: 50% !important;
    min-width: 50% !important;
    max-width: 50% !important;
    flex: 0 0 50% !important;
    box-sizing: border-box !important;
    padding: 10px 12px !important;
    margin: 0 !important;
  }

  /* icon ภายในแต่ละ cell: จัด center */
  [data-id="4e4f4ec"] .elementor-icon-box-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  /* ─── Fix B: Review / Testimonial card — blank space ────────
     ปัญหา: review photo grid ใช้ align-items:stretch
             → card สั้นถูก stretch จนมี blank space ด้านล่าง
     แก้: ใช้ align-items: flex-start บน grid container
  ─────────────────────────────────────────────────────────── */

  /* Review grid containers */
  [data-id="83fa15d"],
  [data-id="088c6fc"] {
    align-items: flex-start !important;
  }

  /* Individual review cards: height auto, no stretch */
  [data-id="b401fd8"],
  [data-id="fb2addc"] {
    height: auto !important;
    align-self: flex-start !important;
  }

  /* ─── Fix C: "ลูกค้าของเรา" testimonial card internal gap ───
     ปัญหา: card ใช้ justify-content:space-between
             → ช่องว่างขนาดใหญ่ระหว่าง review text กับ product photo
     แก้: เปลี่ยนเป็น flex-start + gap
  ─────────────────────────────────────────────────────────── */
  [data-id="b910f40"] [data-id="fb2addc"] > .e-con-inner,
  [data-id="b910f40"] [data-id="fb2addc"] {
    justify-content: flex-start !important;
    gap: 12px !important;
  }

  /* ─── Fix D: Collapsed Elementor Carousel / Swiper ──────────
     ปัญหา: swiper testimonial ที่ y≈12831 มี width=0, height=0
             → ไม่ render → เห็นแค่ wrapper เปล่า
     แก้: force swiper container ให้มีขนาดที่ถูกต้อง
  ─────────────────────────────────────────────────────────── */
  .elementor-widget-n-carousel .e-n-carousel,
  .e-n-carousel.swiper {
    width: 100% !important;
    min-width: 100% !important;
    overflow: visible !important;
  }

  .e-n-carousel .swiper-wrapper {
    width: 100% !important;
    min-height: 0 !important;
  }

  .e-n-carousel .swiper-slide {
    width: 100% !important;
    height: auto !important;
  }

  /* ─── Fix E: Blog post card — brand badge overlap ───────────
     ปัญหา: badge/label widget ทับ title text บนการ์ด blog
     แก้: ซ่อน absolute-positioned badge ที่ overflow ออกจาก thumbnail
  ─────────────────────────────────────────────────────────── */
  .elementor-post .elementor-post__thumbnail {
    overflow: hidden !important;
    position: relative !important;
  }

  /* ป้องกัน overlay elements หลุดออกจาก thumbnail boundary */
  .elementor-post .elementor-post__thumbnail > * {
    max-width: 100% !important;
  }

  /* XStore theme — post card media badge */
  .et-badge,
  .post-badge,
  .elementor-post__badge,
  .post-thumbnail-overlay {
    display: none !important;
  }

  /* ─── Fix F: Reduce excessive spacing in benefit icons ──────
     ลด padding ด้านบน-ล่าง ของแต่ละ icon-box
  ─────────────────────────────────────────────────────────── */
  [data-id="5c64315"] .elementor-icon-box-description {
    font-size: 0.95rem !important;
  }

  [data-id="5c64315"] .elementor-icon-box-content {
    padding: 0 8px !important;
  }

}

/* ============================================================
   Fix G: Floating Contact Buttons (โทร / LINE)
   ใช้กับทุก viewport — ไม่จำกัดแค่ tablet
   ปัญหา 1 (mobile <768px): Elementor ตั้ง mobile = bottom bar เต็มจอ
   ปัญหา 2 (tablet 768-1024px): CSS width:100% ขยาย container → left:-16px
   แก้: บังคับ auto-width + right-side floating position
   ============================================================ */
[data-id="a84b026"] {
  position: fixed !important;
  width: auto !important;
  max-width: 116px !important;
  min-width: 0 !important;
  left: auto !important;
  right: 0 !important;
  bottom: 90px !important;
  top: auto !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 14px 7px !important;
  z-index: 9999 !important;
  transform: none !important;
  border-radius: 800px !important;
}

/* ปุ่มลูกแต่ละอัน — ไม่ให้ขยายเกิน */
[data-id="a84b026"] > .elementor-widget {
  width: auto !important;
  max-width: 100px !important;
}

[data-id="a84b026"] img {
  width: 86px !important;
  height: 86px !important;
  display: block !important;
}

/* Tablet: ขนาดกลาง */
@media (max-width: 1024px) {
  [data-id="a84b026"] {
    max-width: 96px !important;
    gap: 10px !important;
    padding: 12px 6px !important;
    bottom: 80px !important;
  }
  [data-id="a84b026"] > .elementor-widget {
    max-width: 84px !important;
  }
  [data-id="a84b026"] img {
    width: 72px !important;
    height: 72px !important;
  }
}

/* Mobile: ขนาดเล็ก */
@media (max-width: 767px) {
  [data-id="a84b026"] {
    max-width: 74px !important;
    gap: 7px !important;
    padding: 7px 5px !important;
    bottom: 70px !important;
  }
  [data-id="a84b026"] > .elementor-widget {
    max-width: 64px !important;
  }
  [data-id="a84b026"] img {
    width: 56px !important;
    height: 56px !important;
  }
}

/* ============================================================
   Fix H: Mobile Popup Menu (Elementor Popup ID 34450)
   Style: ตัวหนังสือใหญ่ จัดกลาง ไม่มีเส้นขีด (เหมือน design draft)
   ============================================================ */

/* Menu items: ใหญ่ + จัดกลาง + ไม่มีขีด */
#elementor-popup-modal-34450 .elementor-nav-menu .elementor-item {
  font-size: 9px !important;
  font-weight: 400 !important;
  padding: 10px 16px !important;
  line-height: 1.3 !important;
  color: rgb(33, 37, 41) !important;
  text-align: center !important;
  display: block !important;
  width: 100% !important;
  border: none !important;
  background: transparent !important;
}

/* Active item: bold + navy เท่านั้น ไม่มี background ไม่มี border-left */
#elementor-popup-modal-34450 .elementor-nav-menu--dropdown a.elementor-item-active,
#elementor-popup-modal-34450 .elementor-nav-menu--dropdown a.highlighted {
  background-color: transparent !important;
  color: rgb(0, 0, 56) !important;
  font-weight: 700 !important;
  border-left: none !important;
  padding-left: 16px !important;
}

/* Hover state: สีเข้มขึ้นเล็กน้อย */
#elementor-popup-modal-34450 .elementor-nav-menu--dropdown a:hover,
#elementor-popup-modal-34450 .elementor-nav-menu--dropdown a:focus {
  background-color: transparent !important;
  color: rgb(0, 0, 56) !important;
}

/* Sub-items (dropdown submenu) */
#elementor-popup-modal-34450 .elementor-nav-menu .elementor-sub-item {
  font-size: 7px !important;
  padding: 8px 16px !important;
  color: rgb(80, 85, 90) !important;
  text-align: center !important;
}

/* ลบเส้นขีดระหว่าง items ทั้งหมด */
#elementor-popup-modal-34450 .elementor-nav-menu--dropdown li,
#elementor-popup-modal-34450 .elementor-nav-menu--dropdown li:not(:last-child),
.elementor-34450 .elementor-element-b8152cf .elementor-nav-menu--dropdown li,
.elementor-34450 .elementor-element-b8152cf .elementor-nav-menu--dropdown li:not(:last-child) {
  border-bottom: none !important;
  border-top: none !important;
}

/* จัด nav-menu list ให้ center */
#elementor-popup-modal-34450 ul.elementor-nav-menu {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  padding: 0 !important;
}

#elementor-popup-modal-34450 ul.elementor-nav-menu li.menu-item {
  text-align: center !important;
  border: none !important;
}

/* X close button */
#elementor-popup-modal-34450 .dialog-close-button {
  top: 14px !important;
  right: 14px !important;
  width: 36px !important;
  height: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ============================================================
   Fix H2: Popup Icon Row — Cart + Profile circular buttons
   ============================================================ */
.popup-icon-row {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 20px !important;
  padding: 28px 0 36px !important;
}

/* ── Cart icon ── orange gradient circle */
.popup-cart-icon {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 60px !important;
  height: 60px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #f5a623 0%, #f07f1c 100%) !important;
  text-decoration: none !important;
  box-shadow: 0 4px 14px rgba(240, 127, 28, 0.35) !important;
  flex-shrink: 0 !important;
}

/* Cart badge */
.popup-cart-count {
  position: absolute !important;
  top: -4px !important;
  right: -4px !important;
  min-width: 20px !important;
  height: 20px !important;
  border-radius: 50% !important;
  background: #e63333 !important;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  padding: 0 4px !important;
}

/* ── Profile icon ── SVG มี circular background ในตัวเองอยู่แล้ว → ไม่ต้อง div bg */
.popup-profile-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 60px !important;
  height: 60px !important;
  border-radius: 50% !important;
  background: none !important;     /* SVG provides its own gradient circle */
  box-shadow: none !important;
  text-decoration: none !important;
  flex-shrink: 0 !important;
  overflow: hidden !important;
}

/* Show the SVG at full size, no filter (SVG already has white icon on gradient bg) */
.popup-profile-icon img {
  width: 60px !important;
  height: 60px !important;
  object-fit: contain !important;
  filter: none !important;         /* Override inline filter:brightness(0) invert(1) */
  border-radius: 50% !important;
}

/* ============================================================
   Fix I: Popup submenu — blue triangle indicator + submenu styles
   เป้าหมาย: สินค้าของเรา มี ▶ สีน้ำเงินกดขยาย submenu
   root cause: .sub-arrow (not .elementor-sub-arrow) อยู่ใน <a> display:block
               → ต้องใช้ position:absolute ดึงไปไว้ขวาของ item
   ============================================================ */

/* Make parent anchor position:relative so arrow can anchor to it */
#elementor-popup-modal-34450 .menu-item-has-children > a.elementor-item {
  position: relative !important;
}

/* Position sub-arrow absolutely on the RIGHT, vertically centered */
#elementor-popup-modal-34450 .sub-arrow {
  position: absolute !important;
  right: 16px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: auto !important;
  height: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Hide the default fa-plus SVG */
#elementor-popup-modal-34450 .sub-arrow svg {
  display: none !important;
}

/* Blue downward-pointing triangle via ::after (▼ by default, ▲ when open) */
#elementor-popup-modal-34450 .sub-arrow::after {
  content: '' !important;
  display: block !important;
  width: 0 !important;
  height: 0 !important;
  border-style: solid !important;
  border-width: 10px 6px 0 6px !important;
  border-color: #1a6fd4 transparent transparent transparent !important;
  transition: transform 0.25s ease !important;
}

/* Rotate triangle upward when submenu is open (SmartMenus adds .highlighted on <a>) */
#elementor-popup-modal-34450 .menu-item-has-children > a.highlighted .sub-arrow::after,
#elementor-popup-modal-34450 .menu-item-has-children.highlighted > a .sub-arrow::after {
  transform: rotate(180deg) !important;
}

/* Submenu (sub-menu) styling — full-width, no shadow */
#elementor-popup-modal-34450 .elementor-nav-menu .sub-menu {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 0 4px 0 !important;
  min-width: unset !important;
  width: 100% !important;
  position: static !important;
}

/* Sub-menu items */
#elementor-popup-modal-34450 .sub-menu li {
  border: none !important;
}

#elementor-popup-modal-34450 .sub-menu a.elementor-sub-item {
  font-size: 7px !important;
  font-weight: 400 !important;
  color: rgb(60, 70, 80) !important;
  text-align: center !important;
  padding: 6px 16px !important;
  background: transparent !important;
  display: block !important;
}

#elementor-popup-modal-34450 .sub-menu a.elementor-sub-item:hover {
  color: #1a6fd4 !important;
  background: transparent !important;
}

/* ============================================================
   Fix J: Filter bar cleanup — hide รับน้ำหนักสูงสุด, น้ำหนักตัวรถ, การพับเก็บ
   Keep only: กรองตามราคา (af55371) + เรียงตาม (dd3666e)
   Hides the e-con containers (3d4f444f, 63bbc214, 2b8169ec)
   Sort options replaced with price-only via functions.php JS
   ============================================================ */
.elementor-element-3d4f444f,
.elementor-element-63bbc214,
.elementor-element-2b8169ec {
  --display: none !important;  /* Elementor uses display:var(--display), so override the variable */
  display: none !important;
}

/* ============================================================
   Fix K: Site-wide Headline weight refinement
   Bold (700) → SemiBold (600) for premium / medical-grade tone
   NOTE: @import must be at top of stylesheet — instead we
   inject the Google Fonts URL via inc/enqueue.php as <link>.
   Applies to:
     - All <h1>, <h2>, <h3>, <h4>
     - Elementor heading widgets (whatever tag they render as)
     - Theme-template inline headings
   Does NOT touch:
     - Buttons (keep current weight)
     - Body text
     - Form labels
   ============================================================ */

h1, h2, h3, h4,
.elementor-heading-title,
.elementor-widget-heading h1,
.elementor-widget-heading h2,
.elementor-widget-heading h3,
.elementor-widget-heading h4,
.elementor-widget-heading h5,
.elementor-widget-heading h6,
.elementor-widget-heading .elementor-heading-title,
.elementor-widget-heading div.elementor-heading-title {
  font-weight: 600 !important;
}

/* Inline Elementor styles that name the font literally (NotoSansThai-Bold)
   — force the actual weight to 600 even when font-family hints Bold */
[style*="NotoSansThai-Bold"],
.elementor-heading-title[style*="font-family"] {
  font-weight: 600 !important;
}


/* =====================================================================
   SYNERGY PRODUCT PRICE - hide duplicate WooCommerce variation price
   Added by Claude 2026-06-06.
   The custom Synergy price (.sy-product-price-summary, has "BAHT" suffix)
   is the intended display. WooCommerce default variation price was
   showing as a visual duplicate directly above it. Hide it (DOM stays
   intact so add-to-cart/variation JS keeps working).
   ===================================================================== */
.single_variation_wrap .woocommerce-variation-price {
  display: none !important;
}
/* END PRODUCT PRICE DEDUPE */


/* ============================================================
   SYNERGY CODEX-REGRESSION FIXES — CSS group (Claude 2026-06-06)
   Browser-free overrides in the child theme. Avoids the fragile
   wpcode_snippets option. Each rule maps to a user-reported item.
   ============================================================ */

/* [#1A] Hide the orphan floating contact (tel/LINE/chat) widget site-wide.
   Source DOM is an Elementor footer container; WPCode 36544's intended
   hide rule never renders (cascade). This guarantees it stays hidden. */
.elementor-element-a84b026 {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* [#2] Product pages showed TWO hamburger toggles. Remove the duplicate
   Codex "early menu" (toggle + drawer + backdrop); keep the native
   Elementor hamburger (opens popup 34450) as the single menu. */
body.single-product .codex-product-early-menu-toggle,
body.single-product .codex-product-early-menu,
body.single-product .codex-product-early-menu-backdrop {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* [#5B] Add-to-cart button had TWO cart icons. Keep only the controlled
   .sy-product-add-cart-icon SVG; suppress the native Woo/Elementor icon. */
body.single-product .single_add_to_cart_button > i,
body.single-product .single_add_to_cart_button .elementor-button-icon,
body.single-product .single_add_to_cart_button > svg,
body.single-product .single_add_to_cart_button::before,
body.single-product .single_add_to_cart_button::after {
  content: none !important;
  display: none !important;
}
/* (re-show the intended injected icon if it is nested as an <svg>) */
body.single-product .single_add_to_cart_button .sy-product-add-cart-icon,
body.single-product .single_add_to_cart_button .sy-product-add-cart-icon svg {
  display: inline-flex !important;
}

/* [#5A] Buy-now ("ซื้อสินค้า") button: its icon span is empty. Inject a
   credit-card icon via CSS mask (uses currentColor to match the label). */
body.single-product .sy-product-buy-now-button .sy-product-button-icon {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-right: 8px;
}
body.single-product .sy-product-buy-now-button .sy-product-button-icon:empty::before {
  content: "";
  display: inline-block;
  width: 22px;
  height: 22px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCcgZmlsbD0nbm9uZSc+PHJlY3QgeD0nMicgeT0nNScgd2lkdGg9JzIwJyBoZWlnaHQ9JzE0JyByeD0nMicgc3Ryb2tlPSdibGFjaycgc3Ryb2tlLXdpZHRoPScyJy8+PHBhdGggZD0nTTIgOS41aDIwJyBzdHJva2U9J2JsYWNrJyBzdHJva2Utd2lkdGg9JzInIHN0cm9rZS1saW5lY2FwPSdyb3VuZCcvPjxwYXRoIGQ9J002IDE1aDQnIHN0cm9rZT0nYmxhY2snIHN0cm9rZS13aWR0aD0nMicgc3Ryb2tlLWxpbmVjYXA9J3JvdW5kJy8+PC9zdmc+") center / contain no-repeat;
          mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCcgZmlsbD0nbm9uZSc+PHJlY3QgeD0nMicgeT0nNScgd2lkdGg9JzIwJyBoZWlnaHQ9JzE0JyByeD0nMicgc3Ryb2tlPSdibGFjaycgc3Ryb2tlLXdpZHRoPScyJy8+PHBhdGggZD0nTTIgOS41aDIwJyBzdHJva2U9J2JsYWNrJyBzdHJva2Utd2lkdGg9JzInIHN0cm9rZS1saW5lY2FwPSdyb3VuZCcvPjxwYXRoIGQ9J002IDE1aDQnIHN0cm9rZT0nYmxhY2snIHN0cm9rZS13aWR0aD0nMicgc3Ryb2tlLWxpbmVjYXA9J3JvdW5kJy8+PC9zdmc+") center / contain no-repeat;
}

/* [#7 / WS2-3 / WS4-9] Dark-navy fill on the DESKTOP hero. Darker navy on the LEFT, fade out by
   the MIDDLE, NO mask on the right. WS4-9: navy intensity +20% (alpha x1.2, capped at 1.0). */
@media (min-width: 768px) {
  .synergy-hero-overlay {
    background: linear-gradient(90deg, rgba(10,26,78,1) 0%, rgba(10,26,78,0.89) 26%, rgba(10,26,78,0.34) 46%, rgba(10,26,78,0) 60%, rgba(10,26,78,0) 100%) !important;
  }
}

/* [#8] Move the "ดูวิดีโอสินค้า" label up snug under the play icon
   (Codex video guard set margin-top:12px; tighten to 2px). */
body.single-product .codex-pemvg-lite-youtube-text {
  margin-top: 2px !important;
}
/* END SYNERGY CODEX-REGRESSION FIXES — CSS group */

/* ============================================================
   SYNERGY WORK SET 3 — CSS group (Claude 2026-06-06)
   ============================================================ */

/* [WS3-1] Exactly ONE product video. WPCode 37515 clones the ORIGINAL replaced-Elementor
   video (.codex-product-video-lite-wrap) into a .codex-pemvg-visible-video-section but never
   hides the source -> two play buttons render (race-dependent; user saw 2 in incognito).
   Hide the original source (the styled clone is what shows). The mu-plugin un-hides the
   original as a fallback if a product has NO visible clone. Also hide any 2nd+ clone. */
body.single-product .codex-product-video-lite-wrap { display: none !important; }
.codex-pemvg-visible-video-section ~ .codex-pemvg-visible-video-section { display: none !important; }

/* [WS3-3] Desktop product Hero -10% height, cropping ONLY the bottom of the image.
   Hero height is derived from aspect-ratio:2/1 on .synergy-hero-bg--desktop (inline in
   inc/product-hero.php). 20/9 (~2.2222:1) makes the box ~10% shorter at the same width
   (703 -> ~632px). cover + center top fills the shorter box and anchors the TOP so only the
   bottom is clipped. Higher specificity + !important beats the inline 0,1,0 rule. */
@media (min-width: 768px) {
  .synergy-product-hero .synergy-hero-bg--desktop {
    aspect-ratio: 20 / 9 !important;
    background-size: cover !important;
    background-position: center top !important;
  }
}

/* [WS3-4] Product gallery thumbnail strip (the "2nd row" under the main image): the swiper
   track .thumbnails-list has margin-left:-5px, so the leftmost thumbnail sits 5px left of the
   overflow:hidden container and gets clipped. Zero the negative margin so it aligns flush. */
.woocommerce-product-gallery .swiper-control-bottom .swiper-wrapper.thumbnails-list { margin-left: 0 !important; }
/* END SYNERGY WORK SET 3 — CSS group */

/* ============================================================
   SYNERGY WORK SET 4 — CSS group (Claude 2026-06-07)
   ============================================================ */

/* [WS4-9] Navy hero overlay +20% intensity on MOBILE (desktop bumped in the WS2-3 rule above).
   Beats the inline product-hero navy rule via higher specificity (doubled last class) + !important. */
@media (max-width: 767px) {
  html body.single-product[class*="postid-"] .synergy-hero-outer .synergy-product-hero .synergy-hero-overlay.synergy-hero-overlay {
    background: linear-gradient(180deg, rgba(1,4,64,0) 0%, rgba(1,4,64,0.14) 38%, rgba(1,4,64,0.84) 70%, rgba(1,4,64,1) 100%) !important;
  }
}

/* [WS4-7] Center the play icon vertically in the product video (caption removed in the mu-plugin). */
body.single-product .codex-pemvg-visible-video-frame { display: flex !important; align-items: center !important; justify-content: center !important; }
body.single-product .codex-pemvg-lite-youtube { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; }

/* [WS4-10] No separator line above the "พิเศษ!" offer strip. Inspection (desktop+mobile)
   found no border/shadow/pseudo-element on the strip, its title/word, or any ancestor — the
   previously-reported line is already gone (removed when the offer strip was restyled in
   WS4-4/WS4-5). This guard keeps it gone if a snippet ever re-adds a top border/separator. */
body.single-product .sy-website-offer-strip,
body.single-product .sy-website-offer-title,
body.single-product .sy-offer-special-word {
  border-top: 0 !important;
  box-shadow: none !important;
}
body.single-product .sy-website-offer-strip::before,
body.single-product .sy-website-offer-title::before { content: none !important; }

/* [WS4-2] FAQ section (.sy-product-faq-reuse) showed ALL THREE category panels at once
   (electric + manual + service = 23 Q&As mixed together). Root cause: an errant snippet rule
   `#synergy-product-faq-reuse-section .syf-list{display:grid !important}` forced every panel
   visible, defeating the built-in radio-tab mechanism. Restore tab switching: hide all panels,
   then show only the one whose tab radio is checked (2-id specificity + !important beats the
   errant rule). Verified: electric tab -> electric only; manual tab -> manual only. */
html body.single-product #synergy-product-faq-reuse-section .syf-content-panel .syf-list { display: none !important; }
html body.single-product #synergy-product-faq-reuse-section #synproductfaq-electric:checked ~ .syf-content-panel .syf-electric-panel,
html body.single-product #synergy-product-faq-reuse-section #synproductfaq-manual:checked ~ .syf-content-panel .syf-manual-panel,
html body.single-product #synergy-product-faq-reuse-section #synproductfaq-service:checked ~ .syf-content-panel .syf-service-panel { display: grid !important; }

/* [WS4-3] Gap from the LAST feature banner card to the FAQ section was 140px (the feature
   section container's bottom padding: .elementor-element-5832c48 pb 60 + outer e395dbd inner
   pb 80) vs only 22px between cards. Reduce so the last-banner -> FAQ gap matches the 22px
   inter-card gap. IDs live in the shared single-product template, so this applies to all
   products. Verified: last-card -> FAQ = 22px == inter-card 22px. */
body.single-product .elementor-element-5832c48 { padding-bottom: 0 !important; }
body.single-product .elementor-element-e395dbd > .e-con-inner { padding-bottom: 22px !important; }
/* END SYNERGY WORK SET 4 — CSS group */

/* ===== SYNERGY WORK SET 6 ===== */
/* [WS6-1 v2 / งานชุดที่1 #4] Tablet homepage hero = desktop-style 2-COLUMN overlay (heading +
   subtitle + CTA on the LEFT over the full-bleed photo whose subject sits on the RIGHT), with the
   3 feature cards moved to a horizontal ROW pinned at the BOTTOM (frees the previously-crammed
   right side). Replaces the earlier stacked-banner treatment per owner request 2026-06-09.
   Range 768-1024 only; desktop (>1024) + mobile (<768) keep their own layouts. */
@media (min-width: 768px) and (max-width: 1024px) {
  html body.home .synergy-hero-v2 {
    aspect-ratio: auto !important; height: auto !important;
    min-height: 480px !important; max-height: none !important;
    display: block !important; position: relative !important; overflow: hidden !important;
    background: #eef5fc !important;
  }
  html body.home .synergy-hero-v2 .syn-h2-overlay { display: block !important; }
  html body.home .synergy-hero-v2 .syn-h2-bg {
    position: absolute !important; inset: 0 !important; order: 0 !important;
    width: 100% !important; height: 100% !important;
    aspect-ratio: auto !important; max-height: none !important;
  }
  html body.home .synergy-hero-v2 .syn-h2-bg img,
  html body.home .synergy-hero-v2 .syn-h2-bg picture {
    width: 100% !important; height: 100% !important;
    object-fit: cover !important; object-position: right center !important;
  }
  html body.home .synergy-hero-v2 .syn-h2-inner {
    position: absolute !important; inset: 0 !important; transform: none !important;
    display: block !important; width: 100% !important; max-width: none !important;
    margin: 0 !important; padding: 0 !important; height: 100% !important;
  }
  html body.home .synergy-hero-v2 .syn-h2-content {
    position: absolute !important; left: 26px !important; top: 34px !important; transform: none !important;
    width: 54% !important; max-width: 420px !important; text-align: left !important;
  }
  html body.home .synergy-hero-v2 .syn-h2-desc {
    margin: 0 0 18px !important; max-width: none !important;
  }
  html body.home .synergy-hero-v2 .syn-h2-cards {
    position: absolute !important; left: 16px !important; right: 16px !important;
    top: auto !important; bottom: 16px !important; transform: none !important;
    display: flex !important; flex-direction: row !important; gap: 10px !important;
    width: auto !important; max-width: none !important; margin: 0 !important; align-items: stretch !important;
  }
  html body.home .synergy-hero-v2 .syn-h2-card {
    flex: 1 1 0 !important; min-width: 0 !important; align-items: flex-start !important;
  }
}
/* END SYNERGY WORK SET 6 */


/* ===== SYNERGY WORK SET 7 — งานชุดที่ 1 (Claude 2026-06-09) ===== */

/* [WS7-6] Product page right-edge cut-off on tablet. Custom .sy-product-* blocks are fixed
   width:810px (codex-product-page-layout-fixes-20260526), wider than tablet viewports (<=1024).
   With html/body overflow-x:hidden this clips them on the right. Cap to parent width on <=1024
   so they fit (max-width < width wins, no need to fight the 810 rule). */
@media (max-width: 1024px) {
  html body.single-product .sy-product-faq,
  html body.single-product .sy-product-price-summary,
  html body.single-product .sy-product-price-regular,
  html body.single-product .sy-product-price-sale,
  html body.single-product .sy-product-quantity-control,
  html body.single-product .sy-product-action-row,
  html body.single-product .sy-product-benefit-list {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* [WS7-2] Quantity stepper minus is disabled (correct) only at qty=1, but codex JS inline
   opacity:0.4 made it look broken. Soften so it reads intentional. Function verified OK
   (+/- change qty and sync to WooCommerce qty input; minus re-enables at qty>=2). */
html body.single-product .sy-product-quantity-minus[disabled],
html body.single-product .sy-product-quantity-minus:disabled {
  opacity: 0.55 !important;
}

/* [WS7-3] "เลือกตามการใช้งาน" category images cropped on mobile. Source 720x1080 (ratio 2/3),
   media box rendered ~0.57 + object-fit:cover => cropped. Force the true 2/3 ratio on mobile
   so the whole image shows uncropped. */
@media (max-width: 1024px) {
  #category-section .synergy-category-card .synergy-category-media {
    aspect-ratio: 720 / 1080 !important;
    height: auto !important;
  }
  #category-section .synergy-category-card .synergy-category-media img {
    height: 100% !important;
    object-fit: cover !important;
  }
}

/* [WS7-5] Recommended-products loop grid under "เลือกตามการใช้งาน" was 1 column on mobile.
   Make it 2 columns. Scoped to #category-section so other loop grids are unaffected. */
@media (max-width: 767px) {
  #category-section .elementor-loop-container.elementor-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* [WS7-1 / งานชุดที่1 #1] Full product FAQ is relocated to the bottom (before Heart Care banner) by
   the wp_footer script in functions.php. Hide it until moved so it does not flash under the hero. */
#synergy-product-faq-reuse-section:not([data-syn-fullfaq-moved]) { display: none !important; }
/* END SYNERGY WORK SET 7 */


/* ===== SYNERGY WORK SET 8 — งานชุดที่ 2 (Claude 2026-06-10) ===== */

/* [WS8-3] Product page header was unclickable: the whole header (.elementor-location-header + children)
   had pointer-events:none, so the sticky menu fell through to the product hero/gallery zoom below
   (magnifier cursor, dead menu) when it overlapped the image on scroll. Force header interactive. */
body.single-product .elementor-location-header,
body.single-product .elementor-location-header * {
  pointer-events: auto !important;
}

/* [WS8-2a] External (patient-transfer) products: remove the redundant "ซื้อสินค้า" add-to-cart button;
   keep only "ซื้อสินค้าบนเว็บ iMOVE". */
body.synergy-external-product .sy-product-buy-now-button { display: none !important; }

/* [WS8-2b] Mobile: remaining external buy button ~20% longer (was ~50% of the row -> ~60%) + centred. */
@media (max-width: 767px) {
  body.synergy-external-product .sy-product-action-row { justify-content: center !important; }
  body.synergy-external-product .sy-product-add-cart-button {
    flex: 0 0 auto !important; width: 60% !important; max-width: 100% !important;
  }
}

/* [WS8-1] External products mobile: grey spec band (.elementor-element-7c29813, margin-top:-42px to sit
   flush under the description on normal products) overlaps the mini FAQ because external products have
   no description section. Drop the negative pull on these products (mobile). */
@media (max-width: 767px) {
  body.synergy-external-product .elementor-element-7c29813 { margin-top: 0 !important; }
}

/* [WS8-4] Footer Synergy logo (Frame-2.png, natural 268x65) rendered ~558px on tablet (2x upscale ->
   pixelated). Cap to natural width on tablet/mobile so it stays sharp. */
@media (max-width: 1024px) {
  .elementor-location-footer img[src*="Frame-2"],
  .elementor-location-footer img[data-src*="Frame-2"],
  .elementor-31234 img[src*="Frame-2"],
  .elementor-31234 img[data-src*="Frame-2"] {
    max-width: 268px !important; height: auto !important;
  }
}
/* END SYNERGY WORK SET 8 */