/* The canonical ribbon preview styles; no stacked version overrides. */

/*
 * A compact card: a title row with a status pill, the ribbon on a full-bleed studio band,
 * then a one-line caption. Every child is placed on an explicit grid row because the
 * markup is built by script; the band is the card's ::before and the watermark its
 * ::after, both on row 3.
 */
#ppr-ribbon-designer {
  /* The shop's own navy and gold. */
  --ppr-navy: #152742;
  --ppr-gold: #c3a442;
  --ppr-gold-deep: #9a7f2b;
  --ppr-ink: #4a5666;
  --ppr-muted: #808894;
  --ppr-line: #ece6d9;
  --ppr-gutter: 22px;
  /* How far the folded tails reach out from behind the front band. */
  --ppr-tail: 58px;
  /* Ink masks: thread lines along the ribbon, and a fine fibre mottle. */
  --ppr-ink-weave: repeating-linear-gradient(180deg, #000 0 1px, rgba(0, 0, 0, 0.84) 1px 2px);
  --ppr-ink-mottle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75 1.6' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -0.5 0 0 0 1.32'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding: 0 0 16px;
  margin: 22px 0;
  box-sizing: border-box;
  font-family: inherit;
  max-width: 100%;
  background: #fff;
  border: 1px solid var(--ppr-line);
  border-radius: 16px;
  box-shadow:
    0 1px 1px rgba(21, 39, 66, 0.04),
    0 2px 6px -2px rgba(21, 39, 66, 0.06),
    0 20px 40px -26px rgba(21, 39, 66, 0.3);
  overflow: hidden;
  container-type: inline-size;
  -webkit-font-smoothing: antialiased;
}
/* Studio band: a warm sweep with a soft pool of light behind the ribbon. */
#ppr-ribbon-designer::before {
  content: "";
  grid-row: 3;
  grid-column: 1;
  background:
    radial-gradient(56% 64% at 50% 46%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0) 72%),
    radial-gradient(130% 90% at 50% 120%, rgba(150, 120, 60, 0.12), rgba(150, 120, 60, 0) 60%),
    repeating-linear-gradient(0deg, rgba(110, 90, 50, 0.022) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(110, 90, 50, 0.016) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #f7f3ea 0%, #efe8d9 100%);
  box-shadow:
    inset 0 1px 0 rgba(160, 135, 85, 0.16),
    inset 0 -1px 0 rgba(160, 135, 85, 0.16);
}
/*
 * "Preview" watermark, tiled faintly over the whole picture (band and ribbon alike) so no
 * part of the ribbon looks different from the rest. Only over a finished preview.
 */
#ppr-ribbon-designer::after {
  content: "";
  grid-row: 3;
  grid-column: 1;
  z-index: 2;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='180'%20height='96'%3E%3Cg%20font-family='Arial,Helvetica,sans-serif'%20font-size='9'%20font-weight='700'%20letter-spacing='2.4'%20text-anchor='middle'%3E%3Ctext%20x='45'%20y='31'%20fill='%23000'%20transform='rotate(-16%2045%2030)'%3EPREVIEW%3C/text%3E%3Ctext%20x='45'%20y='30'%20fill='%23fff'%20transform='rotate(-16%2045%2030)'%3EPREVIEW%3C/text%3E%3Ctext%20x='135'%20y='79'%20fill='%23000'%20transform='rotate(-16%20135%2078)'%3EPREVIEW%3C/text%3E%3Ctext%20x='135'%20y='78'%20fill='%23fff'%20transform='rotate(-16%20135%2078)'%3EPREVIEW%3C/text%3E%3C/g%3E%3C/svg%3E") 0 0 / 180px 96px repeat;
  opacity: 0.16;
}
#ppr-ribbon-designer:not([data-preview-state="ready"])::after {
  display: none;
}
#ppr-ribbon-designer *,
#ppr-ribbon-designer *::before,
#ppr-ribbon-designer *::after {
  box-sizing: border-box;
}
#ppr-ribbon-designer [hidden] {
  display: none !important;
}

