/* Interactive product explorer: feature callouts */
.product-stage.interactive-product-stage{
  cursor:default;
  isolation:isolate;
}
.product-stage.interactive-product-stage .product-stage-bg{
  transition:transform .8s cubic-bezier(.2,.7,.2,1),filter .6s ease,opacity .6s ease;
}
.product-stage.interactive-product-stage .product-core-image{
  transition:transform .72s cubic-bezier(.16,1,.3,1),filter .55s ease;
  transform-origin:50% 56%;
  will-change:transform;
}
.product-stage.interactive-product-stage:hover .product-stage-bg,
.product-stage.interactive-product-stage:focus-within .product-stage-bg,
.product-stage.interactive-product-stage.is-exploring .product-stage-bg{
  transform:scale(1.045);
  filter:saturate(1.02) brightness(.72);
}
.product-stage.interactive-product-stage:hover .product-core-image,
.product-stage.interactive-product-stage:focus-within .product-core-image,
.product-stage.interactive-product-stage.is-exploring .product-core-image{
  transform:translateX(-50%) translateY(-1.8%) scale(var(--product-hover-scale,1.15));
  filter:drop-shadow(0 42px 42px rgba(0,0,0,.92)) drop-shadow(0 0 34px rgba(243,179,36,.22));
}
.product-explorer-hint{
  position:absolute;z-index:9;right:24px;top:24px;display:flex;align-items:center;gap:9px;
  border:1px solid rgba(255,255,255,.15);border-radius:999px;background:rgba(0,0,0,.56);
  padding:10px 13px;color:#dfe5db;font:900 9px/1 'Courier New',monospace;letter-spacing:.13em;
  text-transform:uppercase;backdrop-filter:blur(12px);box-shadow:0 14px 36px rgba(0,0,0,.28);
  pointer-events:none;
}
.product-explorer-hint::before{
  content:'◎';color:var(--acid);font-size:13px;text-shadow:0 0 14px rgba(243,179,36,.65);
}
.product-explorer-hint .touch-copy{display:none}
.product-hotspot{
  --hotspot-x:50%;--hotspot-y:50%;
  position:absolute;z-index:10;left:var(--hotspot-x);top:var(--hotspot-y);display:flex;align-items:center;
  min-width:30px;min-height:30px;padding:0;border:0;background:transparent;color:#fff;cursor:pointer;
  opacity:0;transform:translate(-50%,-50%) scale(.72);transition:opacity .28s ease,transform .42s cubic-bezier(.16,1,.3,1);
  font:inherit;text-align:left;
}
.product-stage.interactive-product-stage:hover .product-hotspot,
.product-stage.interactive-product-stage:focus-within .product-hotspot,
.product-stage.interactive-product-stage.is-exploring .product-hotspot{
  opacity:1;transform:translate(-50%,-50%) scale(1);
}
.product-hotspot:nth-of-type(2){transition-delay:.04s}.product-hotspot:nth-of-type(3){transition-delay:.08s}.product-hotspot:nth-of-type(4){transition-delay:.12s}
.product-hotspot-dot{
  position:relative;z-index:3;display:grid;place-items:center;width:30px;height:30px;flex:0 0 30px;border-radius:50%;
  border:1px solid rgba(255,255,255,.72);background:var(--acid);color:#050704;font:1000 15px/1 Inter,Arial,sans-serif;
  box-shadow:0 0 0 7px rgba(243,179,36,.12),0 0 24px rgba(243,179,36,.72),0 8px 24px rgba(0,0,0,.5);
  transition:transform .25s ease,box-shadow .25s ease,background .25s ease;
}
.product-hotspot-dot::after{
  content:'';position:absolute;inset:-10px;border:1px solid rgba(243,179,36,.45);border-radius:50%;
  animation:productHotspotPulse 2.2s ease-out infinite;
}
@keyframes productHotspotPulse{0%{transform:scale(.62);opacity:.78}75%,100%{transform:scale(1.55);opacity:0}}
.product-hotspot-card{
  position:absolute;top:50%;display:block;width:188px;min-height:42px;padding:10px 12px;border-radius:14px;
  border:1px solid rgba(243,179,36,.28);background:linear-gradient(135deg,rgba(6,8,7,.94),rgba(11,13,10,.82));
  backdrop-filter:blur(14px);box-shadow:0 16px 42px rgba(0,0,0,.48),inset 0 0 28px rgba(243,179,36,.025);
  transform:translateY(-50%);transition:width .28s ease,border-color .28s ease,background .28s ease,box-shadow .28s ease;
  pointer-events:none;
}
.product-hotspot.side-right .product-hotspot-card{left:42px}
.product-hotspot.side-left .product-hotspot-card{right:42px;text-align:right}
.product-hotspot-card strong{
  display:block;color:#fff;font:1000 11px/1.2 Inter,Arial,sans-serif;letter-spacing:.035em;text-transform:uppercase;
}
.product-hotspot-card span{
  display:block;max-height:0;overflow:hidden;opacity:0;margin-top:0;color:#cbd4c7;font:600 11px/1.48 Inter,Arial,sans-serif;
  transition:max-height .3s ease,opacity .25s ease,margin-top .25s ease;
}
.product-hotspot:hover .product-hotspot-dot,
.product-hotspot:focus-visible .product-hotspot-dot,
.product-hotspot[aria-expanded="true"] .product-hotspot-dot{
  transform:scale(1.12);background:#fff;box-shadow:0 0 0 8px rgba(243,179,36,.16),0 0 34px rgba(243,179,36,.88),0 10px 28px rgba(0,0,0,.54);
}
.product-hotspot:hover .product-hotspot-card,
.product-hotspot:focus-visible .product-hotspot-card,
.product-hotspot[aria-expanded="true"] .product-hotspot-card{
  width:250px;border-color:rgba(243,179,36,.7);background:linear-gradient(135deg,rgba(6,8,7,.98),rgba(18,15,7,.94));
  box-shadow:0 20px 52px rgba(0,0,0,.56),0 0 34px rgba(243,179,36,.10);
}
.product-hotspot:hover .product-hotspot-card span,
.product-hotspot:focus-visible .product-hotspot-card span,
.product-hotspot[aria-expanded="true"] .product-hotspot-card span{
  max-height:88px;opacity:1;margin-top:6px;
}
.product-hotspot:focus-visible{outline:none}
.product-stage[data-product-explorer="tankwatch"] .product-core-image{transform-origin:50% 50%}
.product-stage[data-product-explorer="tankwatch"]{--product-hover-scale:1.22}
.product-stage[data-product-explorer="ft4000ap-twin"]{--product-hover-scale:1.12}
.product-stage[data-product-explorer="ft4000-hsp"]{--product-hover-scale:1.12}
.product-stage[data-product-explorer="ft4000ab"]{--product-hover-scale:1.13}

