/* Print page (MSW-347). */

.page-print .price-chip { margin-bottom: 24px; }
.page-print .section-head h2 { text-wrap: balance; }

/* The two print formats, drawn as simple page shapes. */
.formats { max-width: 1040px; margin-inline: auto; }
.format-card { align-items: center; text-align: center; padding: 36px 28px; }
.format-shape { height: 190px; display: grid; place-items: end center; margin-bottom: 14px; }
/* The same illustrated book (La La's Adventure) as a hardcover in each trim shape. */
.format-book { position: relative; display: block; border-radius: 3px 9px 9px 3px; overflow: hidden;
  box-shadow: 0 18px 26px -14px rgba(38, 36, 80, 0.55), 0 3px 6px rgba(38, 36, 80, 0.12); rotate: -2deg; }
.format-book::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.28) 0, rgba(255, 255, 255, 0.22) 3%, rgba(0, 0, 0, 0.1) 5%, transparent 7%),
    linear-gradient(115deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0) 40%); }
.format-book img { display: block; width: 100%; height: 100%; object-fit: cover; }
.format-shape.sq .format-book { width: 168px; height: 168px; }
.format-shape.ls .format-book { width: 224px; height: 173px; rotate: 1.5deg; }
.format-shape.pt .format-book { width: 140px; height: 181px; }
.format-size { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; color: var(--grape); margin: -4px 0 4px; }

/* A picture ledge of real My Story Originals, mixed shapes, standing face-out. */
.ledge { position: relative; aspect-ratio: 16 / 10; border-radius: var(--radius-lg); overflow: hidden;
  background: radial-gradient(circle at 70% 20%, rgba(251, 169, 25, 0.25), transparent 50%), linear-gradient(180deg, #fbf3e6, #f3e4cc); }
.ledge-shelf { position: absolute; inset-inline: 0; bottom: 13%; height: 5.5%; background: linear-gradient(180deg, #c99a63, #9a6a3b); box-shadow: 0 10px 18px -6px rgba(60, 35, 10, 0.45); }
.ledge .lb { position: absolute; bottom: calc(13% + 5.5% - 1px); border-radius: 3px 8px 8px 3px;
  box-shadow: 0 16px 22px -10px rgba(38, 36, 80, 0.55), inset 0 0 0 1px rgba(0, 0, 0, 0.06); transform-origin: bottom center; }
.ledge .lb1 { left: 2%; width: 28%; rotate: -3deg; }
.ledge .lb2 { left: 24%; width: 41%; z-index: 2; }
.ledge .lb3 { left: 60%; width: 22%; rotate: 2deg; z-index: 1; }
.ledge .lb4 { left: 74%; width: 25%; rotate: -2deg; }