/* ==========================================================================
   Shenzhen HONGSHENGYE Technology Co.,Ltd - gd-hsy.com
   Catalogue and product detail styles (assets/css/products.css)
   Extends assets/css/style.css - design tokens and base components
   (.container, .section, .card, .btn, .eyebrow, .lead, .spec-*) are defined there.
   ========================================================================== */

/* ---------- Breadcrumb ---------- */
.breadcrumb { padding: 18px 0 0; font-size: .87rem; }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.breadcrumb li { display: flex; align-items: center; gap: 8px; }
.breadcrumb li + li::before { content: "/"; color: #b7c6da; }
.breadcrumb a { color: var(--blue-700); font-weight: 600; }
.breadcrumb [aria-current="page"] { color: var(--muted); font-weight: 600; }

/* ---------- Section spacing variant ---------- */
.section--sm { padding: clamp(22px, 3vw, 38px) 0 clamp(46px, 5vw, 72px); }

/* ---------- Pills ---------- */
.pill {
  display: inline-block;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--blue-100);
  color: var(--blue-800);
  border: 1px solid #cfe1f9;
}
.pill--ok { background: #eaf7ee; border-color: #bfe3cc; color: #1e6b3a; }
.pill--warn { background: #fff6e6; border-color: #f3d9a8; color: #8a5a12; }
.pill--plain { background: #f1f4f9; border-color: var(--line); color: var(--muted); }

.category-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; }

/* ---------- Notices ---------- */
.notice {
  border: 1px dashed #c6dcf7;
  background: var(--blue-50);
  border-radius: var(--radius);
  padding: 14px 18px;
  font-size: .89rem;
  color: var(--muted);
  margin: 0;
}
.notice strong { color: var(--blue-900); }
.notice--spaced { margin-top: clamp(22px, 3vw, 30px); }

/* ---------- Catalogue grid ---------- */
.catalogue-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}
.catalogue-grid .card-media img { aspect-ratio: 1 / 1; object-fit: cover; }
.product-name { font-size: 1.02rem; line-height: 1.35; margin: 0; }
.product-name a { color: inherit; }
.product-name a:hover { color: var(--blue-700); }
.card-actions--row { display: flex; flex-wrap: wrap; gap: 10px; }
.card-actions--row .btn { flex: 1 1 148px; }
.meta-list { display: grid; gap: 5px; margin: 0; font-size: .86rem; color: var(--muted); }
.meta-list strong { color: var(--blue-900); }

/* ---------- Product detail layout ---------- */
.pdp {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  gap: clamp(24px, 4vw, 48px);
  align-items: start;
}
.gallery { position: sticky; top: calc(var(--header-h) + 16px); }
.gallery-main {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.gallery-main img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; background: var(--white); }
.gallery-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); gap: 10px; margin-top: 12px; }
.gallery-thumb {
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--white);
  cursor: pointer;
  overflow: hidden;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.gallery-thumb img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.gallery-thumb:hover { border-color: var(--blue-500); }
.gallery-thumb[aria-current="true"] { border-color: var(--blue-600); box-shadow: 0 0 0 3px rgba(28, 111, 224, .18); }
.gallery-count { font-size: .84rem; color: var(--muted); margin: 11px 0 0; }

.pdp-body h1 { margin-bottom: 14px; }
.pdp-summary { color: var(--muted); }
.cta-card {
  margin-top: 22px;
  background: var(--blue-50);
  border: 1px solid #d7e6fa;
  border-radius: var(--radius-lg);
  padding: clamp(18px, 2.4vw, 26px);
}
.cta-card h3 { margin-bottom: 10px; }
.cta-card p { font-size: .9rem; color: var(--muted); margin: 0; }
.cta-card .btn-row { margin-top: 16px; }

/* ---------- Spec blocks ---------- */
.spec-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.spec-block {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 22px;
  box-shadow: var(--shadow-sm);
}
.spec-block h3 { font-size: 1rem; margin-bottom: 12px; }
.spec-block h3 + h3 { margin-top: 22px; }
.spec-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.spec-table th, .spec-table td { text-align: left; padding: 10px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.spec-table th { color: var(--blue-900); font-weight: 700; width: 45%; padding-right: 14px; }
.spec-table td { color: var(--muted); word-break: break-word; }
.spec-table tr:last-child th, .spec-table tr:last-child td { border-bottom: 0; }
.missing-list { display: grid; gap: 8px; font-size: .9rem; color: var(--muted); }
.missing-list li { position: relative; padding-left: 22px; }
.missing-list li::before { content: "?"; position: absolute; left: 2px; top: 0; color: #8a5a12; font-weight: 700; }
.spec-foot { margin: 14px 0 0; font-size: .84rem; color: var(--muted); }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .pdp { grid-template-columns: 1fr; }
  .gallery { position: static; }
}
@media (max-width: 640px) {
  .card-actions--row .btn { flex: 1 1 100%; }
}