/* ============================================================
   swknockdown · header (mega menu + drawer) บน Elementor + HFE
   ยกจาก _build/design.css ของ header-footer-design.html โทน A ตาม context/DESIGN.md
   เปลี่ยนชื่อคลาสเป็น prefix swkm- ทุกตัว แล้วเติมกฎที่ต้องมีเฉพาะบน Elementor
   ⛔ แก้ที่ไฟล์นี้ในเครื่องแล้วอัปโหลดทับ ห้ามแก้บนเซิร์ฟเวอร์ตรง ๆ
   ============================================================ */

/* ---------- token (scope ที่ header เท่านั้น ไม่ยิงทั้งเว็บ) ---------- */
#swkd-header,
.swkm-drawer {
  --paper: #F7F6F2;
  --white: #FFFFFF;
  --ink-900: #131417;
  --ink-800: #23252B;
  --ink-700: #3A3D44;
  --ink-600: #4A4D53;
  --ink-500: #63666B;
  --ink-100: #E5E2DA;
  --ink-50: #EEEBE4;
  --on-dark: #F2F1EC;
  --coral: #E7623E;
  --coral-hover: #EC7A5B;
  --e-float: 0 16px 60px rgba(19, 20, 23, .14);
  --font: "Anuphan", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Sarabun", "Anuphan", ui-sans-serif, system-ui, sans-serif;
  --swkm-h: 72px;
  --dur: 180ms;
}

/* ---------- โครงแถบบน Elementor ----------
   sticky ต้องยึดที่ #masthead ของ theme ไม่ใช่ container ของเรา (hfe-traps ข้อ 2)
   selector ต้องชนะ .ehf-header #masthead{position:relative} ของ HFE */
body.ehf-header #masthead {
  position: sticky;
  top: 0;
  z-index: 99;
}
/* ตอน login แถบ admin ของ WordPress สูง 32px (มือถือ 46px และเลิก fixed ที่ 600 ลงมา)
   sticky ต้องเลื่อนตาม ไม่งั้นแถบ admin ทับส่วนบนของ header ตอนเลื่อนหน้า · ค่าเดียวกับที่ WP core ใช้กับ html{margin-top} */
body.admin-bar.ehf-header #masthead {
  top: 32px;
}
@media (max-width: 782px) {
  body.admin-bar.ehf-header #masthead {
    top: 46px;
  }
}
@media (max-width: 600px) {
  body.admin-bar.ehf-header #masthead {
    top: 0;
  }
}
/* ตอนแผงเปิด menu.js ตรึงหน้าด้วย body{position:fixed} กันหน้าเลื่อน แต่ body ที่เป็น fixed จะหลุดจาก
   html{margin-top:46px} ที่ WordPress ใช้เว้นที่ให้แถบ admin · ที่ ≤600px แถบ admin เป็น absolute และอยู่ใน body
   จึงเลื่อนขึ้นมาพร้อม header แล้วทับหัว header พอดี 46px (Mark เจอ 2026-09-08 · ทำซ้ำได้ที่ 390 และ 500
   เฉพาะตอนหน้ายังไม่ถูกเลื่อน · ที่ ≥601 ไม่เป็นเพราะแถบเป็น fixed อยู่แล้วและ sticky ของ header หลบไว้ 46 แล้ว)
   แก้ด้วยการตรึงแถบ admin ไว้กับขอบจอตอนแผงเปิด แล้วดัน sticky ของ header ลงมาหลบ 46 เท่ากับจอใหญ่
   วัดแล้วได้ ทับ 0px ช่องว่าง 0px ทั้งที่ 390/500/700/780 และทั้งตอน scroll 0 กับ 300 */
@media (max-width: 600px) {
  body.admin-bar.swkm-nav-open #wpadminbar {
    position: fixed !important;
    top: 0 !important;
  }
  body.admin-bar.swkm-nav-open.ehf-header #masthead {
    top: 46px;
  }
}

/* แผง mega อ้างความกว้างเต็มของแถบ จึงต้องให้ตัวนอกสุดเป็น relative
   และกดทุกชั้นระหว่างทางให้ static (hfe-traps ข้อ 11) */
#swkd-header {
  position: relative;
  overflow: visible;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
/* ⚠ สามข้อที่ต้องรู้เรื่องโครง DOM ของ Elementor 4.x (วัดจากเว็บจริง 2026-09-08 ตอน QA)
   1. container แบบ full ไม่มี .e-con-inner · แถวของ widget อยู่ใน container แบบ boxed อีกชั้น
   2. `_css_classes` ที่ตั้งให้ container ไม่ออกมาใน DOM (ของ widget ออกปกติ)
      จึงต้องอ้าง container ด้วยคลาส id ของมันคือ .elementor-element-f1000004
      ซึ่ง header_spec.py generate ให้คงที่ทุกรอบ (จดไว้ที่ elementor-profile.json > widget_ids)
   3. Elementor 4.x ตัด .elementor-widget-container ออกแล้ว (optimized markup)
      กฎที่อ้าง wrapper ตัวนั้นไม่มีวันตรง ต้องยิงที่ตัว widget เอง */
#swkd-header .elementor-element-f1000004,
#swkd-header .elementor-element-f1000004 > .e-con-inner,
#swkd-header .swkd-hd-menu,
#swkd-header .swkd-hd-menu > .elementor-shortcode {
  position: static;
}
#swkd-header .elementor-element-f1000004 > .e-con-inner {
  flex-wrap: nowrap;
}