/* ---------- Header ---------- */
.ppr-designer-heading {
  grid-row: 1;
  grid-column: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.25;
  color: var(--ppr-navy);
  text-align: left;
  margin: 0;
  padding: 14px var(--ppr-gutter) 13px;
}
/* Status pill with a light; it follows the preview state the script sets. */
.ppr-designer-heading::after {
  content: "Live";
  flex: none;
  margin-left: auto;
  padding: 5px 10px 5px 21px;
  border-radius: 999px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ppr-navy);
  background:
    radial-gradient(circle 3.5px at 11px 50%, #3aa76d 92%, transparent 100%) no-repeat,
    #f3efe6;
}
#ppr-ribbon-designer[data-preview-state="preparing"] .ppr-designer-heading::after {
  content: "Preparing";
  background-image: radial-gradient(circle 3.5px at 11px 50%, var(--ppr-gold) 92%, transparent 100%);
  animation: ppr-pulse 1.4s ease-in-out infinite;
}
#ppr-ribbon-designer[data-preview-state="waiting"] .ppr-designer-heading::after {
  content: "Waiting";
  color: var(--ppr-gold-deep);
  background-image: radial-gradient(circle 3.5px at 11px 50%, #d9c58a 92%, transparent 100%);
}
#ppr-ribbon-designer[data-preview-state="unavailable"] .ppr-designer-heading::after {
  content: "Paused";
  color: var(--ppr-muted);
  background-image: radial-gradient(circle 3.5px at 11px 50%, #b8bec6 92%, transparent 100%);
}
/* The title says it; the explainer line only took room from the ribbon. */
.ppr-designer-subheading {
  display: none;
}

/* ---------- Stage: a ribbon banner laid on the band ---------- */
.ppr-designer-stage {
  grid-row: 3;
  grid-column: 1;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 150px;
  /* Extra room below: the tails drop a quarter of the band height (up to 32px on a
     300mm ribbon) and cast their shadow beneath that. */
  padding: 22px calc(var(--ppr-gutter) + var(--ppr-tail)) 48px;
  background: transparent;
  /* One cast shadow for the band and both tails, following their cut outlines. */
  filter: drop-shadow(0 1px 0.5px rgba(40, 30, 10, 0.28))
    drop-shadow(0 8px 6px rgba(40, 30, 10, 0.16))
    drop-shadow(0 22px 18px rgba(40, 30, 10, 0.14));
}
/* The front band: the colour the script sets inline. Its satin lies over the print. */
.ppr-preview-ribbon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  background-color: #fff;
  transition:
    background-color 0.35s ease,
    color 0.35s ease;
}
/*
 * The two tails, folded back behind the band and dropped a little lower. They take the
 * band's colour through "inherit" and size themselves from its height, so a 7mm ribbon
 * gets slim tails and a 100mm one broad tails. The dark triangle at the inner end is
 * the fold.
 */