@media(max-width:1180px){
  .product-hotspot-card{width:158px}.product-hotspot:hover .product-hotspot-card,.product-hotspot:focus-visible .product-hotspot-card,.product-hotspot[aria-expanded="true"] .product-hotspot-card{width:210px}
  .product-hotspot-card strong{font-size:10px}.product-hotspot-card span{font-size:10px}
}
@media(max-width:1050px){
  .product-stage.interactive-product-stage{min-height:590px}
  .product-explorer-hint{top:22px;right:22px}
}
@media(max-width:720px){
  .product-stage.interactive-product-stage{min-height:500px;cursor:default}
  .product-explorer-hint{left:14px;right:auto;top:14px;padding:9px 11px;font-size:8px}
  .product-explorer-hint .desktop-copy{display:none}.product-explorer-hint .touch-copy{display:inline}
  .product-stage.interactive-product-stage .stage-label{display:none}
  .product-stage.interactive-product-stage:hover .product-core-image{transform:translateX(-50%)}
  .product-stage.interactive-product-stage.is-exploring .product-core-image,
  .product-stage.interactive-product-stage:focus-within .product-core-image{transform:translateX(-50%) translateY(-1%) scale(1.07)}
  .product-hotspot{opacity:1;transform:translate(-50%,-50%) scale(.9)}
  .product-hotspot-card{width:126px;padding:8px 9px;border-radius:11px}
  .product-hotspot.side-right .product-hotspot-card{left:36px}.product-hotspot.side-left .product-hotspot-card{right:36px}
  .product-hotspot-card strong{font-size:8px;line-height:1.25}.product-hotspot-card span{font-size:9px;line-height:1.38}
  .product-hotspot:hover .product-hotspot-card,.product-hotspot:focus-visible .product-hotspot-card,.product-hotspot[aria-expanded="true"] .product-hotspot-card{width:174px}
  .product-hotspot-dot{width:26px;height:26px;flex-basis:26px;font-size:13px;box-shadow:0 0 0 5px rgba(243,179,36,.12),0 0 18px rgba(243,179,36,.62)}
}
@media(max-width:460px){
  .product-stage.interactive-product-stage{min-height:470px}
  .product-hotspot-card{width:106px}.product-hotspot:hover .product-hotspot-card,.product-hotspot:focus-visible .product-hotspot-card,.product-hotspot[aria-expanded="true"] .product-hotspot-card{width:150px}
  .product-hotspot-card span{font-size:8px}
}
@media(prefers-reduced-motion:reduce){
  .product-stage.interactive-product-stage .product-core-image,.product-stage.interactive-product-stage .product-stage-bg,.product-hotspot,.product-hotspot-card,.product-hotspot-card span{transition:none!important}
  .product-hotspot-dot::after{animation:none!important}
}