/* แถบเมนูสูงเท่าแถบ header เหมือน design (.nav{align-self:stretch})
   ไม่งั้น nav สูงแค่ 44 แล้วเหลือช่องว่างระหว่างหัวข้อกับแผงที่เมาส์ลอดผ่านได้
   แฮมเบอร์เกอร์สูงตายตัว 44 จึงต้อง align-items:center ไม่ใช่ stretch
   ⚠ widget แบบ shortcode ห่อผลลัพธ์ไว้ใน .elementor-shortcode อีกชั้นซึ่งเป็น block
     ต้องทำให้ชั้นนั้นยืดและเป็น flex ด้วย ไม่งั้นแถบเมนูยืดไม่ได้ (เจอตอน QA 2026-09-08) */
#swkd-header .swkd-hd-menu,
#swkd-header .swkd-hd-menu > .elementor-shortcode {
  align-self: stretch;
  display: flex;
  align-items: center;
}

/* ปุ่มที่เราเขียนเองต้องล้างสไตล์ <button> ที่ Elementor kit ยิงทั้งเว็บ (hfe-traps ข้อ 7)
   specificity 1,1,1 และ 0,2,1 ชนะ .elementor-kit-215 button (0,1,1) ทั้งคู่
   ⚠ ต้องมี selector ของ .swkm-drawer ด้วย เพราะ JS ย้าย drawer ไปเป็นลูกของ body
      ปุ่มกางจึงไม่ได้อยู่ใต้ #swkd-header อีกต่อไป */
#swkd-header button.swkm-burger,
.swkm-drawer button.swkm-caret {
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
  min-height: 0;
  line-height: 1;
  font: inherit;
  cursor: pointer;
}
/* ⚠ kit ยังยิง button:hover / button:focus ที่เปลี่ยนสีตัวอักษรเป็นขาวด้วย (วัดจริง 2026-09-08)
   ปุ่มที่กดแล้วยัง :focus อยู่ ลูกศร stroke:currentColor จึงกลายเป็นขาวบนพื้นครีม เหมือนหายไป
   ต้องล็อกสีทุกสถานะเอง specificity ของบรรทัดนี้ (0,3,1 และ 1,1,1) ชนะ .elementor-kit-215 button:focus (0,2,1) */
.swkm-drawer button.swkm-caret:hover,
.swkm-drawer button.swkm-caret:focus,
.swkm-drawer button.swkm-caret:active,
.swkm-drawer button.swkm-caret:focus-visible {
  color: var(--ink-500);
  background: transparent;
  border: 0;
  box-shadow: none;
}
.swkm-drawer button.swkm-caret[aria-expanded="true"],
.swkm-drawer button.swkm-caret[aria-expanded="true"]:hover,
.swkm-drawer button.swkm-caret[aria-expanded="true"]:focus {
  color: var(--ink-900);
}
#swkd-header button.swkm-burger:hover,
#swkd-header button.swkm-burger:focus,
#swkd-header button.swkm-burger:active,
#swkd-header button.swkm-burger:focus-visible {
  color: var(--ink-900);
  border: 0;
  box-shadow: none;
}
#swkd-header button.swkm-burger:hover {
  background: var(--white);
}
#swkd-header button.swkm-burger:focus:not(:hover) {
  background: transparent;
}

/* ---------- โลโก้ ----------
   widget html เป็น block ถ้าปล่อยให้ <a> เป็น inline-flex จะได้ line box (line-height 29.75px) ครอบอีกชั้น
   กล่อง widget สูง 41 ทั้งที่โลโก้สูง 32 โลโก้จึงลอยเหนือกึ่งกลางแถบ 5px (วัดจริง 2026-09-08)
   ให้ widget เป็น flex เพื่อ blockify ลูก แล้วกล่องจะสูงเท่าโลโก้พอดี */
#swkd-header .swkd-hd-logo {
  display: flex;
  align-items: center;
}
#swkd-header .swkm-lockup {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex: none;
}
#swkd-header .swkm-lockup-img {
  height: 32px;
  width: auto;
  display: block;
}
#swkd-header .swkm-lockup-sm {
  display: none;
  width: 32px;
  height: 32px;
}

/* ---------- ปุ่มที่เรา render เอง (ในแผง mega และใน drawer) ---------- */
.swkm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font);
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  height: 48px;
  padding: 0 22px;
  border-radius: 6px;
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--dur), color var(--dur);
}
.swkm-btn-accent {
  background: var(--coral);
  color: var(--ink-900);
}
.swkm-btn-accent:hover {
  background: var(--coral-hover);
  color: var(--ink-900);
}
.swkm-btn-ink {
  background: var(--ink-900);
  color: var(--on-dark);
}
.swkm-btn-ink:hover {
  background: var(--ink-700);
  color: var(--on-dark);
}
.swkm-btn-sm {
  height: 40px;
  padding: 0 16px;
  font-size: 15px;
}

/* ลิงก์ที่ยังไม่มีหน้า สีปกติ กดไม่ได้ (Mark เคาะ 2026-07-30) */
#swkd-header a.swkm-soon,
.swkm-drawer a.swkm-soon {
  pointer-events: none;
}