.ppr-preview-ribbon::before,
.ppr-preview-ribbon::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 26%;
  height: 100%;
  aspect-ratio: 1.15;
  max-width: calc(var(--ppr-tail) / 0.76);
  background-color: inherit;
  pointer-events: none;
  transition: background-color 0.35s ease;
}
.ppr-preview-ribbon::before {
  right: 100%;
  transform: translateX(24%);
  clip-path: polygon(0 0, 76% 0, 76% 74%, 100% 100%, 0 100%, 26% 50%);
  background-image:
    linear-gradient(90deg, transparent 76%, rgba(0, 0, 0, 0.4) 76%, rgba(0, 0, 0, 0.24)),
    linear-gradient(90deg, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.26) 74%),
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.4) 0 1px,
      rgba(0, 0, 0, 0.18) 1px 2px,
      rgba(255, 255, 255, 0.18) 2px 3px,
      transparent 3px calc(100% - 3px),
      rgba(0, 0, 0, 0.3) calc(100% - 2px)
    ),
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.08),
      rgba(255, 255, 255, 0.24) 30%,
      rgba(255, 255, 255, 0.04) 50%,
      rgba(0, 0, 0, 0.18)
    ),
    repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.045) 0 1px, rgba(0, 0, 0, 0.04) 1px 2px);
}
.ppr-preview-ribbon::after {
  left: 100%;
  transform: translateX(-24%);
  clip-path: polygon(24% 0, 100% 0, 74% 50%, 100% 100%, 0 100%, 24% 74%);
  background-image:
    linear-gradient(270deg, transparent 76%, rgba(0, 0, 0, 0.4) 76%, rgba(0, 0, 0, 0.24)),
    linear-gradient(270deg, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.26) 74%),
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.4) 0 1px,
      rgba(0, 0, 0, 0.18) 1px 2px,
      rgba(255, 255, 255, 0.18) 2px 3px,
      transparent 3px calc(100% - 3px),
      rgba(0, 0, 0, 0.3) calc(100% - 2px)
    ),
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.08),
      rgba(255, 255, 255, 0.24) 30%,
      rgba(255, 255, 255, 0.04) 50%,
      rgba(0, 0, 0, 0.18)
    ),
    repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.045) 0 1px, rgba(0, 0, 0, 0.04) 1px 2px);
}
.ppr-preview-artwork {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 90%;
  height: 100%;
  z-index: 1;
  min-width: 0;
}
/*
 * The satin lies over the band and the print alike, so the ink takes the same light as
 * the ribbon: woven selvedge, the lengthwise sheen, two drape ripples, thread grain and
 * the light falling off at each end where the ribbon turns back. The artwork box is 90%
 * of the band, so the overlay reaches out by 1/18 of it on each side.
 */
.ppr-preview-artwork::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  left: calc(100% / -18);
  right: calc(100% / -18);
  pointer-events: none;
  background-image:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.55) 0,
      rgba(255, 255, 255, 0.55) 1px,
      rgba(0, 0, 0, 0.2) 1px,
      rgba(0, 0, 0, 0.2) 2px,
      rgba(255, 255, 255, 0.14) 2px,
      rgba(255, 255, 255, 0) 5px,
      rgba(0, 0, 0, 0.14) 5px,
      rgba(0, 0, 0, 0.14) 6px,
      rgba(255, 255, 255, 0.2) 6px,
      rgba(255, 255, 255, 0.2) 7px,
      transparent 7px,
      transparent calc(100% - 7px),
      rgba(255, 255, 255, 0.2) calc(100% - 7px),
      rgba(255, 255, 255, 0.2) calc(100% - 6px),
      rgba(0, 0, 0, 0.14) calc(100% - 6px),
      rgba(0, 0, 0, 0.14) calc(100% - 5px),
      rgba(255, 255, 255, 0) calc(100% - 5px),
      rgba(0, 0, 0, 0.12) calc(100% - 2px),
      rgba(0, 0, 0, 0.3) calc(100% - 1px),
      rgba(0, 0, 0, 0.3)
    ),
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.1),
      rgba(255, 255, 255, 0) 14%,
      rgba(255, 255, 255, 0.34) 30%,
      rgba(255, 255, 255, 0.06) 48%,
      rgba(0, 0, 0, 0.04) 72%,
      rgba(0, 0, 0, 0.2)
    ),
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.13) 14%,
      transparent 30%,
      rgba(0, 0, 0, 0.09) 48%,
      transparent 64%,
      rgba(255, 255, 255, 0.15) 80%,
      transparent
    ),
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.07),
      transparent 25%,
      rgba(255, 255, 255, 0.12) 55%,
      transparent 80%,
      rgba(0, 0, 0, 0.07)
    ),
    repeating-linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.045) 0 1px,
      rgba(0, 0, 0, 0.04) 1px 2px
    ),
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.2),
      rgba(0, 0, 0, 0) 4%,
      rgba(0, 0, 0, 0) 96%,
      rgba(0, 0, 0, 0.2)
    );
  background-size:
    100% 100%,
    100% 100%,
    460px 100%,
    780px 100%,
    100% 100%,
    100% 100%;
  background-position:
    0 0,
    0 0,
    0 0,
    180px 0,
    0 0,
    0 0;
  background-repeat:
    no-repeat,
    no-repeat,
    repeat-x,
    repeat-x,
    repeat,
    no-repeat;
}
.ppr-preview-text {
  display: block;
  font-family: Arial, sans-serif;
  font-weight: 400;
  white-space: nowrap;
  line-height: 1.1;
  max-width: 100%;
  overflow: hidden;
  /* The script stops shrinking at 9px; anything still too long ends cleanly. */
  text-overflow: ellipsis;
}
/*
 * Printed ink: it sits down in the weave rather than on top of it. The lengthwise threads
 * show through as fine lines, the ink lies a little unevenly across the fibres, and its
 * edges spread a touch into them.
 */
