/* Compact Infinity configurator on the shop's black hero. */
body[data-commerce] .hero-product:has([data-hero-infinity]) {
  display: block;
  height: auto;
  min-height: 630px;
  padding: 18px 22px 22px;
  container-type: inline-size;
  container-name: hero-infinity;
  background: #000;
}
.hero-product:has([data-hero-infinity]) .hero-label {
  position: static;
  top: auto;
  bottom: auto;
  padding: 8px 10px;
  min-width: 0;
  pointer-events: none;
}
.hero-product:has([data-hero-infinity]) .label-one { left: 18px; }
.hero-product:has([data-hero-infinity]) .label-two { right: 18px; }
.hero-product:has([data-hero-infinity]) .energy-rings { pointer-events: none; opacity: .55; }
.hero-infinity-configurator { position: relative; z-index: 2; width: 100%; color: #eaf1ec; display:grid; grid-template-columns:82px minmax(0,1fr) 82px; gap:10px 6px; }
.hero-infinity-configurator .system-product-visual { display:contents; }
.hero-infinity-configurator .system-visual-tabs { position: static; display: grid; grid-column:1/-1; grid-row:1; grid-template-columns: auto repeat(3,auto) auto; align-items: start; gap: 5px; }
.hero-infinity-configurator .system-visual-tabs .label-one { margin-right: 6px; }
.hero-infinity-configurator .system-visual-tabs .label-two { margin-left: 6px; }
.hero-infinity-configurator .system-visual-tabs button,
.hero-infinity-configurator .system-spin-controls button {
  background: transparent;
  border: 1px solid #3b4b40;
  color: #fff;
  padding: 8px 10px;
  border-radius: 5px;
  font-size: 11px;
  min-height: 34px;
}
.hero-infinity-configurator .system-visual-tabs button.is-active,
.hero-infinity-configurator .system-spin-controls button.is-active {
  border-color: #b9f33c;
  color: #fff;
  background: transparent;
}
.hero-infinity-configurator .system-visual-panel { grid-column:2; grid-row:2; min-width:0; min-height:490px; align-content: center; }
.hero-infinity-configurator .system-spin { gap: 9px; }
.hero-infinity-configurator .system-spin img { height: 490px; width: calc(100% + 100px); max-width:none; max-height: none; filter: none; object-fit: contain; }
.hero-infinity-configurator .system-spin small { color: #92a599; text-align: center; font-size: 10px; }
.hero-infinity-configurator .system-spin-controls input { width: 110px; accent-color: #b9f33c; }
.hero-infinity-configurator .system-visual-metrics { display: none; }
.hero-infinity-configurator .system-visual-metrics div { border-color: #29392f; padding: 10px 8px; }
.hero-infinity-configurator .system-visual-metrics div:nth-child(2),
.hero-infinity-configurator .system-visual-metrics div:nth-child(3) { display: none; }
.hero-infinity-configurator .system-visual-metrics span { color: #92a599; font-size: 9px; }
.hero-infinity-configurator .system-visual-metrics b { color: #eef4ef; font-size: 14px; }
.hero-infinity-configurator .system-configuration-diagram { padding: 6px 0; }
.hero-infinity-configurator .system-towers { min-height: 0; gap: 24px; }
.hero-infinity-configurator .system-depth-view,
.hero-infinity-configurator .system-configuration-diagram > small { display: none; }
.hero-infinity-configurator .diagram-measure { color: #b8cdc0; border-color: #3b4b40; font-size: 10px; }
.hero-infinity-configurator .infinity-tower > small { color: #92a599; }
.hero-infinity-configurator .tower-width-measure b,
.hero-infinity-configurator .tower-height-measure b { color: #b8cdc0; background: #000; }
.hero-infinity-configurator .product-photo-panel img { height: auto; width: 100%; object-fit: contain; }
.hero-infinity-configurator .system-photo-caption b { color: #eef4ef; font-size: 17px; }
.hero-infinity-configurator .system-photo-caption span { color: #92a599; font-size: 10px; }
.hero-infinity-selection { display:contents; }
.hero-size-label { grid-column:1/-1; grid-row:3; font-size: 11px; color: #aabbb0; text-align:center; }
.hero-size-options { display: grid; grid-template-columns:minmax(0,1fr); gap: 10px; grid-row:2; align-content:center; position:relative; z-index:3; }
.hero-sizes-left { grid-column:1; }.hero-sizes-right { grid-column:3; }
.hero-size-options button { display: grid; justify-items: center; gap: 4px; min-height: 54px; padding: 8px 4px; border: 1px solid #3b4b40; border-radius: 3px; background: transparent; color: #fff; }
.hero-size-options button b { font-size: 12px; font-weight: 500; white-space: nowrap; }
.hero-size-options button small { font-size: 10px; color: #fff; }
.hero-size-options button[aria-pressed="true"] { border-color: #b9f33c; }
.hero-size-options button:hover { border-color: #fff; }
.hero-size-options button[aria-pressed="true"]:hover { border-color: #b9f33c; }
.hero-infinity-configurator :is(.hero-size-options,.system-visual-tabs,.system-spin-controls) button { opacity:1; }
.hero-infinity-configurator :is(.hero-size-options,.system-visual-tabs,.system-spin-controls) button:focus-visible { outline:2px solid #fff; outline-offset:3px; }
.hero-infinity-selection a { grid-column:1/-1; grid-row:4; justify-self: end; color: #d1efab; white-space: nowrap; font-size: 12px; padding-block: 7px; }
@container hero-infinity (max-width:480px) {
  .hero-infinity-configurator .system-visual-tabs { grid-template-columns: repeat(6,minmax(0,1fr)); gap: 6px; }
  .hero-infinity-configurator .system-visual-tabs .label-one { grid-column: 1 / 4; grid-row: 1; justify-self: start; margin: 0; }
  .hero-infinity-configurator .system-visual-tabs .label-two { grid-column: 4 / -1; grid-row: 1; justify-self: end; margin: 0; }
  .hero-infinity-configurator .system-visual-tabs button { grid-column: span 2; grid-row: 2; padding-inline: 5px; }
}
@media(max-width:680px) {
  body[data-commerce] .hero-product:has([data-hero-infinity]) { padding: 14px; min-height: 610px; }
  .hero-product:has([data-hero-infinity]) .hero-label { padding: 7px; }
  .hero-infinity-configurator { grid-template-columns:70px minmax(0,1fr) 70px; }
  .hero-infinity-configurator .system-spin img { height: 430px; width:calc(100% + 90px); }
  .hero-infinity-configurator .system-spin-controls { gap: 5px; }
  .hero-infinity-configurator .system-spin-controls button { font-size: 10px; padding: 8px; }
  .hero-infinity-configurator .system-spin-controls input { width: 85px; }
  .hero-size-options button b { font-size: 11px; }
  .hero-size-options button small { font-size: 9px; }
}
@media(max-width:380px) {
  .hero-infinity-configurator { grid-template-columns:64px minmax(0,1fr) 64px; }
  .hero-infinity-configurator .system-spin-controls input { width: 70px; }
}