/* ---------- แถบเมนู (เดสก์ท็อป) ---------- */
.swkm-nav {
  display: flex;
  gap: 4px;
  align-self: stretch;
  font-family: var(--font);
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-800);
  white-space: nowrap;
}
.swkm-item {
  display: flex;
  align-items: center;
  align-self: stretch;
}
.swkm-a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 44px;
  padding: 0 12px;
  border-radius: 12px;
  text-decoration: none;
  color: var(--ink-800);
  font-family: var(--font);
  font-weight: 500;
  transition: background var(--dur), color var(--dur);
}
.swkm-nav > .swkm-a {
  align-self: center;
}
.swkm-a:hover,
.swkm-item.swkm-open > .swkm-a {
  background: var(--white);
  color: var(--ink-900);
}
.swkm-chev {
  width: 14px;
  height: 14px;
  stroke: var(--ink-600);
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--dur);
}
.swkm-item.swkm-open .swkm-chev {
  transform: rotate(180deg);
}

/* ---------- แผง mega ---------- */
.swkm-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  padding: 8px 24px 24px;
  /* จัดกล่องแผงให้อยู่กลางด้วย flex · ลูกที่เป็น flex item จะหดพอดีเนื้อหาเองโดยไม่ต้องใช้ width:fit-content
     ซึ่ง Safari เดสก์ท็อปของ Mark ไม่รองรับ แล้วกางแผงเต็มความกว้าง เนื้อหากองซ้าย ว่างขวา (2026-09-08) */
  display: flex;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity var(--dur), transform var(--dur), visibility 0s linear var(--dur);
}
.swkm-item.swkm-open .swkm-panel {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
  transition-delay: 0s;
}
.swkm-panel-in {
  /* รายการชิดบนตาม preview ที่ Mark เคาะ (เคยลองจัดกึ่งกลางเทียบการ์ดแล้ว Mark ให้กลับเป็นชิดบน 2026-09-08)
     ยังคง .swkm-cols ห่อคอลัมน์ไว้ เพื่อให้คอลัมน์เรียงหัวตรงกันเสมอไม่ว่าจะเปลี่ยน align ในอนาคต */
  align-items: flex-start;
  width: auto;          /* เป็น flex item ของ .swkm-panel จึงหดพอดีเนื้อหาเอง (แทน fit-content) */
  flex: 0 1 auto;
  max-width: 1280px;
  margin: 0;
  background: var(--white);
  border: 1px solid var(--ink-100);
  border-radius: 12px;
  box-shadow: var(--e-float);
  display: flex;
  gap: 40px;
  padding: 24px;
  white-space: normal;
}
/* กลุ่มคอลัมน์ · จัดกึ่งกลางแนวตั้งทั้งกลุ่ม ส่วนคอลัมน์ข้างในเรียงหัวตรงกัน */
.swkm-cols {
  display: flex;
  gap: 40px;
  align-items: flex-start;
  min-width: 0;
}
.swkm-col {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 0 1 auto;
  min-width: 0;
}
.swkm-row {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 8px 12px;
  border-radius: 8px;
  transition: background var(--dur);
}
/* แถวปกติเหลือชื่อบรรทัดเดียว (ตัดคำอธิบายออก 2026-09-08)
   ถ้าใส่ Description ให้รายการไหนที่ Appearance > Menus แถวนั้นจะได้คลาสนี้แล้วชิดบนแทน */
.swkm-row-desc {
  align-items: flex-start;
}
.swkm-row:hover {
  background: var(--ink-50);
}
.swkm-ico {
  flex: none;
  width: 24px;
  height: 24px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.swkm-row .swkm-ico {
  color: var(--ink-500);
  transition: color var(--dur);
}
.swkm-row-desc .swkm-ico {
  margin-top: 1px;
}
.swkm-row:hover .swkm-ico {
  color: var(--ink-900);
}
.swkm-tx {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.swkm-t {
  font-family: var(--font);
  font-size: 16px;
  font-weight: 500;
  color: var(--ink-800);
  text-decoration: none;
  line-height: 1.4;
}
.swkm-row:hover .swkm-t {
  color: var(--ink-900);
}
.swkm-s {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 400;
  color: var(--ink-500);
  line-height: 1.55;
  margin-top: 1px;
}

/* การ์ดชวนคุยในแผง */
.swkm-promo {
  flex: 0 0 290px;
  width: 290px;      /* ⚠ ต้องมี width แน่นอน ไม่ใช่แค่ flex-basis · WebKit คิด max-content ของแผงจากรูปข้างใน (640px)
                        ถ้าไม่ล็อกไว้ แผงจะกว้างเกินไป 350px ทั้งที่การ์ดโชว์ 290 (เจอ 2026-09-08 หลังเปลี่ยนแผงเป็น flex) */
  min-width: 0;
  border: 1px solid var(--ink-100);
  border-radius: 12px;
  overflow: hidden;
  background: var(--paper);
  display: flex;
  flex-direction: column;
}
.swkm-promo img {
  width: 100%;
  height: auto;
  aspect-ratio: 640 / 425;
  object-fit: cover;
  display: block;
}
.swkm-promo-tx {
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.swkm-promo-tx p {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--ink-900);
}
.swkm-promo-tx small {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--ink-500);
  line-height: 1.6;
}
.swkm-promo-tx .swkm-btn {
  margin-top: 8px;
}

/* ---------- ปุ่ม CTA บนแถบ (widget button ของ Elementor) ---------- */
/* ค่ากล่องยกมาจาก .btn + .cta ของ design ตรง ๆ (height 48 · padding 0 18 · border 1px โปร่ง)
   ถ้าปล่อยให้ Elementor คุมด้วย text_padding อย่างเดียว ปุ่มจะแคบกว่า design 2px เพราะขาดเส้นขอบ
   specificity 1,2,0 ชนะกฎที่ Elementor generate ให้ (0,3,0) */
#swkd-header .swkd-hd-cta .elementor-button-wrapper {
  display: flex;
  align-items: center;
}
#swkd-header .swkd-hd-cta .elementor-button {
  /* ⚠ Elementor ทำปุ่มเป็น inline-block + line-height:1 · พอกำหนด height เอง ข้อความจะนอนชิดขอบบน
     (วัดจริง: ข้อความห่างขอบบน 1px ห่างขอบล่าง 32px) ต้องเปลี่ยนเป็น inline-flex แล้วจัดกึ่งกลางเอง */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font);
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  height: 48px;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: 6px;
  white-space: nowrap;
}
#swkd-header .swkd-hd-cta .swkm-cta-short {
  display: none;
}