.ppr-preview-text,
.ppr-preview-logo,
.ppr-preview-logo-two {
  -webkit-mask-image: var(--ppr-ink-weave), var(--ppr-ink-mottle);
  mask-image: var(--ppr-ink-weave), var(--ppr-ink-mottle);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
.ppr-preview-text:not(.ppr-metallic-text) {
  text-shadow: 0 0 0.6px currentColor;
}
.ppr-preview-logo,
.ppr-preview-logo-two {
  object-fit: contain;
  flex-shrink: 0;
  width: auto;
  height: auto;
  display: none;
}
.ppr-preview-logo-mask {
  display: none;
  flex-shrink: 0;
  mask-position: center;
  mask-size: contain;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
}

/* ---------- Caption ---------- */
/* "Ribbon colour | Print colour | Font | Width", led by a small gold tail. */
.ppr-designer-info {
  grid-row: 4;
  grid-column: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 14px var(--ppr-gutter) 0;
  font-size: 12.5px;
  line-height: 1.55;
  font-weight: 600;
  letter-spacing: 0.01em;
  word-spacing: 0.12em;
  text-align: left;
  color: var(--ppr-navy);
  overflow-wrap: anywhere;
}
.ppr-designer-info::before {
  content: "";
  flex: none;
  width: 8px;
  height: 15px;
  background: linear-gradient(100deg, #9a7f2b, #ead58a 42%, #c3a442 70%, #a58a32);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 74%, 0 100%);
  filter: drop-shadow(0 1px 0 rgba(90, 65, 5, 0.25));
}
.ppr-fullcolour-specs,
.ppr-fc-artwork-status {
  grid-column: 1;
  font-size: 12px;
  line-height: 1.55;
  margin: 0;
  padding: 4px var(--ppr-gutter) 0 calc(var(--ppr-gutter) + 18px);
  color: var(--ppr-muted);
  text-align: left;
  overflow-wrap: anywhere;
}
.ppr-fullcolour-specs {
  grid-row: 5;
}
.ppr-fc-artwork-status {
  grid-row: 6;
}
.ppr-fullcolour-specs:empty,
.ppr-fc-artwork-status:empty {
  display: none;
}
/* While artwork is prepared, or when the preview is paused, the message takes the band. */
#ppr-ribbon-designer:is(
    [data-preview-state="preparing"],
    [data-preview-state="waiting"],
    [data-preview-state="unavailable"]
  )
  .ppr-fc-artwork-status:not(:empty) {
  grid-row: 3;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 150px;
  padding: 22px var(--ppr-gutter);
  font-size: 13px;
  text-align: center;
  color: var(--ppr-ink);
}
/* A satin placeholder ribbon with light running along it. */
#ppr-ribbon-designer:is([data-preview-state="preparing"], [data-preview-state="waiting"])
  .ppr-fc-artwork-status:not(:empty)::before {
  content: "";
  width: min(72%, 360px);
  height: 34px;
  background:
    linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.75) 50%, transparent 70%) -150% 0 / 60% 100% no-repeat,
    linear-gradient(180deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0) 40%, rgba(0, 0, 0, 0.04)),
    #e4dccb;
  clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 50%, 100% 100%, 0 100%, 12px 50%);
  animation: ppr-sheen 1.6s ease-in-out infinite;
}
/* Waiting for the customer: the blank ribbon rests. */
#ppr-ribbon-designer[data-preview-state="waiting"] .ppr-fc-artwork-status:not(:empty)::before {
  animation: none;
}
#ppr-ribbon-designer[data-preview-state="unavailable"] .ppr-fc-artwork-status:not(:empty)::before {
  content: "";
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 70%, var(--ppr-muted) 1.6px, transparent 2.2px),
    linear-gradient(var(--ppr-muted), var(--ppr-muted)) 50% 36% / 2px 9px no-repeat,
    #fff;
  box-shadow:
    inset 0 0 0 1.5px #d9d3c6,
    0 4px 10px -4px rgba(40, 30, 10, 0.25);
}
.ppr-jpeg-advice {
  grid-row: 7;
  grid-column: 1;
  position: relative;
  background: #fdf9ee;
  border: 1px solid #f0e4c0;
  border-radius: 12px;
  font-size: 12.5px;
  line-height: 1.6;
  color: #5f5126;
  margin: 12px var(--ppr-gutter) 0;
  padding: 10px 14px 10px 42px;
}
/* An "i" mark in a gold roundel. */
.ppr-jpeg-advice::before {
  content: "i";
  position: absolute;
  left: 13px;
  top: 10px;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: linear-gradient(180deg, #d9b744, var(--ppr-gold-deep));
  color: #fff;
  font:
    italic 700 12px/19px Georgia,
    serif;
  text-align: center;
}
.ppr-designer-note {
  grid-row: 8;
  grid-column: 1;
  position: relative;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ppr-muted);
  margin: 10px var(--ppr-gutter) 0;
  padding: 0 0 0 26px;
  text-align: left;
}
/* A small approval seal: we proof before printing. */
.ppr-designer-note::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--ppr-navy)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.4l3 3 6-6.4' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / 100% 100% no-repeat;
}
@keyframes ppr-pulse {
  50% {
    opacity: 0.55;
  }
}
@keyframes ppr-sheen {
  to {
    background-position:
      250% 0,
      0 0,
      0 0;
  }
}

