:root {
  --wap-primary: #2563a8;
  --wap-primary-2: #1f528c;
  --wap-accent: #e8521a;
  --wap-accent-2: #f0a500;
  --wap-line: #dde3ec;
  --wap-text: #555;
  --wap-dark: #222;
  --wap-bg: #f5f6f8;
  --wap-white: #fff;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--wap-bg);
  color: var(--wap-text);
  font-family: Arial, "Helvetica Neue", sans-serif;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

body {
    padding-bottom: 64px;
    background: #fff;
    font-size: 15px;
    line-height: 1.8;
  }

  main {
    padding-bottom: 64px;
  }

  .mobile-logo-zone {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 82px;
    background: #fff;
    padding: 10px 14px;
  }

  .mobile-logo-zone img {
    max-width: 86%;
    max-height: 58px;
    width: auto;
    height: auto;
    object-fit: contain;
  }

  .wap-nav {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    background: var(--wap-primary);
    color: #fff;
  }

  .wap-nav a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    border-right: 1px solid rgba(255, 255, 255, 0.18);
    color: #fff;
    font-size: 15px;
    line-height: 1.2;
    padding: 10px 4px;
    text-align: center;
    text-decoration: none;
  }

  .wap-nav a:last-child {
    border-right: 0;
  }

  .mobile-banner {
    height: 180px;
    overflow: hidden;
    background: #ddd;
  }

  .mobile-banner--home {
    height: 220px;
  }

  .mobile-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .mobile-section {
    padding: 0 10px 24px;
    background: #fff;
  }

  .mobile-section-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 28px 0 16px;
    color: var(--wap-accent);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
  }

  .mobile-section-title::before,
  .mobile-section-title::after {
    flex: 1;
    max-width: 98px;
    height: 1px;
    background: var(--wap-line);
    content: "";
  }

  .section-note {
    margin: -8px 0 12px;
    color: var(--wap-accent-2);
    font-size: 13px;
    line-height: 1.45;
    text-align: center;
  }

  .category-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    margin-bottom: 12px;
  }

  .category-grid--wrap {
    margin: 12px 10px;
  }

  .category-grid a,
  .category-grid button,
  .tag-grid a,
  .tag-grid span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    border: 1px solid var(--wap-line);
    background: #f8fafc;
    color: var(--wap-primary);
    font: inherit;
    font-size: 14px;
    line-height: 1.25;
    overflow: hidden;
    padding: 8px 6px;
    text-align: center;
    text-decoration: none;
  }

  .category-grid button.is-active {
    border-color: var(--wap-accent);
    background: var(--wap-accent);
    color: #fff;
  }

  .wap-card-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .wap-card {
    overflow: hidden;
    background: #fff;
    color: #111;
    text-decoration: none;
  }

  .wap-card img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
  }

  .wap-card-title {
    display: -webkit-box;
    min-height: 38px;
    overflow: hidden;
    background: var(--wap-primary);
    color: #fff;
    font-size: 14px;
    line-height: 1.25;
    padding: 6px 5px;
    text-align: center;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .text-block {
    padding: 0 10px;
    color: #555;
    font-size: 15px;
    line-height: 1.8;
    text-align: left;
  }

  .text-block p {
    margin: 0 0 14px;
  }

  .data-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 16px 0;
  }

  .data-card {
    border: 1px solid var(--wap-line);
    background: #f8fafc;
    color: #333;
    padding: 12px 8px;
    text-align: center;
  }

  .data-card strong {
    display: block;
    color: var(--wap-accent);
    font-size: 22px;
    line-height: 1.1;
  }

  .data-card span {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    line-height: 1.35;
  }

  .page-copy {
    padding: 0 10px 18px;
  }

  .detail-title {
    margin: 18px 10px 10px;
    color: #222;
    font-size: 24px;
    line-height: 1.2;
    text-align: center;
  }

  .tag-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    margin: 0 10px 12px;
  }

  .detail-main-image {
    margin: 0 10px 12px;
  }

  .detail-main-image img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
  }

  .detail-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 14px 10px 20px;
  }

  .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    color: #111;
    font-size: 15px;
    font-weight: 700;
    padding: 10px 12px;
    text-align: center;
    text-decoration: none;
  }

  .btn-quote {
    background: var(--wap-accent);
    color: #fff;
  }

  .btn-dark {
    background: var(--wap-primary);
    color: #fff;
  }

  .btn-light {
    border: 1px solid var(--wap-accent);
    background: #fff3ef;
    color: var(--wap-primary);
  }

  .spec-list {
    display: grid;
    gap: 7px;
  }

  .spec-row {
    display: grid;
    grid-template-columns: 42% 58%;
    border: 1px solid var(--wap-line);
  }

  .spec-row strong,
  .spec-row span {
    padding: 8px;
    font-size: 14px;
    line-height: 1.45;
  }

  .spec-row strong {
    background: #f8fafc;
    color: var(--wap-primary);
  }

  .bullet-list {
    margin: 0;
    padding: 0 0 0 18px;
    color: #555;
  }

  .bullet-list li {
    margin-bottom: 7px;
  }

  .contact-list {
    padding: 0 10px;
    color: #555;
    font-size: 15px;
    line-height: 1.9;
  }

  .contact-list p {
    margin: 0 0 8px;
  }

  .contact-buttons {
    display: grid;
    gap: 8px;
    margin: 16px 10px;
  }

  .factory-photo {
    padding: 0 10px 18px;
  }

  .factory-photo img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
  }

  .final-cta {
    margin-top: 8px;
    padding: 18px 10px 22px;
    background: #f8fafc;
    text-align: center;
  }

  .final-cta h2 {
    margin: 0 0 8px;
    color: var(--wap-accent);
    font-size: 22px;
    line-height: 1.2;
  }

  .final-cta p {
    margin: 0 0 12px;
    color: #555;
    font-size: 14px;
    line-height: 1.55;
  }

  .mobile-contact-bar {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 9999;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    height: 58px;
    background: var(--wap-primary);
    box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.12);
  }

  .mobile-contact-bar a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 58px;
    border-right: 1px solid rgba(255, 255, 255, 0.18);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.1;
    text-align: center;
    text-decoration: none;
  }

  .mobile-contact-bar img {
    width: 19px;
    height: 19px;
    object-fit: contain;
    display: block;
  }

  .mobile-contact-bar span {
    display: block;
  }

  .mobile-contact-bar a:last-child {
    border-right: 0;
    background: var(--wap-accent);
  }

@media (max-width: 768px) {
  body {
    width: 100%;
  }
}

@media (min-width: 769px) {
  html {
    background: #eef2f7;
  }

  body {
    max-width: 430px;
    min-height: 100vh;
    margin: 0 auto;
    background: #fff;
    box-shadow: 0 0 28px rgba(0, 0, 0, 0.12);
  }

  .mobile-contact-bar {
    right: auto;
    left: 50%;
    width: 430px;
    transform: translateX(-50%);
  }
}