/* Photo mask and artwork geometry from the approved trophy visual, expressed once. */
#ppr-ribbon-designer.ppr-trophy-preview::before {
  display: none;
}
#ppr-ribbon-designer.ppr-trophy-preview .ppr-designer-stage {
  display: block;
  min-height: 0;
  padding: 0;
  background: #f5f5f5;
  overflow: hidden;
  /* The photo carries its own lighting; no ribbon cast shadow here. */
  filter: none;
  box-shadow:
    inset 0 1px 0 #e6dcc6,
    inset 0 -1px 0 #e6dcc6;
}
.ppr-trophy-preview .ppr-preview-ribbon {
  display: none !important;
}
.ppr-trophy-scene {
  position: relative;
  width: 100%;
  aspect-ratio: 1140/794;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  overflow: hidden;
  isolation: isolate;
  /* Lets the tail perspective below scale with the photo. */
  container-type: inline-size;
}
/*
 * The photo's own folds and highlights, laid back over the tails so printed wording and
 * logos bend and shade with the fabric. It is the same photo, cut to the ribbon mask.
 */
.ppr-trophy-scene::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background-image: inherit;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  -webkit-mask: url(images/trophy-ribbon-mask.png) center / 100% 100% no-repeat;
  mask: url(images/trophy-ribbon-mask.png) center / 100% 100% no-repeat;
  /* Only the shading is wanted: flat cloth goes to white, folds stay grey. */
  filter: grayscale(1) brightness(1.18) contrast(1.25);
  mix-blend-mode: multiply;
  opacity: 0.6;
}
/* Soft vignette over the photo. */
.ppr-trophy-scene::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 70px rgba(15, 39, 68, 0.1);
}
.ppr-trophy-photo-tint {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(
      90deg,
      #ffffff70 0%,
      #ffffff38 10%,
      #ffffff0d 26%,
      #00000014 58%,
      #ffffff26 84%,
      #ffffff47
    ),
    linear-gradient(180deg, #ffffff1f, #ffffff00 16%, #0000000a),
    var(--ppr-ribbon-colour, #fff);
  background-blend-mode: soft-light, multiply, normal;
  opacity: 0.89;
  mix-blend-mode: multiply;
  filter: saturate(1.08) contrast(1.04) brightness(0.96);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 100% 100%;
}
.ppr-trophy-scene[style*="#ffffff"] .ppr-trophy-photo-tint,
.ppr-trophy-scene[style*="#FFFFFF"] .ppr-trophy-photo-tint {
  opacity: 0.03;
}
.ppr-trophy-tail {
  position: absolute;
  top: 9.8%;
  height: 84%;
  background: transparent;
  overflow: visible;
  z-index: 2;
}
/*
 * Each tail is centred on the hanging ribbon in the photo, measured from the ribbon mask:
 * the cloth leans outward about 3 degrees and widens by about a third from the handle
 * to the hem.
 */
.ppr-trophy-mode-single .ppr-trophy-tail {
  width: 10.2%;
}
.ppr-trophy-mode-single .ppr-trophy-tail-left {
  left: 24.1%;
  transform: translateX(-9.4%) rotate(3deg);
}
.ppr-trophy-mode-single .ppr-trophy-tail-right {
  right: 24.1%;
  transform: translateX(9.4%) rotate(-3deg);
}
.ppr-trophy-mode-full .ppr-trophy-tail {
  width: 8.6%;
}
.ppr-trophy-mode-full .ppr-trophy-tail-left {
  left: 24.6%;
  transform: translateX(-7.8%) rotate(3deg);
}
.ppr-trophy-mode-full .ppr-trophy-tail-right {
  right: 24.6%;
  transform: translateX(7.8%) rotate(-3deg);
}
.ppr-trophy-tail-art {
  position: absolute;
  left: 50%;
  top: 50%;
  /*
   * Turned to run down the tail, then tipped back in perspective so the print widens
   * with the cloth: 31% wider at the hem than at the top. The lift re-centres it after
   * the tilt pushes it down.
   */
  transform: translate(-50%, -50%) translateY(-2.7cqw) perspective(53.6cqw) rotateX(20deg)
    rotate(90deg);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
  z-index: 3;
}
/*
 * Bends the print to follow the cloth in the photo: near-straight along the inner edge,
 * sweeping out with the hem. The filters are printed in the page footer; without them
 * the print stays straight.
 */
.ppr-trophy-tail-left .ppr-trophy-tail-art {
  /* The left tail reads up from the hem, mirroring the right. */
  transform: translate(-50%, -50%) translateY(-2.7cqw) perspective(53.6cqw) rotateX(20deg)
    rotate(-90deg);
  filter: url(#ppr-bow-left);
}
.ppr-trophy-tail-right .ppr-trophy-tail-art {
  filter: url(#ppr-bow-right);
}
.ppr-trophy-mode-single .ppr-trophy-tail-art {
  width: 440%;
}
.ppr-trophy-mode-full .ppr-trophy-tail-art {
  width: 296%;
}
.ppr-trophy-tail-art img {
  display: none;
  object-fit: contain;
  max-height: 84%;
  max-width: 72%;
}
.ppr-trophy-mode-full .ppr-trophy-tail-art img {
  max-height: 78%;
  max-width: 68%;
}
.ppr-trophy-tail-text {
  font-family: Arial, sans-serif;
  line-height: 1;
  max-width: 82%;
  /*
   * The script shrinks the wording until it fits to the whole pixel, which can leave a
   * fraction of a pixel over; an ellipsis would then cut a word that fits. Clip only
   * real overflow, with room for script flourishes that reach past their letters.
   */
  overflow: clip;
  overflow-clip-margin: 0.15em;
  text-overflow: clip;
}
/* Long wording that would print too small on one line is set over balanced lines instead. */
.ppr-trophy-tail-text-wrap {
  white-space: normal;
  text-wrap: balance;
  text-align: center;
  line-height: 1.04;
}
/* Wording too long to show in full at this size ends with an ellipsis, and the stage says so. */
.ppr-trophy-tail-text-cut {
  text-overflow: ellipsis;
}
.ppr-trophy-preview .ppr-designer-stage:has(.ppr-trophy-tail-text-cut)::after {
  content: "Shortened to fit this preview \2014  your full wording goes on your proof";
  position: absolute;
  left: 50%;
  bottom: 10px;
  z-index: 6;
  max-width: calc(100% - 20px);
  transform: translateX(-50%);
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(15, 39, 68, 0.86);
  color: #fff;
  font: 600 11px/1.3 system-ui, -apple-system, "Segoe UI", sans-serif;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}
@container (max-width: 420px) {
  .ppr-trophy-preview .ppr-designer-stage:has(.ppr-trophy-tail-text-cut)::after {
    content: "Shortened to fit \2014  full wording on your proof";
    bottom: 6px;
    font-size: 10px;
  }
}
@container (max-width: 300px) {
  .ppr-trophy-preview .ppr-designer-stage:has(.ppr-trophy-tail-text-cut)::after {
    content: "Shortened to fit this preview";
  }
}
.ppr-trophy-tail-text {
  text-shadow: 0 0 0.6px currentColor;
}
.ppr-trophy-has-logo.ppr-trophy-has-text .ppr-trophy-tail-art img {
  max-width: 45%;
}
.ppr-trophy-has-logo.ppr-trophy-has-text .ppr-trophy-tail-text {
  max-width: 48%;
}
.ppr-trophy-brand-logo {
  position: absolute;
  left: 50%;
  top: 82.15%;
  width: 12.2%;
  height: auto;
  max-height: 7%;
  object-fit: contain;
  transform: translate(-50%, -50%);
  z-index: 4;
  pointer-events: none;
  filter: contrast(1.18) saturate(1.1) drop-shadow(0 1px 0 #ffffff80);
}
.ppr-trophy-under-gallery {
  width: 100%;
  clear: both;
  margin: 20px 0 0 !important;
}
.ppr-trophy-under-gallery-fallback {
  float: left;
  width: 48%;
  clear: left;
}
@media (max-width: 849px) {
  .ppr-trophy-under-gallery-fallback {
    float: none;
    width: 100%;
    clear: both;
  }
}
/* Docked at the foot of a phone screen, the trophy keeps to a size that leaves room to work. */
@media (max-width: 849px) {
  #ppr-ribbon-designer.ppr-trophy-preview:not([class*="-under-gallery"]) .ppr-trophy-scene {
    width: min(100%, 240px, 32vh);
    margin: 0 auto;
  }
  #ppr-ribbon-designer.ppr-trophy-preview:not([class*="-under-gallery"]) .ppr-designer-stage {
    background: #ebebea;
  }
}
@media (max-width: 600px) {
  .ppr-trophy-brand-logo {
    width: 19.2%;
  }
  .ppr-trophy-tail-art {
    gap: 4px;
  }
}