.ppr-metallic-text {
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 1px #0003);
}
.ppr-metallic-gold {
  background-image: linear-gradient(
    110deg,
    #79591c,
    #f5d76b 25%,
    #b88e28 47%,
    #fff3b1 63%,
    #967021
  );
}
.ppr-metallic-silver {
  background-image: linear-gradient(
    110deg,
    #72767b,
    #f5f5f5 25%,
    #a5a9ad 47%,
    #fff 63%,
    #858a90
  );
}
.ppr-metallic-copper {
  background-image: linear-gradient(
    110deg,
    #773e23,
    #e6aa79 25%,
    #ad643f 47%,
    #ffd7b7 63%,
    #874b2d
  );
}
.ppr-metallic-red {
  background-image: linear-gradient(
    110deg,
    #7c001d,
    #ff6380 25%,
    #bd163c 47%,
    #ffb0bf 63%,
    #a9062b
  );
}
.ppr-metallic-blue {
  background-image: linear-gradient(
    110deg,
    #062773,
    #6499ff 25%,
    #174cbe 47%,
    #c5dcff 63%,
    #0b3385
  );
}
.ppr-metallic-holographic {
  background-image: linear-gradient(
    110deg,
    #a7e6ff,
    #ffd0ef,
    #ceffcb,
    #fff2b0,
    #bfc6ff,
    #a7e6ff
  );
}
.ppr-standard-under-gallery {
  width: 100%;
  clear: both;
  margin: 20px 0 0 !important;
}
/*
 * Desktop: under the gallery, the preview stays in view while the options column
 * scrolls past. The script keeps --ppr-sticky-top clear of a sticky site header.
 */
