/* Jadegia shared 品牌服務 (Services) module
   Scoped to .jadegia-shared-services — zero global side-effects.
   Source-of-truth: legacy PDP services strip (jadegia-product-page-desktop-legacy). */

[data-pdp-shared-services] {
  display: block;
}

/* ── Section wrapper ───────────────────────────────────────────── */
.jadegia-shared-services {
  background: #f9fafb;
  padding: 120px 0;
  border-top: none;
  border-bottom: none;
}

/* ── Inner grid (max-w-7xl mx-auto px-6) ──────────────────────── */
.jadegia-shared-services .services-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
  text-align: center;
}

/* ── Service item ──────────────────────────────────────────────── */
.jadegia-shared-services .service-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ── Icon container (h-16 flex items-end justify-center mb-6) ─── */
.jadegia-shared-services .service-icon-wrap {
  height: 68px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin-bottom: 28px;
}

/* ── Icon image (h-12 w-12 object-contain opacity-60) ─────────── */
.jadegia-shared-services .service-icon-img {
  height: 48px;
  width: 48px;
  object-fit: contain;
  opacity: 0.6;
}

/* 產品保養 icon is h-14 w-14 with 3px downward nudge */
.jadegia-shared-services .service-icon-img--lg {
  height: 56px;
  width: 56px;
  transform: translateY(3px);
}

/* ── Title wrapper (relative mb-4 w-fit) ──────────────────────── */
.jadegia-shared-services .service-title-wrap {
  position: relative;
  margin-bottom: 20px;
  width: fit-content;
}

/* ── Title (20px Noto Sans TC bold) ───────────────────────────── */
.jadegia-shared-services .service-title {
  font-family: var(--sans-zh, 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', sans-serif);
  font-size: 20px;
  font-weight: 700;
  color: #0d0d0d;
  margin: 0;
  letter-spacing: 0.04em;
}

/* ── Underline bar (absolute -bottom-1 left-0 w-full h-[3px] bg-[#b6c9ac]) */
.jadegia-shared-services .service-title-underline {
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 3px;
  background: #b6c9ac;
}

/* ── Description (16px Noto Sans TC light, softer gray) ─────────── */
.jadegia-shared-services .service-desc {
  font-family: var(--sans-zh, 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', sans-serif);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.875;
  color: #878787;
  max-width: 320px;
  margin: 0;
}

/* ── Compact variant ───────────────────────────────────────────── */
/* Applied via data-compact on the mount → --compact class on <section>. */
/* Use on PDP, Homepage, and Preview where the full 120px spacing is too tall. */
.jadegia-shared-services--compact {
  padding: 26px 0;
}

.jadegia-shared-services--compact .service-title {
  font-size: 18px;
}

/* ── Mobile (767px and below) ──────────────────────────────────── */
@media (max-width: 767px) {
  .jadegia-shared-services {
    padding: 80px 0;
  }

  .jadegia-shared-services .services-inner {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .jadegia-shared-services .service-item {
    padding: 40px 24px;
  }

  .jadegia-shared-services .service-item + .service-item {
    border-top: 1px solid rgba(0, 0, 0, 0.05);
  }
}