.services-page {
  --services-green: #2fb14a;
  --services-ink: #111827;
  --services-muted: #6b7280;
  --services-surface: #f6f7f8;
  --services-border: rgba(17, 24, 39, 0.1);
  min-height: 60vh;
  padding-top: 76px;
  background: #fff;
  color: var(--services-ink);
}

.services-page *,
.services-page *::before,
.services-page *::after { box-sizing: border-box; }

.services-page a { color: inherit; text-decoration: none; }
.services-container { width: min(1240px, 100%); margin: 0 auto; padding: 10px 20px 72px; }
.services-page-header, .services-detail-header { margin-bottom: 32px; }
.services-page-header > p { max-width: 760px; margin: 14px 0 0; color: var(--services-muted); font-size: 18px; line-height: 1.6; }
.services-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.services-card { overflow: hidden; border: 1px solid var(--services-border); border-radius: 16px; background: var(--services-surface); box-shadow: 0 1px 2px rgba(17, 24, 39, .04); transition: transform .18s ease, box-shadow .18s ease; }
.services-card:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(17, 24, 39, .1); }
.services-card-link { display: flex; flex-direction: column; height: 100%; padding: 22px; }
.services-card-heading { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.services-card-icon { display: flex; flex: 0 0 80px; align-items: center; justify-content: center; width: 80px; height: 80px; overflow: hidden; border: 1px solid var(--services-border); border-radius: 14px; background: #fff; }
.services-card-icon img { display: block; width: 80px; height: 80px; object-fit: contain; }
.services-card h2 { margin: 0; padding: 0; color: var(--services-ink); font-size: 22px; line-height: 1.2; }
.services-card-copy { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 6; }
.services-card-cta { margin-top: auto; padding-top: 20px; color: var(--services-green); font-size: 14px; font-weight: 700; }
.services-detail-card { display: grid; grid-template-columns: 220px minmax(0, 1fr); align-items: start; gap: 36px; padding: 28px; border: 1px solid var(--services-border); border-radius: 18px; background: var(--services-surface); }
.services-detail-icon { display: flex; align-items: center; justify-content: center; min-height: 220px; padding: 20px; border: 1px solid var(--services-border); border-radius: 14px; background: #fff; }
.services-detail-icon img { display: block; width: 200px; max-width: 100%; height: auto; object-fit: contain; }
.services-rich-text { min-width: 0; color: var(--services-ink); font-size: 17px; line-height: 1.7; }
.services-rich-text p,
.services-rich-text h1,
.services-rich-text h2,
.services-rich-text h3,
.services-rich-text h4,
.services-rich-text h5,
.services-rich-text h6,
.services-rich-text li,
.services-rich-text span,
.services-rich-text strong,
.services-rich-text em { color: var(--services-ink) !important; }
.services-rich-text > :first-child { margin-top: 0; }
.services-rich-text > :last-child { margin-bottom: 0; }
.services-rich-text p, .services-rich-text li { font-size: 17px; line-height: 1.7; }
.services-rich-text ul, .services-rich-text ol { margin: 14px 0; padding-left: 24px; }
.services-rich-text ul { list-style: disc; }
.services-rich-text ol { list-style: decimal; }
.services-rich-text a { color: var(--services-green) !important; text-decoration: underline; }
.services-rich-text img { max-width: 100%; height: auto; }
.services-shops { margin-top: 56px; }
.services-shops > h2 { margin: 0 0 22px; padding: 0; color: var(--services-ink); font-size: 30px; line-height: 1.2; }
.services-shop-map { overflow: hidden; height: 420px; margin-bottom: 24px; border: 1px solid var(--services-border); border-radius: 16px; }
.services-shop-map #map { width: 100%; height: 100%; }
.services-shop-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.services-shop-card { padding: 20px; border: 1px solid var(--services-border); border-radius: 16px; background: var(--services-surface); }
.services-shop-card h3 { margin: 0 0 12px; padding: 0; color: var(--services-ink); font-size: 18px; line-height: 1.25; }
.services-shop-card p, .services-shop-address, .services-shop-address p { margin: 6px 0; color: var(--services-muted); font-size: 15px; line-height: 1.5; }
.services-shop-card p a { color: var(--services-ink); }
.services-shop-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.services-shop-actions a { padding: 9px 12px; border: 1px solid var(--services-green); border-radius: 9px; color: var(--services-green); font-size: 13px; font-weight: 700; }
.services-empty { padding: 32px; border: 1px dashed var(--services-border); border-radius: 16px; background: var(--services-surface); color: var(--services-muted); text-align: center; }

@media (max-width: 900px) {
  .services-grid, .services-shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .services-detail-card { grid-template-columns: 180px minmax(0, 1fr); gap: 24px; }
}

@media (max-width: 640px) {
  .services-container { padding: 8px 16px 56px; }
  .services-grid, .services-shop-grid, .services-detail-card { grid-template-columns: 1fr; }
  .services-detail-card { padding: 18px; }
  .services-detail-icon { min-height: 150px; }
  .services-detail-icon img { width: 150px; }
  .services-shop-map { height: 320px; }
}