.product-page { --primary: #176c38; --primary-strong: #10552b; --product-accent: #287b3c; }
.product-page.soil { --product-accent: #805332; }
.product-page a:not(.btn), .product-overview a:not(.btn) { color: #176c38; text-decoration: underline; text-underline-offset: 3px; }
.product-page header a, .product-page footer a { color: #fff !important; }
/* The blanket underline above is for body copy. In the header it also hit
   the navigation and the language switcher, which on mobile made every
   entry in the open menu underlined. Footer links keep theirs. */
.product-page header a:not(.btn) { text-decoration: none; }  /* :not(.btn) to outrank the rule above, which has the same weight */
.product-page :focus-visible, .product-overview :focus-visible { outline: 3px solid #9c5a16; outline-offset: 4px; }
.product-page header :focus-visible, .product-page footer :focus-visible { outline-color: #ffe194; }
.product-page { overflow-wrap: anywhere; }
.product-page header { position: relative; }
.product-page .page { padding-top: 28px; }
.product-breadcrumb ol { display: flex; flex-wrap: wrap; list-style: none; padding: 0; gap: 8px; }
.product-breadcrumb li + li::before { content: '/'; margin-right: 8px; }
.product-hero { display: grid; grid-template-columns: 1.4fr 1fr; gap: 32px; align-items: center; padding: 28px 0 40px; border-bottom: 2px solid var(--product-accent); }
.product-hero.no-figure { grid-template-columns: minmax(0, 1fr); }
.product-hero h1 { font-size: clamp(27px, 3.5vw, 40px); }
.product-hero figure { margin: 0; }
.product-hero img { width: 100%; height: 340px; object-fit: cover; border-radius: var(--radius); }
.product-eyebrow { color: var(--product-accent); font-weight: 700; }
.product-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.product-badges span { border: 1px solid var(--border); padding: 5px 10px; border-radius: 6px; background: white; }
.product-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.product-grid .card h3 { margin-top: 0; }
.product-page .callout { border-left: 4px solid var(--product-accent); }
.product-page table { min-width: 0; table-layout: fixed; }
.product-page table thead th { white-space: normal; }
.product-page th, .product-page td { overflow-wrap: anywhere; }
.product-page details { padding: 16px; background: white; border: 1px solid var(--border); border-radius: var(--radius-sm); margin: 12px 0; }
.product-page summary { cursor: pointer; font-weight: 700; }
.product-page dl { display: grid; grid-template-columns: minmax(100px, 1fr) 2fr; gap: 10px 20px; }
.product-page dt { font-weight: 700; }
.product-page dd { margin: 0; }
.product-overview { max-width: var(--container); margin: auto; padding: 32px 20px; }
.product-overview .btn-primary { background: #176c38; color: white; }
.product-links { display: flex; flex-wrap: wrap; gap: 12px 24px; }
.product-cta { padding: 24px; background: var(--bg-strong); border-radius: var(--radius); margin-top: 32px; }
.product-page .product-cta h2 { margin-top: 0; }
.product-page .btn-outline { color: #176c38; border-color: #176c38; background: white; }
.product-page .btn-outline:hover { background: var(--bg-strong); }
.product-page .nav-top, .product-home .nav-top { flex-wrap: wrap; gap: 12px; }
.product-page .lang-switcher, .product-home .lang-switcher { flex-wrap: wrap; gap: 6px; }
.product-home .hero-inner { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
@media (max-width: 768px) {
  .product-hero, .product-grid { grid-template-columns: minmax(0, 1fr); }
  .product-hero img { height: 230px; }
  .product-page .btn { white-space: normal; text-align: center; }
  .product-page th, .product-page td { padding: 8px !important; }
}
@media (max-width: 640px) {
  .product-page dl { grid-template-columns: minmax(0, 1fr); }
  .product-page dd { margin-bottom: 12px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* One contextual link out to a product page (T30), in the flow of the
   page rather than as a repeated block of every link. */
.product-context {
  margin: 28px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  color: var(--muted);
}