.book-stage{
  --book-ink:#20343a;
  position:relative;
  width:100%;
  height:100%;
  min-height:100%;
  display:grid;
  place-items:center;
  isolation:isolate;
  background:
    radial-gradient(120% 70% at 50% 112%,rgba(255,255,255,.9) 0,transparent 46%),
    linear-gradient(165deg,color-mix(in srgb,var(--product-color,#d9e8ee) 42%,#fff) 0%,#f3efe8 72%,#e8e4dc 100%);
}
.book-stage.book-thumb{background:transparent}
.book-stage.book-photo-shot{
  background:#f3eee6;
  padding:0;
}
.book-stage.book-photo-shot.book-thumb{background:#f3eee6}
.studio-photo{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
}
.coloring-book{
  position:relative;
  width:min(68%,220px);
  aspect-ratio:3/4;
  transform:perspective(980px) rotateY(-18deg) rotateX(6deg);
  transform-style:preserve-3d;
  filter:drop-shadow(12px 22px 18px rgba(32,52,58,.22));
  transition:transform .35s ease,filter .35s ease;
}
.storefront-card:hover .coloring-book,
.product-media-button:hover .coloring-book{
  transform:perspective(980px) rotateY(-11deg) rotateX(4deg) translateY(-6px);
  filter:drop-shadow(14px 26px 22px rgba(32,52,58,.26));
}
.book-page-block{
  position:absolute;
  top:2.5%;
  bottom:2.5%;
  right:-8%;
  width:11%;
  border-radius:0 5px 5px 0;
  background:repeating-linear-gradient(90deg,#fffdf8 0 2px,#e6dfd4 2px 3px);
  box-shadow:4px 0 8px rgba(32,52,58,.08);
  z-index:0;
}
.book-cover{
  position:absolute;
  inset:0;
  border-radius:5px 12px 12px 6px;
  overflow:hidden;
  background:var(--product-color,#cfe6f0);
  box-shadow:inset -10px 0 16px rgba(32,52,58,.1),inset 0 0 0 1px rgba(255,255,255,.28);
  z-index:2;
}
.book-face{position:absolute;inset:0}
.book-art,.book-photo{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.book-photo{z-index:1}
.image-error .book-photo,.image-error .studio-photo{display:none!important}
.book-banner{
  position:absolute;
  left:0;right:0;bottom:0;
  z-index:3;
  padding:28px 12px 12px;
  background:linear-gradient(180deg,transparent 0,rgba(32,52,58,.42) 38%,rgba(32,52,58,.78) 100%);
  color:#fff;
  text-align:start;
}
.book-banner em{
  display:block;
  font-style:normal;
  font-size:8px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  opacity:.86;
}
.book-banner b{
  display:block;
  margin-top:3px;
  font-size:12px;
  line-height:1.25;
  font-weight:800;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.book-spiral{
  position:absolute;
  left:5.5%;
  top:7%;
  bottom:7%;
  width:12px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  z-index:4;
  pointer-events:none;
}
.book-spiral i{
  display:block;
  width:12px;
  height:12px;
  border-radius:50%;
  border:2px solid #8e999d;
  background:linear-gradient(145deg,#f4f7f8,#b9c2c6);
  box-shadow:inset -1px -1px 0 #fff,1px 1px 1px rgba(32,52,58,.2);
}
.cover.product-media.has-book,
.detail-cover.product-media.has-book{
  display:block;
  padding:0;
  overflow:hidden;
  background:transparent;
}
.storefront-card .cover.product-media.has-book{
  aspect-ratio:4/5;
  padding:18px 14px 22px;
}
.storefront-card .cover.product-media.has-book:has(.book-photo-shot){
  aspect-ratio:3/4!important;
  padding:0;
  background:#f3eee6;
}
.storefront-card .cover.product-media.has-book .product-cover-image,
.storefront-card .cover.product-media.has-book .cover-glyph{display:none}
.card-media-wrap{background:#efece6}
.detail-cover.product-media.has-book{
  max-width:560px;
  aspect-ratio:4/5;
  border-radius:28px;
  padding:28px 18px 32px;
  background:#efece6;
}
.detail-cover.product-media.has-book.has-photo,
.detail-cover.product-media.has-book:has(.book-photo-shot){
  aspect-ratio:3/4!important;
  max-width:min(480px,100%);
  padding:0!important;
  background:#f3eee6!important;
}
.book-stage.book-detail .coloring-book{
  width:min(72%,280px);
  transform:perspective(1100px) rotateY(-22deg) rotateX(8deg);
}
.book-leaf{
  position:absolute;
  width:min(72%,280px);
  aspect-ratio:3/4;
  background:#fffdf8;
  border-radius:4px 14px 14px 4px;
  box-shadow:18px 20px 30px rgba(32,52,58,.12);
  transform:translate(18%,-2%) rotate(7deg);
  z-index:0;
  overflow:hidden;
}
.book-leaf span{
  display:block;
  height:8px;
  margin:18px 18px 0 28px;
  border-radius:99px;
  background:repeating-linear-gradient(90deg,transparent 0 10px,#d7d2c8 10px 11px);
  opacity:.7;
}
.book-leaf span:nth-child(1){margin-top:36px}
.book-leaf span:nth-child(3){width:62%}
.book-leaf span:nth-child(4){width:74%}
.book-stage.book-thumb .coloring-book{
  width:78%;
  transform:perspective(600px) rotateY(-14deg) rotateX(4deg);
  filter:drop-shadow(4px 8px 8px rgba(32,52,58,.18));
}
.book-stage.book-thumb .book-page-block{width:9%;right:-6%}
.book-stage.book-thumb .book-spiral i{width:7px;height:7px}
.cart-thumb{
  background:linear-gradient(165deg,#f6f3ed,#ebe7df);
  padding:7px;
}
.cart-thumb .book-stage{min-height:0}
.book-journal .book-spiral{display:none}
.book-journal .book-cover{
  border-radius:3px 12px 12px 3px;
  box-shadow:inset 14px 0 0 rgba(32,52,58,.1),inset -8px 0 14px rgba(32,52,58,.08);
}
.book-labels .book-spiral{display:none}
.book-labels .coloring-book{width:min(70%,230px)}
.book-labels .book-cover{border-radius:16px}
.book-labels .book-page-block{width:14%;border-radius:0 14px 14px 0;right:-10%}
html[dir="rtl"] .book-banner{text-align:right}
@media(max-width:960px){
  .storefront-card .cover.product-media.has-book:has(.book-photo-shot){
    aspect-ratio:3/4!important;
    padding:0!important;
  }
}
@media(max-width:760px){
  .detail-cover.product-media.has-book.has-photo,
  .detail-cover.product-media.has-book:has(.book-photo-shot){
    max-width:100%;
    aspect-ratio:3/4!important;
    padding:0!important;
  }
}
@media(max-width:650px){
  .storefront-card .cover.product-media.has-book{padding:16px 12px 18px}
  .storefront-card .cover.product-media.has-book:has(.book-photo-shot){padding:0}
  .detail-cover.product-media.has-book{max-width:100%;aspect-ratio:4/5!important;padding:22px 14px 26px}
  .detail-cover.product-media.has-book.has-photo,
  .detail-cover.product-media.has-book:has(.book-photo-shot){
    max-width:100%;
    aspect-ratio:3/4!important;
    padding:0!important;
  }
  .book-stage.book-detail .coloring-book,.book-leaf{width:min(78%,300px)}
}
@media(prefers-reduced-motion:reduce){
  .coloring-book,.storefront-card:hover .coloring-book{transition:none;transform:none}
}