/* Picture and film pages (view.php), laid out like a shop product page:
   the piece big on the left, the prices and Buy now on the right (stacked
   on phones). Loaded after studio-black.css. */

.view-shop-page { position: relative; overflow: clip; padding-top: calc(78px + env(safe-area-inset-top)); }
.view-shop-page > * { position: relative; z-index: 1; }

/* A soft glow of the piece's own colours behind the top of the page. */
.view-shop-page > .view-ambient {
  position: absolute; z-index: 0; inset: -8% -10% auto; height: min(1100px, 120vh);
  background: center / cover no-repeat; filter: blur(90px) saturate(1.5); opacity: .32; pointer-events: none;
  -webkit-mask-image: linear-gradient(#000 35%, transparent); mask-image: linear-gradient(#000 35%, transparent);
}

.view-crumbs { margin: 0 0 1rem; font-size: .8rem; }
.view-crumbs li[aria-current] { max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.view-shop { display: grid; gap: 1.6rem; align-items: start; }
@media (min-width: 960px) {
  .view-shop { grid-template-columns: minmax(0, 1.45fr) minmax(320px, 1fr); gap: clamp(2rem, 4vw, 4rem); }
  .view-buy-panel { position: sticky; top: calc(90px + env(safe-area-inset-top)); }
}

/* The piece itself */
.view-shop .work-view-figure { margin: 0; }
.view-shop .work-view-figure > img,
.view-shop .view-film video {
  display: block; width: auto; max-width: 100%; height: auto; max-height: 82svh; margin-inline: auto; object-fit: contain;
  border-radius: 22px; background: #08080a;
  box-shadow: 0 30px 80px -30px #000, 0 0 0 1px #ffffff14;
}
@media (min-width: 960px) {
  .view-shop .work-view-figure > img, .view-shop .view-film video { max-height: calc(100svh - 140px); }
}

/* Buying panel */
.view-buy-panel { padding: clamp(1.2rem, 2.5vw, 1.8rem); border: 1px solid #ffffff1f; border-radius: 26px;
  background: linear-gradient(160deg, #1b1b22e6, #101014f2); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 24px 70px -35px #000; }
.view-buy-panel .eyebrow { margin: 0 0 .7rem; color: var(--accent, #ff2587); font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; }
.view-buy-panel .eyebrow i { display: inline-block; width: 7px; height: 7px; margin-right: .35rem; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; vertical-align: 1px; }
.view-title { margin: 0 0 .6rem; font: italic 800 clamp(2rem, 4.2vw, 3.3rem)/1.02 Arial, Helvetica, sans-serif; letter-spacing: -.045em; overflow-wrap: anywhere; }
.view-lede { margin: 0 0 1.4rem; color: #c9c9d2; font-size: 1rem; line-height: 1.55; }

/* The two price cards */
.view-prices { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
@media (max-width: 380px) { .view-prices { grid-template-columns: 1fr; } }
.view-price-card { display: flex; flex-direction: column; min-width: 0; padding: 1rem; border: 1px solid #ffffff22; border-radius: 18px; background: #ffffff08; }
.view-price-kind { margin: 0; color: #a9a9b4; font: 700 .7rem/1.2 Arial, sans-serif; letter-spacing: .14em; text-transform: uppercase; }
.view-price-amount { margin: .25rem 0 .3rem; font: italic 800 2.1rem/1 Arial, Helvetica, sans-serif; letter-spacing: -.04em; color: #fff; }
.view-price-note { flex: 1; margin: 0 0 .9rem; color: #b9b9c3; font-size: .82rem; line-height: 1.4; }
.view-price-card.is-business { position: relative; border-color: transparent;
  background: linear-gradient(#17121a, #17121a) padding-box, linear-gradient(135deg, #ff5ac8, var(--accent-fill, #e0106c) 55%, #8a4dff) border-box; border: 1.5px solid transparent; }
.view-price-card.is-business .view-price-amount { background: linear-gradient(90deg, #fff, #ff9bd8); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

.view-card-button, .view-buy-button, .view-ghost-button {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 46px; padding: .7rem 1rem;
  border-radius: 999px; font-family: inherit; font-size: .9rem; font-weight: 700; line-height: 1.15; white-space: nowrap; text-align: center; text-decoration: none; cursor: pointer; }
.view-price-card .view-card-button, .view-price-card .view-buy-button { width: 100%; padding-inline: .6rem; }
.view-card-button { border: 1px solid #ffffff55; background: transparent; color: #fff; }
.view-card-button:hover, .view-card-button:focus-visible { background: #ffffff14; color: #fff; }

/* Buy now: the one thing that glows. */
.view-buy-button { position: relative; overflow: hidden; border: 0; color: #fff; isolation: isolate;
  background: linear-gradient(90deg, var(--accent-fill, #e0106c), #ff4fb0); box-shadow: 0 0 0 0 #ff258780, 0 10px 30px -10px #ff2587; }
.view-buy-button::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(110deg, transparent 30%, #ffffff55 50%, transparent 70%); transform: translateX(-120%); }
.view-buy-button:hover, .view-buy-button:focus-visible { color: #fff; filter: brightness(1.08); }
.view-buy-button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.view-buy-button .view-buy-via { padding: .08rem .42rem; border-radius: 999px; background: #ffffff2e; font-size: .7em; letter-spacing: .02em; }
@media (prefers-reduced-motion: no-preference) {
  .view-buy-button { animation: view-buy-pulse 2.6s ease-in-out infinite; }
  .view-buy-button::after { animation: view-buy-shine 3.2s ease-in-out infinite 1s; }
}
@keyframes view-buy-pulse { 0%, 100% { box-shadow: 0 0 0 0 #ff258766, 0 10px 30px -10px #ff2587; } 50% { box-shadow: 0 0 0 7px #ff258700, 0 12px 38px -8px #ff2587; } }
@keyframes view-buy-shine { 0%, 55% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }

/* Pay steps / questions / extras */
.view-shop .view-paid { margin: .9rem 0 0; }
.view-shop .view-paid .view-commercial-button { display: flex; width: 100%; }
.view-shop .view-buy-question { margin: .9rem 0 0; color: #8f8f9a; font-size: .85rem; }
.view-extra { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.2rem 0 0; padding-top: 1.2rem; border-top: 1px solid #ffffff14; }
.view-ghost-button { flex: 1 1 auto; border: 1px solid #ffffff33; background: transparent; color: #fff; }
.view-ghost-button:hover, .view-ghost-button:focus-visible { border-color: #fff; color: #fff; }
.view-custom { margin: 1rem 0 0; color: #b9b9c3; font-size: .88rem; }
.view-custom a { color: #fff; font-weight: 700; }
.view-shop .view-file-details { margin: .8rem 0 0; }

/* Below the fold */
.view-shop-page .view-more { margin-top: clamp(2.5rem, 6vw, 4.5rem); }
.view-shop-page .view-guide-link { margin-top: 1.5rem; }

@media (max-width: 959px) {
  .view-buy-panel { margin-top: -.2rem; }
  .view-shop .work-view-figure > img, .view-shop .view-film video { border-radius: 18px; max-height: 70svh; }
}
@media (max-width: 520px) {
  .view-price-card { padding: .85rem; }
  .view-price-card .view-buy-via { display: none; } /* "PayPal" shows on the pay box instead */
  .view-price-amount { font-size: 1.85rem; }
}