/* Product pages (/products/<slug>) = the /spectrum-6040c master template
   (Elementor 818, spectrum-6040c.css) with each product's content
   (prisma/productTemplate.ts). This file is loaded only on product routes, on
   top of the master CSS, and holds the one content-driven adjustment the
   template needs: the hero photo.

   Hero structure (master): row 818ad0a = title column (9cfcb7d, 59.123%);
   row 785c21e = tagline column (82dd8a6, 49%) + photo column (4f8577b) pulled
   up 180px so the photo rises beside the title. The master photo is a
   transparent cut-out (1015x1000 with empty space around the machine) whose
   widget bleeds a further -84px/-103px over the title column; product photos
   are opaque studio shots on white, so under that bleed they sit on top of the
   product name. The template marks the photo column with .vmi-hero-photo and
   this keeps the master's pull-up but sizes the column to the 40.877% the
   title column leaves free and drops the widget bleed - the photo stays at
   the right, beside the name, never over it. The master page has no such
   class and keeps its bleed. */
.elementor-818 .elementor-element.elementor-element-4f8577b.vmi-hero-photo {
  --width: 40.877%;
  width: 40.877%;
  flex: 0 0 40.877%;
  margin-left: auto;
  --align-self: flex-start;
  align-self: flex-start;
  --justify-content: flex-end;
  --padding-top: 0px;
  --padding-bottom: 0px;
  --padding-left: 0px;
  --padding-right: 0px;
}
.elementor-818 .elementor-element.elementor-element-4f8577b.vmi-hero-photo > .elementor-widget-image > .elementor-widget-container {
  margin: 0;
}
.elementor-818 .elementor-element.elementor-element-4f8577b.vmi-hero-photo img {
  width: 100%;
  max-height: 520px;
  object-fit: contain;
  object-position: right top;
  display: block;
}

/* Tablet/phone: the master's own responsive tier stacks the hero rows and
   mobile-fixes.css (<=767px) resets the pull-up and bleed for 818; the photo
   column just takes the full width there. */
@media (max-width: 1024px) {
  .elementor-818 .elementor-element.elementor-element-4f8577b.vmi-hero-photo {
    --width: 100%;
    width: 100%;
    flex: 1 1 100%;
    margin-left: 0;
    margin-top: 32px;
    --margin-top: 32px;
  }
  .elementor-818 .elementor-element.elementor-element-4f8577b.vmi-hero-photo img {
    max-height: 60vh;
    object-position: center;
  }
}