.nature40-product { --ip-blue: #0078bf; --ip-blue-dark: #005f94; }
.nature40-product *, .nature40-product *::before, .nature40-product *::after { box-sizing: border-box; }
.nature40-product .nature40-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.nature40-product .nature40-intro > img { display: block; width: 100%; height: auto; }
.nature40-product .nature40-benefits { padding: 0; margin: 0 0 24px 18px; }
.nature40-product .nature40-benefits li { margin-bottom: 12px; }
.nature40-product .nature40-benefits strong { color: var(--ip-blue); }
.nature40-product section { margin: 28px 0; }
.nature40-product .two-col-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.nature40-product h3 { margin: 0 0 12px; }
.nature40-product .system-panel { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.nature40-product .system-image-stage { position: relative; overflow: hidden; aspect-ratio: 1200 / 988; }
.nature40-product .system-image-stage .system-image { display: block; width: 100%; height: auto; margin: 0; }
.nature40-product .system-image-base { position: relative; }
.nature40-product .system-image-stage .system-image-water { position: absolute; inset: 0; opacity: 0; transition: opacity .65s ease; }
.nature40-product .is-water .system-image-water { opacity: 1; }
.nature40-product .system-layer-markers { position: absolute; inset: 0; pointer-events: none; }
.nature40-product .system-layer-marker { position: absolute; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 2px solid white; border-radius: 50%; background: var(--ip-blue); color: white; font-weight: 700; font-size: 16px; opacity: 0; transform: translate(-50%, -50%) scale(.96); transition: opacity .18s, transform .18s; box-shadow: 0 4px 12px #0003; }
.nature40-product .system-layer-marker.is-active { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.nature40-product [data-layer-marker="1"] { left: 17.5%; top: 66%; }
.nature40-product [data-layer-marker="2"] { left: 22.5%; top: 62.5%; }
.nature40-product [data-layer-marker="3"] { left: 28.5%; top: 58%; }
.nature40-product [data-layer-marker="4"] { left: 36.5%; top: 52%; }
.nature40-product [data-layer-marker="5"] { left: 45.5%; top: 45%; }
.nature40-product [data-layer-marker="6"] { left: 64%; top: 30%; }
.nature40-product .system-image-controls { display: flex; width: fit-content; max-width: 100%; margin: 12px auto; padding: 4px; gap: 4px; border: 1px solid #d8e2ea; border-radius: 6px; }
.nature40-product .system-image-control { min-height: 40px; padding: 8px 12px; border: 0; border-radius: 4px; background: white; color: var(--ip-blue); font: inherit; font-weight: 600; cursor: pointer; }
.nature40-product .system-image-control.is-active { background: var(--ip-blue); color: white; }
.nature40-product button:focus-visible { outline: 3px solid #0078bf; outline-offset: 3px; }
.nature40-product .system-water-note { display: none; padding: 12px 14px; margin: 12px 0; background: #f1f6fa; border-left: 4px solid var(--ip-blue); }
.nature40-product .is-water .system-water-note { display: block; }
.nature40-product .system-legend-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
.nature40-product .system-legend { list-style: none; margin: 0; padding: 0; }
.nature40-product .system-legend li { margin: 0 0 4px; padding: 0; }
.nature40-product .system-legend-button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 42px; border: 0; padding: 5px 8px; background: transparent; color: inherit; text-align: left; font: inherit; cursor: pointer; }
.nature40-product .system-legend-button:hover, .nature40-product .system-legend-button.is-active { background: #e7f1f8; color: var(--ip-blue-dark); }
.nature40-product .system-number { display: inline-flex; flex: 0 0 26px; width: 26px; height: 26px; align-items: center; justify-content: center; background: var(--ip-blue); color: white; border-radius: 50%; font-weight: 600; }
.nature40-product .system-note-box strong { display: block; margin-bottom: 12px; color: var(--ip-blue); }
@media (max-width: 600px) {
  .nature40-product .nature40-intro, .nature40-product .two-col-grid, .nature40-product .system-legend-wrap { grid-template-columns: minmax(0, 1fr); }
  .nature40-product .nature40-intro > img { width: min(100%, 310px); margin: 0 auto; }
  .nature40-product .system-layer-marker { width: 28px; height: 28px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .nature40-product .system-image-water, .nature40-product .system-layer-marker { transition: none; }
}
@media print {
  .nature40-product .system-image-controls, .nature40-product .system-layer-markers { display: none; }
  .nature40-product .system-image-stage .system-image-water { display: none; }
}