@media (max-width: 960px) {
  .sunx-nv-stats--home.e-con, .sunx-nv-stats--home,
  .sunx-nv-stats--about.e-con, .sunx-nv-stats--about {
    grid-template-columns: repeat(2, 1fr); gap: 0; padding-block: 30px;
  }
}
.sunx-nv-svc-link :where(p){ margin: 0; }
.sunx-nv-svc-link a{ color: var(--orange); font-size: 13px; font-weight: 600; }
.sunx-nv-svc-link a span{ margin-left: 4px; transition: transform .25s; display: inline-block; }
.sunx-nv-service:hover .sunx-nv-svc-link a span{ transform: translate(3px, -3px); }
@media (max-width: 720px) { .sunx-nv-service.e-con { min-height: 270px; } }

/* ---- Loop grid: let the approved grid rules drive the columns ------------ */
.sunx-nv-loop .elementor-grid{
  display: grid;
  gap: inherit;
}
.sunx-nv-loop .e-loop-item{ display: block; height: 100%; }
.sunx-section,
section{ overflow-x: clip; }
html,
body{ overflow-x: clip; }

/* ---- Loop grid spacing --------------------------------------------------
   Elementor's Loop Grid renders its own CSS grid, so the legacy *-grid class
   was removed from the widget and only the spacing is restored here.        */
.sunx-nv-loop .elementor-grid{ gap: 18px; align-items: stretch; }
.sunx-nv-loop--packages{ margin-top: 54px; }
.sunx-nv-loop--packages .elementor-grid{ gap: 16px; }
.sunx-nv-loop--projects,
.sunx-nv-loop--articles{ margin-top: 42px; }

/* ---- Skip link ----------------------------------------------------------
   Keyboard-only shortcut past the header, per the design contract.         */
.sunx-skip-link{
  position: absolute; top: 8px; left: 12px; z-index: 1010;
  transform: translateY(-180%); transition: none;
}
.sunx-skip-link:focus-within{ transform: none; }
.sunx-skip-link .elementor-button{ min-height: 44px; background: var(--charcoal); color: #fff; }

/* ---- Project filter (Elementor Taxonomy Filter) -------------------------
   The approved design is a pill row: "ทั้งหมด" first, then บ้าน / ธุรกิจ /
   โรงงาน. Elementor renders its "All" button last and orders terms by name,
   and exposes no control for either, so the row is re-ordered here.
   The data-filter values are the term names — if a term is renamed the order
   falls back to Elementor's default, which is still usable.                */
.sunx-nv-filters .e-filter{
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; padding: 0; border: 0;
}
.sunx-nv-filters .e-filter-item{
  order: 9;
  color: #69635f; border: 1px solid var(--line); cursor: pointer; background: #fff;
  border-radius: 99px; min-width: 70px; padding: 8px 16px; min-height: 42px;
  transition: all .2s; flex: 0 0 auto; font-size: 14px;
}
.sunx-nv-filters .e-filter-item[data-filter="__all"]{ order: 0; }
.sunx-nv-filters .e-filter-item[data-filter="บ้าน"]{ order: 1; }
.sunx-nv-filters .e-filter-item[data-filter="ธุรกิจ"]{ order: 2; }
.sunx-nv-filters .e-filter-item[data-filter="โรงงาน"]{ order: 3; }
.sunx-nv-filters .e-filter-item:hover,
.sunx-nv-filters .e-filter-item[aria-pressed="true"]{
  color: #fff; border-color: var(--orange); background: var(--orange);
}
@media (max-width: 720px) {
  .sunx-nv-filters .e-filter { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; }
}

@media (max-width: 1180px) {
  .sunx-nv-footer-grid.e-con, .sunx-nv-footer-grid { grid-template-columns: 1.3fr repeat(3, 1fr); gap: 30px; }
}
@media (max-width: 720px) {
  .sunx-nv-footer-grid.e-con, .sunx-nv-footer-grid { grid-template-columns: 1fr 1fr; }
}

/* Every page sits under the fixed bar. */
body{ padding-top: 0; }
.sunx-page-main > .e-con:first-child{ scroll-margin-top: 78px; }

/* ---- Hero responsive ---------------------------------------------------- */
@media (max-width: 1180px) {
  .header-inner.e-con, .header-inner { grid-template-columns: 140px 1fr auto; gap: 14px; }
}
@media (max-width: 960px) {
  .header-inner.e-con, .header-inner {
    width: calc(100% - 60px); grid-template-columns: 1fr auto auto;
  }
}
@media (max-width: 720px) {
  .header-inner.e-con, .header-inner { width: calc(100% - 40px); }
}
@media (max-width: 720px) {
  .page-hero.e-con, .page-hero { min-height: 390px; padding-block: 80px; }
}

/* Elementor emits per-element chip styling from the widget's own style tab,
   which outranks a plain class selector. These few visual properties are the
   approved pill design and have to win. */
.sunx-nv-filters .e-filter-item{
  background: #fff !important;
  border: 1px solid var(--line) !important;
  border-radius: 99px !important;
  color: #69635f !important;
  padding: 8px 16px !important;
  min-width: 70px;
}
.sunx-nv-filters .e-filter-item:hover,
.sunx-nv-filters .e-filter-item[aria-pressed="true"]{
  background: var(--orange) !important;
  border-color: var(--orange) !important;
  color: #fff !important;
}