/* ---------- แฮมเบอร์เกอร์ ---------- */
.swkm-burger {
  display: none;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  align-items: center;
  justify-content: center;
  flex: none;
  color: var(--ink-900);
}
.swkm-burger:hover {
  background: var(--white);
}
.swkm-burger svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  display: block;
}
.swkm-burger .swkm-i-close {
  display: none;
}
.swkm-burger[aria-expanded="true"] .swkm-i-open {
  display: none;
}
.swkm-burger[aria-expanded="true"] .swkm-i-close {
  display: block;
}

/* ---------- drawer (มือถือ) ---------- */
.swkm-drawer {
  /* top กับ height ในนี้เป็นค่าเริ่มต้นสำหรับกรณีไม่มี JS · ตอนเปิดจริง menu.js เขียนทับด้วยขอบล่างจริงของ header
     เพราะตอน login แถบ admin ของ WordPress ดัน header ลง 32/46px แล้วรายการแรกของแผงจะถูก header บังหัว (เจอ 2026-09-08) */
  position: fixed;
  left: 0;
  right: 0;
  top: var(--swkm-h);
  bottom: 0;
  background: var(--paper);
  overflow-y: auto;
  overscroll-behavior: contain;
  z-index: 49;
  height: calc(100vh - var(--swkm-h));
  height: calc(100dvh - var(--swkm-h));
}
.swkm-drawer[hidden] {
  display: none;
}
/* เส้นคั่นทุกเส้นกับพื้นเทาของรายการย่อยต้องกว้างเท่ากันชิดขอบจอ (แบบ hookgrowth) ไม่งั้นเกิดรอยต่อ
   ที่หัวท้ายของเส้น · จึงเอา padding ข้างออกจากตัวแผง แล้วไปใส่ที่เนื้อในของแต่ละแถวแทน (Mark ชี้ 2026-09-08) */
.swkm-drawer-in {
  padding: 8px 0 calc(32px + env(safe-area-inset-bottom));
  max-width: 720px;
  margin-inline: auto;
}
.swkm-mitem {
  padding: 6px 20px;
  border-bottom: 1px solid var(--ink-100);
}
.swkm-mitem > a,
.swkm-mhead > a {
  display: flex;
  align-items: center;
  min-height: 48px;
  font-family: var(--font);
  font-size: 22px;
  font-weight: 500;   /* เท่ากับหัวข้อบนแถบ desktop (Mark เคาะ 2026-09-08 เดิม 600 ตามสเปก A ดูหนากว่ากันมาก) */
  color: var(--ink-900);
  text-decoration: none;
  flex: 1 1 auto;
}
.swkm-mhead {
  display: flex;
  align-items: center;
  gap: 8px;
}
.swkm-caret {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-500);
  flex: none;
}
.swkm-caret svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--dur);
  display: block;
}
.swkm-caret[aria-expanded="true"] svg {
  transform: rotate(180deg);
}
.swkm-caret[aria-expanded="true"] {
  color: var(--ink-900);
}
.swkm-mitem ul {
  display: none;
  list-style: none;
  margin: 6px -20px 0;      /* ยืดกลับออกไปชนขอบ เท่ากับ padding ข้างของ .swkm-mitem */
  padding: 6px 0 8px;
  flex-direction: column;
  background: var(--ink-50);
}
.swkm-mitem.swkm-open ul {
  display: flex;
}
/* ตอนกางอยู่ ตัด padding ล่างของหัวข้อออก ให้พื้นเทาของรายการย่อยชนเส้นคั่นของหัวข้อถัดไปพอดี
   (เดิมเหลือขอบครีม 6px คั่นระหว่างพื้นเทากับเส้น · Mark ชี้ 2026-09-08) */
