/* Product layouts reuse the IA-B2B theme and utility components. */
.product-page { color: var(--color-secondary); }
.dark .product-page { color: var(--color-accent); }
.product-page h1, .product-page h2, .product-page h3, .product-page .badge { text-transform: none; }
.product-page h1 { font-size: clamp(2.35rem, 4.5vw, 4rem); line-height: 1.12; }
.product-page h2 { font-size: clamp(1.8rem, 3vw, 2.8rem); line-height: 1.2; }
.product-page p { line-height: 1.75; }
.product-hero { text-align: center; }
.product-hero .badge { margin-inline: auto; }
.product-intro { max-width: 1100px; margin-inline: auto; }
.product-copy p + p { margin-top: 1.25rem; }
.product-copy a:not(.btn), .product-source { color: var(--color-primary-500); text-decoration: underline; text-underline-offset: 4px; }
.product-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }
.product-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.product-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.product-grid > *, .panel-split > * { min-width: 0; }
.product-list { padding-left: 1.25rem; list-style: disc; line-height: 1.8; }
.product-list li + li { margin-top: .5rem; }
.product-flow { display: grid; gap: 1.5rem; list-style: none; padding: 0; margin-top: 2rem; }
.product-flow > li { padding: 2rem; }
.product-flow > li + li::before { content: "↓"; display: block; text-align: center; color: var(--color-primary-500); margin-bottom: 1rem; font-size: 1.5rem; }
.panel-window, .panel-card, .panel-route-screen, .panel-floating { overflow: hidden; border: 1px solid color-mix(in srgb, var(--color-primary-500) 14%, white); border-radius: 22px; background: #fff; padding: 10px; box-shadow: 0 24px 65px color-mix(in srgb, var(--color-primary-500) 9%, transparent); }
.dark .panel-window, .dark .panel-card, .dark .panel-route-screen, .dark .panel-floating { background: var(--color-background-7); border-color: var(--color-stroke-6); }
.panel-window { padding-top: 14px; }
.panel-window::before { content: "● ● ●"; display: block; color: color-mix(in srgb, var(--color-primary-500) 35%, white); margin: 0 8px 14px; font-size: 9px; line-height: 1; letter-spacing: 5px; }
.product-page img { display: block; width: 100%; height: auto; }
.panel-window .planner-image-link, .panel-card .planner-image-link, .panel-route-screen .planner-image-link, .panel-floating .planner-image-link { overflow: hidden; border-radius: 12px; }
.panel-caption { text-align: center; font-size: .9rem; margin-top: 1rem; }
.panel-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem; align-items: center; }
.panel-route-showcase { margin-top: 2rem; padding: clamp(12px, 2vw, 28px); border-radius: 30px; background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary-500) 7%, transparent), transparent 65%); }
.panel-floating { padding: 14px; border-radius: 26px; box-shadow: 0 20px 55px color-mix(in srgb, var(--color-primary-500) 12%, transparent); }
.product-faq { display: grid; gap: 1rem; }
.product-faq summary { font-size: 1.2rem; font-weight: 500; cursor: pointer; }
.product-faq details p { margin-top: 1rem; }
.product-cta { text-align: center; }
.product-cta .product-actions { justify-content: center; }
.product-page [id] { scroll-margin-top: 110px; }
.product-page :focus-visible { outline: 3px solid var(--color-primary-500); outline-offset: 4px; }
.planner-image-link { display: block; cursor: zoom-in; }
.planner-image-dialog { margin: auto; padding: 3.5rem 1.5rem 1.5rem; width: min(96vw, 1600px); max-width: 96vw; max-height: 94dvh; overflow: auto; border: 0; border-radius: 20px; background: var(--color-background-1); color: var(--color-secondary); }
.dark .planner-image-dialog { background: var(--color-background-7); color: var(--color-accent); }
.planner-image-dialog::backdrop { background: #070b10d9; }
.planner-image-dialog img { width: 100%; height: auto; max-height: 76dvh; object-fit: contain; }
.planner-image-close { position: absolute; top: .75rem; right: .75rem; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--color-background-4); color: var(--color-secondary); cursor: pointer; }
.planner-image-caption { text-align: center; margin-top: 1rem; }
@media (max-width: 1023px) { .product-grid.three { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  .product-grid, .product-grid.three, .panel-split { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .product-actions { flex-direction: column; }
  .product-hero .product-actions { max-width: 360px; margin-inline: auto; }
  .product-actions .btn { width: 100%; text-align: center; }
  .product-flow > li { padding: 1.5rem; }
}