/* The catalogue uses a separate, transparent signature. Product photos stay reusable. */
:root {
  --catalogue-signature: url("assets/all-saints-logo-header.svg");
  --catalogue-festive-stage: url("assets/photos-20261109/studio-festive.jpg");
  --catalogue-counter-stage: url("assets/photos-20261109/studio-counter.jpg");
  --catalogue-patisserie-stage: url("assets/photos-20261109/studio-patisserie.jpg");
}

:is(.product-visual, .store-visual, .store-dialog-image, .product-detail-image) {
  --catalogue-stage-image: var(--catalogue-festive-stage);
  --catalogue-photo-stage: linear-gradient(146deg, #fffaf3c4, #fbf0e15c),
    var(--catalogue-stage-image) center / cover no-repeat #f8eddd;
}

:is(.store-visual, .store-dialog-image) {
  --catalogue-stage-image: var(--catalogue-counter-stage);
}

.store-card:is([data-category="cakes"], [data-category="pastries"], [data-category="doughnuts"], [data-category="sweet treats"], [data-category="tea cake loaves"]) .store-visual,
.store-dialog-image[data-photo-studio="patisserie"] {
  --catalogue-stage-image: var(--catalogue-patisserie-stage);
}

[data-seasonal-card="matured-plum-cake"] .product-visual,
.product-detail-image[data-photo-treatment="original"] {
  --catalogue-photo-stage: #fffaf4;
}

:is(.product-visual, .store-visual, .store-dialog-image):has(> img.catalogue-photo) {
  --catalogue-signature-strip: 26px;
  position: relative;
  background: var(--catalogue-photo-stage);
}

:is(.product-visual, .store-visual, .store-dialog-image):has(> img.catalogue-photo) > img.catalogue-photo {
  display: block;
  height: calc(100% - var(--catalogue-signature-strip));
  padding: clamp(7px, 2.4%, 18px);
  object-fit: contain;
  background: transparent;
}

:is(.product-visual, .store-visual, .store-dialog-image):has(> img.catalogue-photo)::after,
.catalogue-image-signature {
  content: "";
  display: block;
  width: min(88px, 46%);
  height: 16px;
  opacity: .72;
  background: var(--catalogue-signature) center / contain no-repeat;
  pointer-events: none;
}

:is(.product-visual, .store-visual, .store-dialog-image):has(> img.catalogue-photo)::after {
  position: absolute;
  left: 50%;
  bottom: 6px;
  transform: translateX(-50%);
}

:is(.product-visual, .store-visual):has(> img.catalogue-photo) > .round-arrow {
  bottom: calc(8px + var(--catalogue-signature-strip));
}

.catalogue-image-signature {
  margin: 8px auto 0;
}

.product-detail-image > img.catalogue-photo {
  background: var(--catalogue-photo-stage);
}

.product-detail-image > img.catalogue-photo[src$="/iced-plum-detail.jpg"] {
  object-fit: cover;
  object-position: center 72%;
}

.product-detail-image[data-photo-view="boxed"] > img.catalogue-photo {
  background: #fffaf4;
}

.product-detail-image .cake-gallery.cake-gallery--pair {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 320px;
  margin-inline: auto;
}

.cake-gallery--pair button {
  min-height: 48px;
  color: var(--ink);
}

.cake-gallery--pair[hidden] {
  display: none;
}

.pack-visual-photo {
  flex: 0 0 auto;
}

.pack-visual-photo img {
  display: block;
}

.pack-visual-photo .catalogue-image-signature,
.cart-item-image .catalogue-image-signature {
  width: 56px;
  max-width: 84%;
  height: 11px;
  margin-top: 4px;
}

@media (max-width: 600px) {
  :is(.product-visual, .store-visual, .store-dialog-image):has(> img.catalogue-photo) {
    --catalogue-signature-strip: 22px;
  }

  :is(.product-visual, .store-visual, .store-dialog-image):has(> img.catalogue-photo)::after {
    bottom: 4px;
  }
}