.swkm-mitem.swkm-open {
  padding-bottom: 0;
}
.swkm-mitem li a {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 4px 20px 4px 32px;   /* 20 ขอบจอ + 12 ร่นตามเดิม · เส้นคั่นย่อยจึงวิ่งเต็มความกว้างเท่าพื้นเทา */
  font-family: var(--font);      /* เท่ากับรายการในแผง desktop (.swkm-t) เดิม Sarabun 17 ตามสเปก A · Mark เคาะ 2026-09-08 */
  font-size: 16px;
  font-weight: 500;
  color: var(--ink-800);
  text-decoration: none;
  border-bottom: 1px solid rgba(19, 20, 23, .06);
}
.swkm-mitem li:last-child a {
  border-bottom: 0;
}
.swkm-mitem li a:hover {
  color: var(--ink-900);
}
.swkm-mico {
  width: 22px;
  height: 22px;
  color: var(--ink-500);
  flex: none;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* การ์ดชวนคุยก่อนปุ่ม CTA ใน drawer */
.swkm-mfoot {
  margin-top: 20px;
  padding: 0 20px;   /* การ์ดกับปุ่มยังร่นจากขอบจอเท่าเดิม */
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.swkm-mfoot .swkm-btn {
  width: 100%;
}
.swkm-mpromo {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  padding: 20px;
  border: 1px solid var(--ink-100);
  border-radius: 12px;
  background: var(--ink-50) center 72% / cover no-repeat;
}
.swkm-mpromo::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(247, 246, 242, .96) 0%, rgba(247, 246, 242, .9) 44%, rgba(247, 246, 242, 0) 72%);
}
.swkm-mpromo-tx {
  position: relative;
  z-index: 1;
  max-width: 30ch;
}
.swkm-mpromo p {
  margin: 0;
  font-family: var(--font);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink-900);
  text-wrap: balance;
}
.swkm-mpromo small {
  display: block;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ink-700);
  margin-top: 8px;
  line-height: 1.6;
}
/* ตอนแผงเปิด menu.js ตรึง body ด้วย position:fixed (บันทึก scrollY ไว้คืนตอนปิด) แทน overflow:hidden
   เหตุผล: Safari บน Mac เวลาต่อเมาส์มี scrollbar กว้าง 15px และ Safari คิด media query จากความกว้างที่ไม่รวม scrollbar
   พอ overflow:hidden ทำให้ scrollbar หาย ความกว้างโตขึ้น 15px แล้วข้ามเส้น 559 ปุ่ม CTA กับโลโก้เลยสลับเป็นชุดเดสก์ท็อป
   ระหว่างที่แผงเปิด (Mark เจอ 2026-09-08) · menu.js จึงบังคับ html{overflow-y:scroll} ไว้ตอนเปิด ถ้าก่อนเปิดมี scrollbar อยู่
   (ทดลองแล้ว scrollbar-gutter:stable ที่ html ไม่ช่วย เพราะ html ไม่ได้เป็น scroll container) · วิธีตรึง body ยังกัน iOS เลื่อนหน้าลอดใต้แผงด้วย */
body.swkm-nav-open {
  overflow: hidden;   /* fallback เผื่อ JS ไม่ทัน · ค่าจริงถูกเขียนทับด้วย inline style จาก menu.js */
}

/* ปุ่มลอยของ third party ทับแผง drawer บนมือถือ ซ่อนเฉพาะตอนเมนูเปิดเท่านั้น
   หน้าปกติกับเดสก์ท็อปยังเหมือนเดิมทุกอย่าง (บทเรียนเดียวกับ hookgrowth 2026-09-05)
   Chaty inject ตัวเองหลังโหลดราว 10 วินาที ทุก node มีคำว่า chaty ใน id หรือ class
   ส่วน #ast-scroll-top ของ Astra ซ่อนอยู่ใต้ปุ่ม Chaty พอ Chaty หายมันจะโผล่แทน จึงต้องซ่อนคู่กัน
   ⚠ ที่ hookgrowth เลือกปิด scroll-to-top ทั้งเว็บที่ตัวตั้งค่าของ theme ที่นี่ยังไม่ได้ทำ
      ถ้าอยากปิดทั้งเว็บให้เขียน astra-settings['scroll-to-top-enable'] = false แล้วตรวจจาก HTML ของหน้าจริง
      (astra_get_option ใน request เดียวกันยังคืนค่าเดิม เพราะ Astra cache ไว้ตั้งแต่ต้น request) */
body.swkm-nav-open [id*="chaty"],
body.swkm-nav-open [class*="chaty"],
body.swkm-nav-open .kodee-fab,
body.swkm-nav-open #ast-scroll-top {
  display: none !important;
}
/* .kodee-fab = ปุ่ม "ถาม AI" ของปลั๊กอิน Hostinger AI Assistant ขึ้นเฉพาะ admin ที่ login
   (endpoint เช็ค is_user_logged_in + manage_options) คนทั่วไปไม่เห็น · รายการนี้เป็นแค่ชั้นแรก
   ตัวกันจริงคือ menu.js ที่ซ่อนทุก element ที่ position:fixed ตอนแผงเปิดโดยไม่ผูกกับชื่อ */

/* รายการที่ design ให้โผล่เฉพาะใน drawer (ติดต่อเรา) */
.swkm-nav .swkm-drawer-only {
  display: none;
}

/* ---------- โหมดบีบ 1200 ถึง 1359 ---------- */
@media (max-width: 1359px) and (min-width: 1200px) {
  #swkd-header .elementor-element-f1000004 > .e-con-inner {
    gap: 16px;
  }
  .swkm-nav {
    gap: 0;
    font-size: 14px;
  }
  .swkm-a {
    padding: 0 8px;
  }
  #swkd-header .swkd-hd-cta .elementor-button {
    padding: 0 14px;
    font-size: 14px;
  }
}

/* ---------- มือถือและแท็บเล็ต 1199 ลงมา ---------- */
@media (max-width: 1199px) {
  .swkm-nav {
    display: none;
  }
  .swkm-burger {
    display: inline-flex;
  }
  #swkd-header .elementor-element-f1000004 > .e-con-inner {
    gap: 16px;
  }
  /* ลำดับ โลโก้ ... ปุ่ม CTA · แฮมเบอร์เกอร์ · _flex_order ไม่ responsive จึงทำที่ CSS (hfe-traps ข้อ 5)
     margin-right:auto ที่โลโก้ดูดที่ว่างไว้เอง ปุ่มกับแฮมเบอร์เกอร์จึงเกาะกลุ่มชิดขวา */
  #swkd-header .swkd-hd-logo {
    order: 1;
    margin-right: auto;
  }
  #swkd-header .swkd-hd-cta {
    order: 2;
  }
  #swkd-header .swkd-hd-menu {
    order: 3;
  }
}

