/* --- THE STAGE --- */
.interactive-product-stage {
  position: relative;
  width: 100%;
  max-width: 1200px; /* Adjust this to match your desired max width */
  margin: 0 auto; /* Centers the stage on the page */
  margin-bottom: 100px;
  margin-top: 100px;
}

.base-image {
  width: 100%;
  height: auto;
  display: block; /* Removes weird spacing under images */
}

/* --- THE NODES (CIRCLES) --- */
.product-node {
  position: absolute;
  /* translate(-50%, -50%) forces the center of the circle to sit exactly on your percentage coordinates, making placement much easier! */
  transform: translate(-50%, -50%); 
  z-index: 10; /* Ensures circles stay on top of the base image */
}

.product-node a {
  display: block;
  position: relative;
  text-decoration: none;
}

/* The circular thumbnail image */
.product-node img {
  width: 90px; /* Size of the circle */
  height: 90px;
  border-radius: 50%; /* Makes it a perfect circle */
  object-fit: cover; /* Ensures the image fills the circle without squishing */
  border: 4px solid #ffffff; /* Nice white border like your mockup */
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth animation setup */
}

/* The Hover Effect for the circle */
.product-node a:hover img {
  transform: scale(1.1); /* Slightly enlarges the circle on hover */
  box-shadow: 0 8px 16px rgba(0,0,0,0.3);
}

/* --- THE TOOLTIP LABEL --- */
.node-label {
  position: absolute;
  top: 100px; /* Pushes the label just below the circle */
  left: 50%;
  transform: translateX(-50%); /* Centers the label below the circle */
  background: rgba(255, 255, 255, 0.95);
  padding: 6px 12px;
  border-radius: 4px;
  color: #333;
  font-family: sans-serif;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap; /* Prevents text from wrapping */
  box-shadow: 0 2px 5px rgba(0,0,0,0.15);
  
  /* Hide the label by default */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Show the label when the circle is hovered */
.product-node a:hover .node-label {
  opacity: 1;
  visibility: visible;
}

/* =========================================
   RESPONSIVE LAYOUT RULES (The 4-Tier System)
   ========================================= */

/* --- TIER 2: Small Desktop (1001px to 1350px) --- */
/* Keeps the scattered look, but scales the whole map down by 30% to fit */
@media (max-width: 1350px) and (min-width: 1001px) {
  .product-node {
    transform: translate(-50%, -50%) scale(0.7); 
  }
  .stage-category-title {
    font-size: 18px; 
  }
}

/* --- TIER 3: Tablets (601px to 1000px) --- */
/* The canvas is too small for scattering. We transform into a 2-column grid! */
@media (max-width: 1000px) {
  .interactive-product-stage {
    display: flex;
    flex-wrap: wrap; /* Allows the nodes to form rows */
    justify-content: center;
    gap: 30px;
  }
  
  .base-image {
    width: 100%;
    max-width: 600px; /* Keeps the main machine from getting too huge */
    margin-bottom: 20px;
  }

  .product-node img {
      width: 120px !important;  /* Overrides the HTML inline width */
      height: 120px !important; /* Overrides the HTML inline height */
    }

  /* Reset the nodes into grid items */
  .product-node {
    position: relative !important;
    top: auto !important; 
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    /* Create a 2-column layout: 50% width minus the gap */
    width: calc(50% - 30px); 
    align-items: center !important;
    text-align: center !important; 
    margin: 0 auto !important;
  }

  /* NEW: Use Flexbox on the link to force the image and text into a perfect vertical stack */
  .product-node a {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
  }
  
  /* Make the labels permanently visible text below the images */
  .node-label {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    display: block;
    margin-top: 15px;
    opacity: 1;
    visibility: visible;
    background: transparent;
    box-shadow: none;
    white-space: normal; /* Allows long text to wrap to a second line safely */
    text-align: center;
  }

  /* Hide the floating category titles as requested */
  .stage-category-title {
    display: none !important; 
  }
}

/* --- TIER 4: Mobile Phones (Max 600px) --- */
/* Transforms the 2-column tablet grid into a 1-column vertical list */
@media (max-width: 600px) {
  .product-node {
    width: 100%; /* Forces each item to take up the full row */
    max-width: 300px; /* Keeps images from stretching too wide on landscape phones */
  }
}

/* --- CATEGORY TITLES --- */
.stage-category-title {
  position: absolute;
  z-index: 5; /* Keeps it above the background, but below the hover tooltips (which are 10) */
  font-family: sans-serif; /* Change to match your site's heading font */
  font-size: 24px;
  font-weight: 700;
  color: #2c3e50; /* A nice dark slate gray. Change as needed! */
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin: 0;
  padding: 8px 16px;
  
  /* Optional: Adds a very subtle white glow behind the text to make it readable if it overlaps parts of the machine */
  text-shadow: 0px 0px 10px rgba(255,255,255,0.9), 0px 0px 20px rgba(255,255,255,0.9); 
}