/* Elyra Product Hotspots — Elementor widget */
.elyra-hotspot-canvas{
  position:relative;
  width:100%;
  overflow:visible;
  isolation:isolate;
}
.elyra-hotspot-canvas--image{
  min-height:180px;
  overflow:visible;
  background:#f5f5f5;
}
.elyra-hotspot-image{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
}
.elyra-hotspot-layer{
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
}
.elyra-hotspot{
  --elyra-hotspot-x:50%;
  --elyra-hotspot-y:50%;
  --elyra-hotspot-accent: var(--color-foreground, var(--wd-primary-color, #1e6d45));
  --elyra-hotspot-heading: var(--color-foreground-heading, var(--wd-title-color, #202124));
  --elyra-hotspot-card-bg: #fff;
  --elyra-hotspot-card-border: rgba(0,0,0,.08);
  position:absolute;
  left:var(--elyra-hotspot-x);
  top:var(--elyra-hotspot-y);
  transform:translate(-50%,-50%);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none!important;
  color:inherit;
  pointer-events:auto;
  z-index:2;
  outline:none;
}
.elyra-hotspot-marker{
  width:var(--elyra-hotspot-size,52px);
  height:var(--elyra-hotspot-size,52px);
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  box-sizing:border-box;
  border:var(--elyra-hotspot-border-width,2px) solid var(--elyra-hotspot-border,#000);
  border-radius:var(--elyra-hotspot-radius,50%);
  background:var(--elyra-hotspot-bg,#fff);
  transition:transform .22s ease,background-color .22s ease,border-color .22s ease,box-shadow .22s ease;
  line-height:1;
  z-index:3;
}
.elyra-hotspot-symbol{
  display:block;
  color:var(--elyra-hotspot-symbol,#000);
  font-size:var(--elyra-hotspot-symbol-size,34px);
  font-family:Arial,Helvetica,sans-serif;
  font-weight:300;
  line-height:.75;
  transform:translateY(-1px);
  transition:color .22s ease,transform .22s ease;
}
.elyra-hotspot:hover .elyra-hotspot-marker,
.elyra-hotspot:focus .elyra-hotspot-marker,
.elyra-hotspot:focus-within .elyra-hotspot-marker{
  transform:scale(1.05);
  background-color:var(--elyra-hotspot-hover-bg,var(--elyra-hotspot-bg,#fff));
  border-color:var(--elyra-hotspot-hover-border,var(--elyra-hotspot-border,#000));
}
.elyra-hotspot:hover .elyra-hotspot-symbol,
.elyra-hotspot:focus .elyra-hotspot-symbol,
.elyra-hotspot:focus-within .elyra-hotspot-symbol{
  color:var(--elyra-hotspot-hover-symbol,var(--elyra-hotspot-symbol,#000));
  transform:translateY(-1px);
}
.elyra-hotspot--pulse .elyra-hotspot-marker:after{
  content:"";
  position:absolute;
  inset:0;
  border:1px solid currentColor;
  border-radius:inherit;
  opacity:.45;
  animation:elyra-hotspot-pulse 2s ease-out infinite;
  pointer-events:none;
}
@keyframes elyra-hotspot-pulse{
  0%{transform:scale(.9);opacity:.45}
  75%,100%{transform:scale(1.55);opacity:0}
}

/* Tooltip card like the reference hover card */
.elyra-hotspot-tooltip{
  position:absolute;
  left:50%;
  top:calc(100% - 10px);
  bottom:auto;
  transform:translate(-50%,8px);
  min-width:250px;
  max-width:340px;
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:18px;
  border-radius:18px;
  border:1px solid var(--elyra-hotspot-card-border);
  background:var(--elyra-hotspot-card-bg);
  box-shadow:0 10px 28px rgba(0,0,0,.12);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .2s ease,transform .2s ease,visibility .2s ease;
  z-index:20;
  text-align:left;
  line-height:1.3;
  color:var(--elyra-hotspot-heading);
  font-family:inherit;
}
.elyra-hotspot-tooltip:after{
  content:none;
}
.elyra-hotspot:hover .elyra-hotspot-tooltip,
.elyra-hotspot:focus .elyra-hotspot-tooltip,
.elyra-hotspot:focus-within .elyra-hotspot-tooltip{
  opacity:1;
  visibility:visible;
  transform:translate(-50%,0);
}
.elyra-hotspot-tooltip-top{
  display:grid;
  grid-template-columns:62px minmax(0,1fr);
  align-items:center;
  gap:14px;
}
.elyra-hotspot-tooltip-image{
  width:62px!important;
  height:84px!important;
  flex:0 0 62px;
  object-fit:cover;
  border-radius:8px;
  overflow:hidden;
}
.elyra-hotspot-tooltip-copy{
  display:flex;
  flex-direction:column;
  gap:8px;
  min-width:0;
}
.elyra-hotspot-tooltip-title,
.elyra-hotspot-tooltip-copy strong{
  color:var(--elyra-hotspot-accent);
  font-family:inherit;
  font-size:clamp(18px,1.2vw,21px);
  line-height:1.2;
  font-weight:700;
  letter-spacing:0;
  margin:0;
  display:block;
}
.elyra-hotspot-tooltip-price{
  font-size:clamp(18px,1.15vw,20px);
  line-height:1.1;
  color:var(--elyra-hotspot-heading);
  font-weight:700;
  opacity:1;
}
.elyra-hotspot-tooltip-price .amount,
.elyra-hotspot-tooltip-price bdi,
.elyra-hotspot-tooltip-price ins,
.elyra-hotspot-tooltip-price del{
  color:inherit;
  font-weight:inherit;
}
.elyra-hotspot-tooltip-price del{
  opacity:.55;
  margin-inline-end:6px;
}
.elyra-hotspot-tooltip-price ins{
  text-decoration:none;
}
.elyra-hotspot-tooltip-divider{
  display:block;
  width:100%;
  height:1px;
  background:rgba(0,0,0,.12);
}
.elyra-hotspot-tooltip-cta{
  display:block;
  color:var(--elyra-hotspot-accent);
  font-family:inherit;
  font-size:clamp(16px,1vw,18px);
  line-height:1.15;
  font-weight:700;
}

/* Overlay mode: the widget covers exactly the Elementor parent section/container. */
.elyra-hotspot-host{
  position:relative!important;
}
.elementor-widget-elyra_product_hotspots:has(.elyra-hotspot-canvas--overlay),
.elementor-widget-elyra_product_hotspots.elyra-hotspot-widget--overlay{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  margin:0!important;
  padding:0!important;
  z-index:12!important;
  pointer-events:none!important;
}
.elementor-widget-elyra_product_hotspots:has(.elyra-hotspot-canvas--overlay) > .elementor-widget-container,
.elementor-widget-elyra_product_hotspots.elyra-hotspot-widget--overlay > .elementor-widget-container,
.elementor-widget-elyra_product_hotspots:has(.elyra-hotspot-canvas--overlay) .elyra-hotspot-canvas--overlay,
.elementor-widget-elyra_product_hotspots.elyra-hotspot-widget--overlay .elyra-hotspot-canvas--overlay{
  width:100%;
  height:100%;
  min-height:100%;
  pointer-events:none;
}
.elementor-widget-elyra_product_hotspots.elyra-hotspot-widget--overlay .elyra-hotspot{
  pointer-events:auto;
}
.elyra-hotspot-editor-label{display:none}
.elementor-editor-active .elyra-hotspot-editor-label{
  display:block;
  position:absolute;
  left:10px;
  bottom:10px;
  padding:5px 9px;
  border-radius:4px;
  background:rgba(0,0,0,.72);
  color:#fff;
  font:11px/1.2 Arial,sans-serif;
  pointer-events:none;
}
.elementor-editor-active .elementor-widget-elyra_product_hotspots:has(.elyra-hotspot-canvas--overlay),
.elementor-editor-active .elementor-widget-elyra_product_hotspots.elyra-hotspot-widget--overlay{
  outline:1px dashed rgba(0,0,0,.25);
}
@media(max-width:767px){
  .elyra-hotspot--hide-mobile{display:none!important}
  .elyra-hotspot-tooltip{
    min-width:210px;
    max-width:270px;
    gap:10px;
    padding:14px;
  }
  .elyra-hotspot-tooltip-top{
    grid-template-columns:54px minmax(0,1fr);
    gap:12px;
  }
  .elyra-hotspot-tooltip-image{
    width:54px!important;
    height:72px!important;
    flex-basis:54px;
  }
  .elyra-hotspot-tooltip-title,
  .elyra-hotspot-tooltip-copy strong{font-size:16px}
  .elyra-hotspot-tooltip-price{font-size:17px}
  .elyra-hotspot-tooltip-cta{font-size:15px}
}
@media(prefers-reduced-motion:reduce){
  .elyra-hotspot--pulse .elyra-hotspot-marker:after{animation:none}
  .elyra-hotspot-marker,.elyra-hotspot-symbol,.elyra-hotspot-tooltip{transition:none}
}