/* v6.9.5 — accessibility and contrast upgrades for the product explorer */
.product-explorer-hint{
  border-color:rgba(243,179,36,.26)!important;
  background:rgba(8,10,9,.82)!important;
  color:#f3f6ef!important;
  font-size:10px!important;
  letter-spacing:.12em!important;
  box-shadow:0 14px 36px rgba(0,0,0,.30)!important;
}
.product-hotspot{min-width:34px;min-height:34px}
.product-hotspot:focus-visible{outline:3px solid #f3b324;outline-offset:4px;border-radius:20px}
.product-hotspot-dot{
  width:34px;height:34px;flex-basis:34px;
  border-color:rgba(255,255,255,.88)!important;
  box-shadow:0 0 0 7px rgba(243,179,36,.14),0 0 24px rgba(243,179,36,.56),0 8px 24px rgba(0,0,0,.5)!important;
}
.product-hotspot-card{
  width:220px;min-height:56px;padding:14px 15px 13px;
  border-color:rgba(243,179,36,.38)!important;
  background:linear-gradient(135deg,rgba(8,10,9,.97),rgba(15,16,13,.94))!important;
  box-shadow:0 18px 40px rgba(0,0,0,.42),inset 0 0 0 1px rgba(255,255,255,.04)!important;
}
.product-hotspot-card strong{
  color:#fff!important;
  font-size:13px!important;line-height:1.18!important;letter-spacing:.02em!important;
  text-shadow:none!important;
}
.product-hotspot-card span{
  color:#eef3ea!important;
  font-size:12px!important;line-height:1.5!important;font-weight:600!important;
  text-shadow:none!important;
}
.product-hotspot:hover .product-hotspot-card,
.product-hotspot:focus-visible .product-hotspot-card,
.product-hotspot[aria-expanded="true"] .product-hotspot-card{
  width:290px;
  border-color:rgba(243,179,36,.76)!important;
  background:linear-gradient(135deg,rgba(6,8,7,.99),rgba(25,20,9,.96))!important;
}
.product-hotspot:hover .product-hotspot-card span,
.product-hotspot:focus-visible .product-hotspot-card span,
.product-hotspot[aria-expanded="true"] .product-hotspot-card span{max-height:120px}
html[data-theme="light"] .product-explorer-hint,
html[data-theme="light"] .product-hotspot-card{background:linear-gradient(135deg,rgba(10,12,10,.96),rgba(18,16,11,.94))!important}
html[data-theme="light"] .product-hotspot-card strong{color:#fff!important}
html[data-theme="light"] .product-hotspot-card span{color:#f2f4ee!important}
html[data-theme="light"] .product-hotspot-dot{border-color:rgba(255,255,255,.9)!important}
@media(max-width:1180px){
  .product-hotspot-card{width:186px;padding:12px 13px}.product-hotspot:hover .product-hotspot-card,.product-hotspot:focus-visible .product-hotspot-card,.product-hotspot[aria-expanded="true"] .product-hotspot-card{width:246px}
  .product-hotspot-card strong{font-size:12px!important}.product-hotspot-card span{font-size:11px!important}
}
@media(max-width:720px){
  .product-explorer-hint{font-size:9px!important}
  .product-hotspot-card{width:150px;padding:10px 11px}.product-hotspot:hover .product-hotspot-card,.product-hotspot:focus-visible .product-hotspot-card,.product-hotspot[aria-expanded="true"] .product-hotspot-card{width:198px}
  .product-hotspot-card strong{font-size:10px!important}.product-hotspot-card span{font-size:10px!important;line-height:1.42!important}
}
@media(prefers-contrast:more){
  .product-hotspot-card,.product-explorer-hint{background:#000!important;border-color:#ffd35d!important}
  .product-hotspot-card strong,.product-hotspot-card span,.product-explorer-hint{color:#fff!important}
}


/* FT4000AP Twin: keep the extra component callouts compact around the cabinet. */
.product-stage[data-product-explorer="ft4000ap-twin"] .product-hotspot-card{max-width:220px}
.product-stage[data-product-explorer="ft4000ap-twin"] .product-hotspot:nth-of-type(5){transition-delay:.16s}
.product-stage[data-product-explorer="ft4000ap-twin"] .product-hotspot:nth-of-type(6){transition-delay:.20s}
@media(max-width:720px){
  .product-stage[data-product-explorer="ft4000ap-twin"] .product-hotspot-card{max-width:168px}
}

.product-stage[data-product-explorer] .product-hotspot:nth-of-type(n+5){transition-delay:.16s}
.product-stage[data-product-explorer] .product-hotspot:nth-of-type(n+6){transition-delay:.20s}
.product-stage[data-product-explorer] .product-hotspot:nth-of-type(n+7){transition-delay:.24s}


/* Hotspots anchored to the visible product image. Only the three adjusted units
   and Compact use these compact side labels; other products keep their positions. */
.product-stage:is([data-product-explorer="ft4000"],[data-product-explorer="ft4000ap"],[data-product-explorer="ft4000-hsp"],[data-product-explorer="large-compact"]) .product-hotspot-card{width:186px;max-width:186px;padding:10px 12px}
.product-stage:is([data-product-explorer="ft4000"],[data-product-explorer="ft4000ap"],[data-product-explorer="ft4000-hsp"],[data-product-explorer="large-compact"]) .product-hotspot:is(:hover,:focus-visible,[aria-expanded="true"]) .product-hotspot-card{width:196px;max-width:196px}
.product-stage:is([data-product-explorer="ft4000"],[data-product-explorer="ft4000ap"],[data-product-explorer="ft4000-hsp"],[data-product-explorer="large-compact"]) .product-hotspot-card strong{font-size:11px!important}
.product-feature-mobile-detail{display:none}
@media(max-width:720px){
  .product-stage.interactive-product-stage .product-hotspot-card{display:none!important}
  .product-stage.interactive-product-stage .product-hotspot{min-width:44px;min-height:44px}
  .product-feature-mobile-detail:not([hidden]){display:block;order:5!important;width:100%;padding:15px 18px;border:1px solid rgba(243,179,36,.54);border-radius:14px;background:#0d100d;color:#eef3ea}
  .product-feature-mobile-detail strong{display:block;margin-bottom:5px;color:#fff;font-size:13px;text-transform:uppercase}
  .product-feature-mobile-detail span{display:block;font-size:12px;line-height:1.45}
}

/* Keep markers fixed to components while cards flip or move to a free slot. */
.product-stage:is([data-product-explorer="ft4000"],[data-product-explorer="ft4000ap"],[data-product-explorer="ft4000-hsp"],[data-product-explorer="large-compact"]) .product-hotspot-card{
  top:calc(50% + var(--card-shift-y,0px) + var(--card-active-edge-y,0px));
}
.product-stage:is([data-product-explorer="ft4000"],[data-product-explorer="ft4000ap"],[data-product-explorer="ft4000-hsp"],[data-product-explorer="large-compact"]) .product-hotspot.side-right .product-hotspot-card{
  left:calc(42px + var(--card-nudge-x,0px));
}
.product-stage:is([data-product-explorer="ft4000"],[data-product-explorer="ft4000ap"],[data-product-explorer="ft4000-hsp"],[data-product-explorer="large-compact"]) .product-hotspot.side-left .product-hotspot-card{
  right:calc(42px - var(--card-nudge-x,0px));
}
/* At rest the photograph shows through. The inspected feature becomes solid. */
.product-stage.interactive-product-stage .product-hotspot-card,
html[data-theme="light"] .product-stage.interactive-product-stage .product-hotspot-card{
  background:linear-gradient(135deg,rgba(6,8,7,.64),rgba(14,16,12,.57))!important;
  backdrop-filter:blur(3px);
  text-shadow:0 1px 3px #000;
}
.product-stage.interactive-product-stage .product-hotspot:is(:hover,:focus-visible,[aria-expanded="true"]) .product-hotspot-card,
html[data-theme="light"] .product-stage.interactive-product-stage .product-hotspot:is(:hover,:focus-visible,[aria-expanded="true"]) .product-hotspot-card{
  background:linear-gradient(135deg,rgba(6,8,7,.99),rgba(22,19,11,.97))!important;
  backdrop-filter:blur(8px);
}
@media(prefers-contrast:more){
  .product-stage.interactive-product-stage .product-hotspot-card,
  html[data-theme="light"] .product-stage.interactive-product-stage .product-hotspot-card{background:#000!important}
}

/* The marker and card share a stacking context. A hovered hotspot rises as a
   whole, above even a different card that remains selected. */
.product-stage.interactive-product-stage .product-hotspot[aria-expanded="true"]{z-index:20}
.product-stage.interactive-product-stage .product-hotspot:focus-visible{z-index:30}
@media(hover:hover){
  .product-stage.interactive-product-stage .product-hotspot:hover{z-index:40}
}
/* A card is part of the button's pointer target. This also allows a user to
   hover the title itself instead of having to hit its small marker. */
.product-stage.interactive-product-stage .product-hotspot-card{pointer-events:auto}

/* On a narrow tablet, use the same below-image explanation as on a phone.
   The image and its fixed markers stay in their original stage. */
@media (min-width:721px) and (max-width:860px){
  .product-stage:is([data-product-explorer="ft4000"],[data-product-explorer="ft4000ap"],[data-product-explorer="ft4000-hsp"],[data-product-explorer="large-compact"]) .product-hotspot-card{display:none!important}
  .product-stage:is([data-product-explorer="ft4000"],[data-product-explorer="ft4000ap"],[data-product-explorer="ft4000-hsp"],[data-product-explorer="large-compact"]) + .product-feature-mobile-detail:not([hidden]){
    display:block;order:5!important;width:100%;padding:15px 18px;border:1px solid rgba(243,179,36,.54);
    border-radius:14px;background:#0d100d;color:#eef3ea
  }
  .product-feature-mobile-detail strong{display:block;margin-bottom:5px;color:#fff;font-size:13px;text-transform:uppercase}
  .product-feature-mobile-detail span{display:block;font-size:12px;line-height:1.45}
}