/* ---------- ขอบเนื้อหาแคบลงที่ 620 ลงมา (design: .wrap{padding-inline:20px}) ---------- */
@media (max-width: 620px) {
  #swkd-header .elementor-element-f1000004 {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* ---------- จอเล็ก 559 ลงมา ---------- */
@media (max-width: 559px) {
  /* ทาง C แบบ hookgrowth (Mark เคาะ 2026-09-08 ค่ำ): มือถือมีโลโก้เต็ม (มาร์ค + ชื่อแบรนด์) ย่อเป็น 26px
     แลกกับปุ่มใช้คำสั้น ปรึกษาฟรี · เพราะที่ 390 มีที่ให้โลโก้แค่ 90px ถ้าปุ่มยังเป็นข้อความเต็ม 184px
     วัดแล้วลงพอดีทุกจอตั้งแต่ 320 (ดู mega-menu/preview-logo-optC-*.png) */
  #swkd-header .swkm-lockup-img {
    display: block;
    height: 26px;
  }
  #swkd-header .swkm-lockup-sm {
    display: none;
  }
  #swkd-header .swkd-hd-cta .swkm-cta-long {
    display: none;
  }
  #swkd-header .swkd-hd-cta .swkm-cta-short {
    display: inline;
  }
  #swkd-header .swkd-hd-cta .elementor-button {
    font-size: 14px;
    height: 40px;
    padding: 0 16px;
  }
  #swkd-header .elementor-element-f1000004 > .e-con-inner {
    gap: 12px;
  }
  .swkm-mitem > a,
  .swkm-mhead > a {
    font-size: 20px;
    min-height: 56px;
  }
}

/* ปุ่ม header เปลี่ยนมาใช้ข้อความเดียวกันทุกจอแล้ว (Mark เคาะ 2026-09-08 "ปรึกษาติดตั้งน็อคดาวน์")
   ทาง C เดิมแลกโลโก้เต็มบนมือถือกับปุ่มคำสั้น พอปุ่มยาวขึ้นเป็น 164px ที่เหลือให้โลโก้จึงไม่พอ
   วัดได้ว่าปุ่มทับโลโก้ 17px ที่ 320 และ 5px ที่ 375 ส่วนที่ 390 ปุ่มชิด burger พอดี 0px
   จึงบีบปุ่มลงทั้งช่วงมือถือ แล้วสลับเป็นมาร์คย่อ 32px เฉพาะ ≤389 ที่ยังไม่พอ
   วัดหลังแก้ ไม่มีจุดทับกันเลยตั้งแต่ 320 ถึง 480 และที่ 390 เหลือช่องว่าง 7px */
@media (max-width: 479px) {
  #swkd-header .swkd-hd-cta .elementor-button {
    font-size: 13px;
    padding: 0 14px;
  }
}
@media (max-width: 389px) {
  #swkd-header .swkm-lockup-img {
    display: none;
  }
  #swkd-header .swkm-lockup-sm {
    display: block;
  }
}

/* ---------- จอแคบมาก 340 ลงมา (iPhone SE รุ่นแรก 320) โลโก้ย่อเป็น 24px และบีบระยะ ---------- */
@media (max-width: 340px) {
  #swkd-header .swkm-lockup-img {
    height: 24px;
  }
  #swkd-header .elementor-element-f1000004 > .e-con-inner {
    gap: 10px;
  }
  #swkd-header .elementor-element-f1000004 {
    padding-left: 14px;
    padding-right: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .swkm-panel,
  .swkm-chev,
  .swkm-caret svg,
  .swkm-btn,
  .swkm-a,
  .swkm-row {
    transition: none;
  }
}

/* ============================================================
   footer (template elementor-hf ตัวที่สอง · spec ที่ header-footer/footer_spec.py · เพิ่ม 2026-09-08)
   ยกจาก _build/design.css ส่วน footer · แปลง selector ให้ตรง DOM ของ Elementor 4.x
   · container อ้างด้วย id ที่ตั้งผ่าน _element_id (swkd-footer · swkf-wrap · swkf-grid · swkf-brand · swkf-col1..3 · swkf-bottom)
   · widget อ้างด้วยคลาสจาก _css_classes (swkf-logo · swkf-desc · swkf-links · swkf-h · swkf-channel · swkf-copy · swkf-legal)
   · ความกว้างคอลัมน์และจุดหัก 1199 / 850 / 620 / 559 เขียนที่นี่ทั้งหมด ไม่ใช้ค่า _tablet/_mobile ของ Elementor
     (Elementor ให้ width ผ่าน --width บน .e-con ที่ specificity 0,1,0 · id ของเราชนะจึงเขียน width/flex ทับตรง ๆ)
   ============================================================ */
