/* Transparent product renderings. All colors inherit the existing brand tokens. */
:root {
  --product-shadow: drop-shadow(0 5px 4px rgba(13, 22, 38, .18)) drop-shadow(0 18px 12px rgba(13, 22, 38, .18));
  --product-shadow-hero: drop-shadow(0 8px 6px rgba(13, 22, 38, .20)) drop-shadow(0 30px 20px rgba(13, 22, 38, .24));
  --product-shadow-hover: drop-shadow(0 8px 6px rgba(13, 22, 38, .18)) drop-shadow(0 26px 16px rgba(13, 22, 38, .24));
}
.cutout-stage {
  position: relative;
  display: grid;
  place-items: center;
  isolation: isolate;
  perspective: 1000px;
}
.cutout-stage img {
  position: relative;
  z-index: 1;
  object-fit: contain;
  filter: var(--product-shadow-hero);
}
.hero--botanical .hero-photo { align-self: center; }
.hero--botanical .hero-photo .cutout-stage { min-height: 480px; padding: 24px 0; }
.hero--botanical .hero-photo .cutout-stage img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 560px;
  object-fit: contain;
  object-position: center;
  aspect-ratio: auto;
  border-radius: 0;
}
.hero-photo .cutout-stage::before,
.hero-photo .cutout-stage::after {
  content: '';
  position: absolute;
  width: 88%;
  aspect-ratio: 1;
  border: 1px solid var(--stone);
  border-radius: 50%;
  z-index: -1;
}
.hero-photo .cutout-stage::before { transform: rotateX(65deg) rotateZ(-18deg); }
.hero-photo .cutout-stage::after { width: 70%; transform: rotateX(65deg) rotateZ(18deg); }
.hero-photo figcaption { max-width: 52ch; margin: 24px auto 0; }
.motion-toggle {
  display: block;
  margin: 12px auto 0;
  min-height: 44px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--stone);
  color: var(--muted);
  font: 400 13px var(--sans);
  cursor: pointer;
}
.feature-art { background: transparent; }
.feature-art img { filter: var(--product-shadow); max-width: 400px; max-height: 500px; object-fit: contain; border-radius: 0; }
.card-img { background: transparent; overflow: visible; }
.card-img img { padding: 12px; border-radius: 0; filter: var(--product-shadow); }
.product-gallery.cutout-gallery { background: transparent; padding-top: 32px; }
/* Each gallery view uses the transparent sheet with its own measured crop window. */
.bottle-window.cutout-bottle {
  width: var(--window-width);
  height: var(--window-height);
  max-width: none;
  background: transparent;
  overflow: visible;
  border-radius: 0;
  filter: var(--product-shadow);
}
.cutout-bottle .bottle-clip { width: 100%; height: 100%; position: relative; overflow: hidden; }
.bottle-window.cutout-bottle img {
  position: absolute;
  width: var(--sheet-width);
  height: var(--sheet-height);
  left: var(--sheet-left);
  top: var(--sheet-top);
  max-width: none;
  border-radius: 0;
}
.product-gallery > .cutout-stage img { max-height: 440px; width: 100%; object-fit: contain; border-radius: 0; }
.product-gallery .selected-size { margin-top: 32px; }
.cutout-lineup { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 24px; align-items: end; }
.cutout-lineup img { height: 240px; width: 100%; object-fit: contain; border-radius: 0; filter: var(--product-shadow); }
.cutout-lineup figcaption { grid-column: 1 / -1; }
@media (prefers-reduced-motion: no-preference) {
  .hero-photo .cutout-stage img { animation: bio3-float 6s ease-in-out infinite; }
  .hero-photo .cutout-stage::before { animation: bio3-orbit 18s linear infinite; }
  .hero-photo .cutout-stage::after { animation: bio3-orbit 24s linear infinite reverse; }
  .card-img img { transition: transform .45s ease, filter .45s ease; }
  .product-card a:hover .card-img img,
  .product-card a:focus-visible .card-img img { transform: translateY(-10px) rotate(-2deg) scale(1.035); filter: var(--product-shadow-hover); }
  .cutout-bottle:not([hidden]) { animation: bio3-bottle-in .55s cubic-bezier(.2,.65,.25,1) both; }
  .cutout-stage[data-tilt] { transition: transform .4s ease; transform: rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)); }
  .animate-entry { animation: bio3-reveal .65s cubic-bezier(.2,.65,.25,1) both; }
  .product-card:nth-child(2) { animation-delay: .08s; }
  .product-card:nth-child(3) { animation-delay: .16s; }
  .product-card:nth-child(4) { animation-delay: .24s; }
}
@keyframes bio3-float {
  0%,100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-14px) rotate(1deg); }
}
@keyframes bio3-orbit {
  from { transform: rotateX(65deg) rotateZ(0deg); }
  to { transform: rotateX(65deg) rotateZ(360deg); }
}
@keyframes bio3-bottle-in {
  from { opacity: .4; transform: translateY(16px) rotate(-4deg) scale(.96); }
  to { opacity: 1; transform: translateY(0) rotate(0) scale(1); }
}
@keyframes bio3-reveal {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}
.motion-paused .hero-photo .cutout-stage img,
.motion-paused .hero-photo .cutout-stage::before,
.motion-paused .hero-photo .cutout-stage::after { animation-play-state: paused; }
@media (max-width: 860px) {
  .hero--botanical .hero-photo .cutout-stage { min-height: 320px; }
  .hero--botanical .hero-photo .cutout-stage img { max-height: 420px; }
  .cutout-lineup { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .cutout-lineup img { height: 220px; }
}
@media (prefers-reduced-motion: reduce) {
  .motion-toggle { display: none; }
  .cutout-stage, .cutout-stage img, .cutout-stage::before, .cutout-stage::after,
  .cutout-bottle, .animate-entry { animation: none !important; transition: none !important; transform: none !important; }
}
.gallery-display { display:flex; justify-content:center; align-items:flex-end; height:440px; }