/* Flacon product art — replaces the bundle's flat clip-path silhouettes
 * (span.hb-flacon-bottle, tinted via --fc) with Gemini-generated product
 * photography in /flacons/. Series: one crystal flacon, dark greenhouse
 * light, liquid + extinct flower per specimen. Loaded after the bundle CSS,
 * so plain overrides win without touching the minified app. */

.hb-flacon-bottle {
  clip-path: none !important;
  width: clamp(92px, 11vw, 148px) !important;
  height: auto !important;
  aspect-ratio: 4 / 5;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  border-radius: 10px;
  /* keep each specimen's hue as a rim tint, like the rest of the site */
  border: 1px solid color-mix(in srgb, var(--fc, #fff) 45%, rgba(255, 255, 255, 0.12));
  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.55),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.hb-flacon:hover .hb-flacon-bottle,
.hb-flacon:focus-visible .hb-flacon-bottle {
  transform: translateY(-4px);
  box-shadow:
    0 22px 44px rgba(0, 0, 0, 0.65),
    0 0 24px color-mix(in srgb, var(--fc, #fff) 35%, transparent),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.hb-flacon:nth-of-type(1) .hb-flacon-bottle { background-image: url("/flacons/01-gibraltar-campion.jpg"); }
.hb-flacon:nth-of-type(2) .hb-flacon-bottle { background-image: url("/flacons/02-franklin-tree.jpg"); }
.hb-flacon:nth-of-type(3) .hb-flacon-bottle { background-image: url("/flacons/03-chocolate-cosmos.jpg"); }
.hb-flacon:nth-of-type(4) .hb-flacon-bottle { background-image: url("/flacons/04-woods-hau-kuahiwi.jpg"); }
.hb-flacon:nth-of-type(5) .hb-flacon-bottle { background-image: url("/flacons/05-eggers-coral-tree.jpg"); }