#swkd-footer {
  --paper: #F7F6F2;
  --ink-900: #131417;
  --ink-400: #8C8E91;
  --ink-300: #A6A8AB;
  --on-dark: #F2F1EC;
  --coral: #E7623E;
  --border-on-dark: rgba(242,241,236,.14);
  --font: "Anuphan", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Sarabun", "Anuphan", ui-sans-serif, system-ui, sans-serif;
  --dur: 180ms;
  font-family: var(--font);
  color: var(--on-dark);
}
/* ลิงก์ที่ยังไม่มีหน้า สีปกติ กดไม่ได้ (Mark เคาะ 2026-07-30 · ยืนยันอีกครั้ง 2026-09-08 สำหรับ footer) */
#swkd-footer a[href="#"] {
  pointer-events: none;
}

/* ---------- โครงคอลัมน์ (design .foot-grid: brand 300 คงที่ · 3 คอลัมน์ยืดเท่ากัน · gap 40) ---------- */
#swkd-footer #swkf-brand {
  flex: 0 0 300px;
  width: 300px;
  min-width: 0;
}
#swkd-footer #swkf-col1,
#swkd-footer #swkf-col2,
#swkd-footer #swkf-col3 {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
}

/* ---------- คอลัมน์แบรนด์ ---------- */
/* widget html เป็น block · ให้เป็น flex เพื่อ blockify <a> กันได้ line box ครอบโลโก้ (บทเรียน header) */
#swkd-footer .swkf-logo {
  display: flex;
}
#swkd-footer .swkf-lockup {
  display: flex;
  align-items: center;
  width: fit-content;
  text-decoration: none;
}
#swkd-footer .swkf-lockup-img {
  height: 32px;
  width: auto;
  display: block;
}
#swkd-footer .swkf-desc {
  max-width: 32ch;
}
#swkd-footer .swkf-desc p {
  margin: 0;
}
/* ตราช่องทาง (widget social-icons) · Elementor grid-0 ใช้ inline-block + word-spacing ระยะจึงขึ้นกับช่องว่างใน HTML
   เปลี่ยนเป็น flex gap 20 ให้ตรง design (.channel) และวัดได้แน่นอน */
#swkd-footer .swkf-channel .elementor-grid {
  display: flex;
  align-items: center;
  /* ⚠ ต้องสั่ง justify-content เอง · Elementor ใส่คลาส e-grid-align-left ให้จากค่า align แต่ไม่มีกฎรองรับคลาสนั้น
     ใน frontend.css หรือ widget-social-icons.css ที่โหลดจริง (grep แล้วได้ 0) ตัวแปร --justify-content จึงว่าง
     แล้ว .elementor-widget-social-icons .elementor-grid{justify-content:var(--justify-content,center)} ทำให้ไอคอนไปกองกลาง
     (เจอจากภาพที่ Mark ส่ง 2026-09-08 · เกิดทั้งเดสก์ท็อปและมือถือ ไม่ใช่เฉพาะจอเล็ก) */
  justify-content: flex-start;
  gap: 20px;
  width: auto;
  margin: 0;
  word-spacing: 0;
}
#swkd-footer .swkf-channel .elementor-grid-item {
  display: flex;
  margin: 0;
}
#swkd-footer .swkf-channel .elementor-social-icon {
  transition: opacity var(--dur);
}
#swkd-footer .swkf-channel .elementor-social-icon svg {
  transition: fill var(--dur);
}

/* ---------- หัวคอลัมน์ (widget heading เป็น div · ลิงก์เข้า hub · ไอคอน 22px วางด้วย mask ไม่ต้องอัป SVG) ---------- */
#swkd-footer .swkf-h .elementor-heading-title {
  display: flex;
  align-items: center;
  gap: 10px;
}
#swkd-footer .swkf-h .elementor-heading-title::before {
  content: "";
  flex: none;
  width: 22px;
  height: 22px;
  background-color: rgba(242,241,236,.82);
  -webkit-mask: var(--swkf-i) center / 22px 22px no-repeat;
  mask: var(--swkf-i) center / 22px 22px no-repeat;
}
#swkd-footer .swkf-h .elementor-heading-title a {
  color: inherit;
  text-decoration: none;
  transition: color var(--dur);
}
#swkd-footer .swkf-h .elementor-heading-title a:hover {
  color: var(--coral);
}
#swkd-footer .swkf-i-book .elementor-heading-title::before { --swkf-i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M4%205a2%202%200%200%201%202-2h13v16H6a2%202%200%200%200-2%202zM4%2019V5M8%207h7%22%2F%3E%3C%2Fsvg%3E"); }
#swkd-footer .swkf-i-home .elementor-heading-title::before { --swkf-i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M3%2011l9-7%209%207v9a1%201%200%200%201-1%201h-5v-6H9v6H4a1%201%200%200%201-1-1z%22%2F%3E%3C%2Fsvg%3E"); }
#swkd-footer .swkf-i-info .elementor-heading-title::before { --swkf-i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22M12%2011v5M12%208h.01%22%2F%3E%3C%2Fsvg%3E"); }
#swkd-footer .swkf-i-prefab .elementor-heading-title::before { --swkf-i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M3%2010%2012%204l9%206%22%2F%3E%3Cpath%20d%3D%22M5%2010v9h14v-9%22%2F%3E%3Cpath%20d%3D%22M9%2019v-5h6v5%22%2F%3E%3Cpath%20d%3D%22M2%2021h20%22%2F%3E%3C%2Fsvg%3E"); }
#swkd-footer .swkf-i-store .elementor-heading-title::before { --swkf-i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M3%209h18l-1%2011H4zM3%209l2-5h14l2%205M9%2013v3M15%2013v3%22%2F%3E%3C%2Fsvg%3E"); }
#swkd-footer .swkf-i-tag .elementor-heading-title::before { --swkf-i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M20.6%2013.4%2013.4%2020.6a2%202%200%200%201-2.8%200L3%2013V3h10l7.6%207.6a2%202%200%200%201%200%202.8z%22%2F%3E%3Ccircle%20cx%3D%227.5%22%20cy%3D%227.5%22%20r%3D%221.5%22%2F%3E%3C%2Fsvg%3E"); }

