/*
 * WB Product Content
 * Mobile-first content blocks that follow the Controlio shared surface system.
 */

.wbpc-product-content,
.wbpc-category-content,
.wbpc-related-products {
  margin: 1.5rem 0;
  display: grid;
  gap: 1rem;
}

.wbpc-product-content--controlio {
  gap: 1rem;
}

.wbpc-block,
.wbpc-section-nav {
  padding: clamp(1rem, 2vw, 1.25rem);
}

.wbpc-block__header {
  display: grid;
  gap: 0.45rem;
  margin-bottom: 0.9rem;
}

.wbpc-block h2,
.wbpc-block h3,
.wbpc-related-products__header h2 {
  margin: 0;
}

.wbpc-block p,
.wbpc-related-products__header p {
  margin: 0;
}

.wbpc-block > p + p,
.wbpc-block .wbpc-faq,
.wbpc-block .wbpc-link-list,
.wbpc-block .wbpc-badge-list,
.wbpc-block .wbpc-pill-list,
.wbpc-block .wbpc-commerce-grid,
.wbpc-block .wbpc-buying-snapshot,
.wbpc-block .wbpc-quick-facts,
.wbpc-block .wbpc-guidance-grid {
  margin-top: 0.9rem;
}

.wbpc-block ul,
.wbpc-confidence-notes,
.wbpc-need-to-know {
  margin: 0;
  padding-left: 1.1rem;
  color: color-mix(in srgb, var(--text) 76%, var(--bg) 24%);
}

.wbpc-block li + li,
.wbpc-confidence-notes li + li,
.wbpc-need-to-know__item + .wbpc-need-to-know__item {
  margin-top: 0.45rem;
}

.wbpc-section-nav {
  gap: 0.8rem;
}

.wbpc-section-nav__title {
  font-weight: 800;
  line-height: 1.3;
}

.wbpc-section-nav__links {
  display: flex;
  gap: 0.65rem;
  overflow-x: auto;
  padding-bottom: 0.15rem;
  scrollbar-width: thin;
}

.wbpc-section-nav__link {
  white-space: nowrap;
}

.wbpc-pill-list,
.wbpc-badge-list,
.wbpc-link-list,
.wbpc-buying-snapshot {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.wbpc-pill,
.wbpc-badge,
.wbpc-link-pill,
.wbpc-buying-snapshot__item {
  line-height: 1.2;
}

.wbpc-link-pill {
  text-decoration: none;
}

.wbpc-link-pill:hover {
  text-decoration: none;
}

.wbpc-commerce-grid,
.wbpc-quick-facts,
.wbpc-guidance-grid {
  display: grid;
  gap: 0.8rem;
  grid-template-columns: 1fr;
}

.wbpc-commerce-card,
.wbpc-quick-facts__item,
.wbpc-guidance-grid__item {
  padding: 0.95rem;
  border: 1px solid color-mix(in srgb, var(--text) 8%, var(--surface) 92%);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.72);
}

.wbpc-commerce-card__label,
.wbpc-quick-facts__label,
.wbpc-guidance-grid__label {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--accent) 55%, var(--text) 45%);
}

.wbpc-commerce-card__value,
.wbpc-quick-facts__value,
.wbpc-guidance-grid__value {
  display: block;
  font-weight: 700;
  line-height: 1.35;
}

.wbpc-spec-table {
  width: 100%;
  margin: 0;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--text) 8%, var(--surface) 92%);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.7);
}

.wbpc-spec-table th,
.wbpc-spec-table td {
  padding: 0.8rem 0.9rem;
  border-bottom: 1px solid color-mix(in srgb, var(--text) 7%, var(--surface) 93%);
  text-align: left;
  vertical-align: top;
}

.wbpc-spec-table tr:last-child th,
.wbpc-spec-table tr:last-child td {
  border-bottom: 0;
}

.wbpc-spec-table th {
  width: 38%;
  font-weight: 800;
  background: color-mix(in srgb, var(--accent) 6%, var(--surface) 94%);
}

.wbpc-faq details {
  border: 1px solid color-mix(in srgb, var(--text) 7%, var(--surface) 93%);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.72);
  padding: 0.9rem 1rem;
}

.wbpc-faq details + details {
  margin-top: 0.7rem;
}

.wbpc-faq summary {
  cursor: pointer;
  font-weight: 700;
  list-style: none;
}

.wbpc-faq summary::-webkit-details-marker {
  display: none;
}

.wbpc-faq p {
  margin-top: 0.7rem;
  color: color-mix(in srgb, var(--text) 76%, var(--bg) 24%);
}

.wbpc-faq-support {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid color-mix(in srgb, var(--text) 8%, var(--surface) 92%);
}

.wbpc-related-products__header {
  display: grid;
  gap: 0.45rem;
}

.wbpc-related-products .products {
  margin: 0;
}

.wbpc-block--review-prompt,
.wbpc-block--bundles {
  border-color: color-mix(in srgb, var(--accent) 18%, var(--surface) 82%);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--accent) 9%, var(--surface) 91%),
      color-mix(in srgb, var(--brand-tan) 28%, var(--surface) 72%)
    );
}

.wbpc-block--trust,
.wbpc-block--confidence-notes,
.wbpc-block--warranty-support,
.wbpc-block--shipping-returns,
.wbpc-block--returns-summary,
.wbpc-block--delivery-promise-notes {
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--surface) 92%, var(--bg) 8%),
      color-mix(in srgb, var(--surface) 85%, var(--bg) 15%)
    );
}

.wbpc-block--need-to-know,
.wbpc-block--purchase-guidance,
.wbpc-block--installation-checklist,
.wbpc-block--procurement-notes,
.wbpc-block--project-readiness {
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--accent) 6%, var(--surface) 94%),
      color-mix(in srgb, var(--surface) 90%, var(--bg) 10%)
    );
}

.wbpc-block--at-a-glance,
.wbpc-block--buying-snapshot,
.wbpc-block--quick-facts,
.wbpc-block--commerce {
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--surface) 94%, var(--bg) 6%),
      color-mix(in srgb, var(--surface) 88%, var(--bg) 12%)
    );
}

@media (min-width: 48rem) {
  .wbpc-commerce-grid,
  .wbpc-quick-facts,
  .wbpc-guidance-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 72rem) {
  .wbpc-commerce-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .wbpc-guidance-grid,
  .wbpc-quick-facts {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}