/* ================================================
   Product Page — shell & breadcrumb
   Mobile-first
   ================================================ */

.page-content:has(.product-page) {
  padding-top: 0;
}

.product-page {
  padding: var(--space-sm) 0 var(--space-2xl);
}

@media (min-width: 768px) {
  .product-page {
    padding: 0 0 var(--space-5xl);
  }
}

.product-page__breadcrumb {
  margin-bottom: 0;
}

.product-page .breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.product-page .breadcrumb__item {
  color: var(--ink-soft);
  font-size: 0.8rem;
  font-family: var(--font-ui);
  letter-spacing: 0.02em;
}

.product-page .breadcrumb__item:not(:last-child)::after {
  content: "/";
  margin-left: 0.5rem;
  color: var(--ink-faint);
}

.product-page .breadcrumb__link {
  color: inherit;
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease);
}

.product-page .breadcrumb__link:hover {
  color: var(--ink);
}


/* Wireframe alignment overrides */

.product-page {
  padding-top: 0;
}

.product-page .product-page__breadcrumb.breadcrumb {
  padding: var(--space-sm) 0;
  margin: 0;
}

/* Wider container on product pages (1600px vs site default 1400px) */
.page-content:has(.product-page) .container {
  max-width: 1600px;
}

/* Hide the empty Drupal messages placeholder on product pages */
.page-content:has(.product-page) [data-drupal-messages-fallback] {
  display: none;
}

.product-page .breadcrumb__item,
.product-page .breadcrumb__current,
.product-page .breadcrumb__link {
  font-size: 0.72rem;
}