.case-image.cms-image {
  background: #e8efe5;
}

.case-image.cms-image > img {
  width: 100%;
  height: 100%;
  min-height: inherit;
  object-fit: cover;
}

.cms-video-button {
  position: absolute;
  z-index: 8;
  inset: 0;
  width: 100%;
  border: 0;
  color: transparent;
  background: transparent;
  cursor: pointer;
}

.cms-video-dialog {
  width: min(480px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 22px;
  color: #fff;
  background: #0f1711;
  box-shadow: 0 30px 100px rgba(0, 0, 0, .45);
}

.cms-video-dialog::backdrop {
  background: rgba(5, 12, 7, .82);
  backdrop-filter: blur(6px);
}

.cms-video-dialog video {
  display: block;
  width: 100%;
  max-height: calc(100vh - 100px);
  aspect-ratio: 9 / 16;
  object-fit: contain;
  background: #000;
}

.cms-video-dialog button {
  position: absolute;
  z-index: 3;
  top: 12px;
  right: 12px;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 50%;
  color: #fff;
  background: rgba(0,0,0,.55);
  font-size: 22px;
  cursor: pointer;
}

.contact-form.is-submitting {
  opacity: .78;
  pointer-events: none;
}

.contact-form .form-note.is-error { color: #bb2739; }
.contact-form .form-note.is-success { color: #28763c; }

.cms-offline-note {
  display: none;
}

/* Case category chips stay at the upper-left; the brand mascot is anchored
   independently at the lower-left so the two labels never overlap. */
.case-image.brand-photo::after,
.detail-card-visual.brand-photo::after {
  top: auto !important;
  right: auto !important;
  bottom: 10px !important;
  left: 14px !important;
}

.case-image .demo-label {
  z-index: 7;
  top: 14px;
  left: 14px;
}

/* Desktop home cards use a dedicated showcase stage. This keeps the full
   bag and bucket visible instead of letting the body crop their lower half. */
@media (min-width: 901px) {
  #products .product-card {
    display: grid;
    grid-template-rows: 420px minmax(0, 1fr);
  }

  #products .product-visual.product-real {
    height: 420px;
    padding: 30px 42px 24px;
    background:
      radial-gradient(circle at 74% 20%, rgba(128, 199, 77, .14), transparent 36%),
      linear-gradient(145deg, #fbfdf8, #eef6e9);
    border-bottom: 1px solid #e3ebdf;
  }

  #products .product-visual.product-real > img {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    padding: 0;
    object-fit: contain !important;
    object-position: center !important;
    background: transparent;
    filter: drop-shadow(0 18px 22px rgba(41, 66, 34, .13));
  }

  #products .product-index {
    z-index: 5;
    top: 20px;
    left: 22px;
  }

  #products .product-body {
    position: relative;
    z-index: 3;
  }
}
.photo-detail-link {
  min-width: 0;
  display: block;
  color: inherit;
  text-decoration: none;
}

.photo-detail-link.wide { grid-column: span 2; }
.photo-detail-link .photo-tile { height: 100%; }
.photo-detail-link:hover .photo-tile { transform: translateY(-3px); }

@media (max-width: 760px) {
  .photo-detail-link.wide { grid-column: auto; }
}