/* ---------- รายการ (widget icon-list ไม่มีไอคอนของ Elementor · marker เป็น chevron mask) ----------
   design .foot li a : flex · gap 10 · padding 7px 8px · margin-left -8 · radius 999 · hover พื้นขาว 5% chevron coral ขยับขวา 3px
   Elementor ให้ a{width:100%} จึงต้องบวก 8 คืนให้ขอบขวาตรงกับ container เหมือน design */
#swkd-footer .swkf-links .elementor-icon-list-item > a {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: calc(100% + 8px);
  padding: 7px 8px;
  margin-left: -8px;
  border-radius: 999px;
  transition: background var(--dur), color var(--dur);
}
#swkd-footer .swkf-links .elementor-icon-list-item > a::before {
  content: "";
  width: 13px;
  height: 13px;
  margin-top: 6px;
  flex: none;
  background: var(--ink-400);
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272.2%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M9.5%205.5l6.5%206.5-6.5%206.5%27%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272.2%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M9.5%205.5l6.5%206.5-6.5%206.5%27%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
  transition: transform var(--dur), background var(--dur);
}
#swkd-footer .swkf-links .elementor-icon-list-item > a:hover {
  background: rgba(242,241,236,.05);
}
#swkd-footer .swkf-links .elementor-icon-list-item > a:hover::before {
  background: var(--coral);
  transform: translateX(3px);
}
#swkd-footer .swkf-links .elementor-icon-list-text {
  padding-inline-start: 0;
}
/* รายการแรกของทุกกลุ่มเป็น lead (design li.lead) : Anuphan 600 สี on-dark · chevron ink-300 */
#swkd-footer .swkf-links .elementor-icon-list-item:first-child .elementor-icon-list-text {
  font-family: var(--font);
  font-weight: 600;
  color: var(--on-dark);
}
#swkd-footer .swkf-links .elementor-icon-list-item:first-child > a::before {
  background: var(--ink-300);
}

/* ---------- แถบล่าง (design .foot-bottom) ---------- */
#swkd-footer #swkf-bottom {
  font-family: var(--font-body);
}
#swkd-footer .swkf-legal p {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
#swkd-footer .swkf-legal a,
#swkd-footer .swkf-copy a {
  color: inherit;
  text-decoration: none;
  transition: color var(--dur);
}
#swkd-footer .swkf-legal a:hover,
#swkd-footer .swkf-copy a:hover {
  color: var(--on-dark);
}

/* ---------- responsive ตาม design.css (จุดหักไม่ใช่ของ Elementor) ---------- */
/* ≤1199 : คอลัมน์แบรนด์เต็มแถว · 3 คอลัมน์ลิงก์แถวเดียว */
@media (max-width: 1199px) {
  #swkd-footer #swkf-brand {
    flex: 1 1 100%;
    width: 100%;
  }
  #swkd-footer #swkf-col1,
  #swkd-footer #swkf-col2,
  #swkd-footer #swkf-col3 {
    flex: 1 1 calc(33.333% - 27px);
  }
}
/* ≤850 : 2 คอลัมน์ · padding บนล่าง 48/24 · gap 32 24 · แถบล่าง 14px ตาม design (ตระกูล/น้ำหนักเดิม เปลี่ยนแค่ขนาด
   ไม่งั้นที่ 560 ถึง 850 ลิงก์กฎหมายจะตกลงบรรทัดใหม่ทั้งที่ design อยู่บรรทัดเดียว · Elementor ใส่ขนาดที่ .hfe-copyright-wrapper
   และที่ตัว widget text-editor จึงเขียนทับสองที่) */
@media (max-width: 850px) {
  #swkd-footer {
    padding-block: 48px 24px;
  }
  #swkd-footer .swkf-copy .hfe-copyright-wrapper,
  #swkd-footer .swkf-legal {
    font-size: 14px;
  }
  #swkd-footer #swkf-grid {
    gap: 32px 24px;
  }
  #swkd-footer #swkf-col1,
  #swkd-footer #swkf-col2,
  #swkd-footer #swkf-col3 {
    flex: 1 1 calc(50% - 12px);
  }
  #swkd-footer .swkf-legal p {
    gap: 16px;
  }
}
/* ≤620 : ขอบเนื้อหา 20 (design .wrap{padding-inline:20px}) · Elementor ให้ padding ข้างผ่าน --padding-left/right ที่ .e-con */
@media (max-width: 620px) {
  #swkd-footer #swkf-wrap {
    padding-left: 20px;
    padding-right: 20px;
  }
}
/* ≤559 : คอลัมน์เดียว (Mark เคาะ 2026-09-08 เรียงยาว ไม่ทำ accordion) */
@media (max-width: 559px) {
  #swkd-footer #swkf-col1,
  #swkd-footer #swkf-col2,
  #swkd-footer #swkf-col3 {
    flex: 1 1 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  #swkd-footer .swkf-links .elementor-icon-list-item > a,
  #swkd-footer .swkf-links .elementor-icon-list-item > a::before,
  #swkd-footer .swkf-h .elementor-heading-title a,
  #swkd-footer .swkf-legal a {
    transition: none;
  }
}