@media (min-width: 850px) {
  #ppr-ribbon-designer:is(.ppr-standard-under-gallery, .ppr-trophy-under-gallery):not(
      .ppr-standard-under-gallery-fallback,
      .ppr-trophy-under-gallery-fallback
    ) {
    position: sticky;
    top: var(--ppr-sticky-top, 24px);
    z-index: 5;
  }
}
/*
 * Phones and tablets: the preview sits in the options form, just before Add to basket.
 * While the customer works through the options it docks to the bottom of the screen,
 * then settles back into place at the end of the form. Docked, it keeps to the picture
 * and its caption.
 */
@media (max-width: 849px) {
  #ppr-ribbon-designer[data-preview-state="ready"]:not([class*="-under-gallery"]) {
    position: sticky;
    bottom: 0;
    z-index: 30;
    margin: 18px 0;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    box-shadow:
      0 -1px 0 rgba(21, 39, 66, 0.04),
      0 -10px 28px -14px rgba(21, 39, 66, 0.35);
  }
  #ppr-ribbon-designer:not([class*="-under-gallery"]) .ppr-designer-heading {
    font-size: 15px;
    padding-top: 8px;
    padding-bottom: 7px;
  }
  #ppr-ribbon-designer:not([class*="-under-gallery"]) .ppr-designer-note {
    display: none;
  }
  #ppr-ribbon-designer:not([class*="-under-gallery"]) .ppr-designer-info {
    padding-top: 10px;
  }
  #ppr-ribbon-designer:not([class*="-under-gallery"]) .ppr-designer-info {
    display: block;
    padding-left: calc(var(--ppr-gutter) + 18px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    overflow-wrap: normal;
  }
  #ppr-ribbon-designer:not([class*="-under-gallery"]) .ppr-designer-info::before {
    position: absolute;
    margin: 2px 0 0 -18px;
  }
}
.ppr-standard-under-gallery-fallback {
  float: left;
  width: 48%;
  clear: left;
}
@media (max-width: 849px) {
  .ppr-standard-under-gallery-fallback {
    float: none;
    width: 100%;
    clear: both;
  }
}

@media (max-width: 600px) {
  #ppr-ribbon-designer {
    --ppr-gutter: 18px;
    --ppr-tail: 30px;
    border-radius: 16px;
  }
  .ppr-designer-heading {
    font-size: 17px;
  }
  .ppr-designer-stage {
    min-height: 100px;
    padding-top: 14px;
    padding-bottom: 36px;
  }
  .ppr-preview-artwork {
    gap: 8px;
  }
  .ppr-designer-info {
    font-size: 11.5px;
    gap: 10px;
  }
}
/* Narrow product columns get the compact layout whatever the viewport. */
@container (max-width: 460px) {
  #ppr-ribbon-designer > * {
    --ppr-gutter: 18px;
    --ppr-tail: 30px;
  }
  .ppr-designer-heading {
    font-size: 17px;
  }
  .ppr-designer-stage {
    min-height: 100px;
    padding-top: 14px;
    padding-bottom: 36px;
  }
  .ppr-designer-info {
    font-size: 11.5px;
    gap: 10px;
  }
}
@media (prefers-reduced-motion: reduce) {
  #ppr-ribbon-designer *,
  #ppr-ribbon-designer *::before,
  #ppr-ribbon-designer *::after {
    animation: none !important;
    transition: none !important;
  }
}
/* Author-defined display rules must not override the fail-closed/pending state. */
#ppr-ribbon-designer [hidden] {
  display: none !important;
}