/* Fumetteria: scaffale 3D, elenco degli albi e lettore a tutto schermo.
   Vale per tutti i temi: usa colori propri e si appoggia solo a .wrap e .btn del tema. */

.shop { display: none; }
/* la sezione è alta un tratto di scroll per albo; la scena resta ferma sotto l'intestazione del sito */
.has-shop3d .shop { display: block; position: relative; height: calc(var(--segments) * 85vh); background: #ebe6de; }
.shop-stage { position: sticky; top: var(--head, 0px); height: calc(100vh - var(--head, 0px)); height: calc(100svh - var(--head, 0px)); overflow: hidden; }
.shop-canvas { display: block; width: 100%; height: 100%; touch-action: pan-y; }

.shop-caption { position: absolute; left: max(16px, 6vw); bottom: 9vh; max-width: 360px; padding: 22px 24px 20px; border-radius: 6px; color: #1a1a1a; background: #fff; box-shadow: 0 18px 40px rgba(40, 30, 10, .28); opacity: 0; transform: translateY(10px); transition: opacity .45s, transform .45s; pointer-events: none; }
.shop-caption.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.shop-cap-meta { margin: 0 0 6px; font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #ff6100; }
.shop-cap-title { margin: 0; font-size: 1.3rem; font-weight: 700; line-height: 1.2; text-transform: uppercase; }
.shop-cap-title::after { content: ""; display: block; width: 60px; height: 3px; background: #ff6100; margin: 12px 0; }
.shop-cap-text { margin: 0 0 14px; font-size: .88rem; line-height: 1.6; color: #444; }
.shop-cap-read { min-height: 42px; padding: 8px 20px; border: 0; border-radius: 999px; background: #ff6100; color: #fff; font: inherit; font-weight: 700; letter-spacing: .03em; cursor: pointer; }
.shop-cap-read:hover, .shop-cap-read:focus-visible { background: #c94c00; }
.shop-cap-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0; }
.shop-cap-more { display: inline-flex; align-items: center; min-height: 42px; padding: 8px 20px; border-radius: 999px; background: #1a1a1a; color: #fff; font-weight: 700; letter-spacing: .03em; text-decoration: none; }
.shop-cap-more:hover, .shop-cap-more:focus-visible { background: #444; color: #fff; }
.shop-cap-more[hidden] { display: none; }
.shop-cap-more:not([hidden]) + .shop-cap-read { background: none; color: #c94c00; padding: 8px 4px; text-decoration: underline; text-underline-offset: 3px; }
.shop-cap-more:not([hidden]) + .shop-cap-read:hover { color: #1a1a1a; }

.shop-dots { position: absolute; right: max(14px, 3vw); top: 50%; transform: translateY(-50%); list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.shop-dots li { font-size: .74rem; font-weight: 700; color: rgba(60, 50, 35, .45); text-align: right; cursor: pointer; transition: color .3s, transform .3s; }
.shop-dots li.is-active { color: #ff6100; transform: translateX(-4px) scale(1.25); }

.shop-hint { position: absolute; left: 0; right: 0; bottom: 1.6vh; margin: 0; text-align: center; font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: rgba(60, 50, 35, .7); transition: opacity .5s; }
.shop-hint::after { content: ""; display: block; width: 1px; height: 34px; margin: 12px auto 0; background: linear-gradient(#ff6100, transparent); animation: shop-hint 2s ease-in-out infinite; transform-origin: top; }
.shop-hint.is-hidden { opacity: 0; }
@keyframes shop-hint { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .shop-hint::after { animation: none; } }

@media (max-width: 700px) {
  .shop-caption { left: 16px; right: 16px; bottom: 3vh; max-width: none; padding: 16px 18px 14px; }
  .shop-cap-title { font-size: 1.1rem; }
  .shop-cap-text { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .shop-dots { right: 8px; }
}

/* elenco degli albi (sempre nell'HTML: Google, tastiera, browser senza WebGL) */
.albi { list-style: none; margin: 2.2rem 0 3rem; padding: 0; display: grid; gap: 34px; }
.albo { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 22px; align-items: start; scroll-margin-top: 90px; }
.albo-cover { padding: 0; border: 0; background: none; cursor: pointer; border-radius: 4px; overflow: hidden; box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .55); transform: rotate(-1.5deg); transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.albo-cover:hover, .albo-cover:focus-visible { transform: rotate(0) translateY(-4px); }
.albo-cover { display: block; }
.albo-cover img { display: block; width: 100%; height: auto; }
.albo-text h2 { margin: 0 0 .2em; }
.albo-text h2 a { color: inherit; text-decoration: none; }
.albo-text h2 a:hover { text-decoration: underline; }
.albo-meta { margin: 0 0 .6em; font-size: .85rem; opacity: .7; }
.albo-text p { margin: 0 0 .7em; }
.albo-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.albo-read { cursor: pointer; display: inline-flex; align-items: center; min-height: 40px; padding: 8px 20px; border: 0; border-radius: 999px; background: #ff6100; color: #fff; font: inherit; font-weight: 600; letter-spacing: .02em; transition: background .2s, transform .2s; }
.albo-read:hover, .albo-read:focus-visible { background: #c94c00; transform: translateY(-1px); }
.has-shop3d .albo { grid-template-columns: minmax(0, 1fr); }
.has-shop3d .albo-cover { display: none; }
/* pagina di un singolo fumetto: copertina, dati e "Leggi" sopra il testo */
.albo-hero { display: grid; grid-template-columns: minmax(120px, 200px) minmax(0, 1fr); gap: 28px; align-items: center; margin-top: 1.6rem; margin-bottom: 1.4rem; }
.albo-hero .albo-text { max-width: 560px; }
@media (max-width: 560px) { .albo-hero { grid-template-columns: 110px minmax(0, 1fr); gap: 18px; } .albo-hero .albo-text > p:not(.albo-meta):not(.albo-actions) { font-size: .92rem; } }
@media (min-width: 760px) {
  .has-shop3d .albi { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
}

/* ---------------------------------------------------------------- lettore */
html.reader-open { overflow: hidden; }
.reader { position: fixed; inset: 0; z-index: 10000; background: #141414; color: #f2f2f2; font: 15px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif; }
.reader[hidden] { display: none; }
.reader svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }

.reader-bar { position: absolute; z-index: 2; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 12px; padding: max(8px, env(safe-area-inset-top)) 10px 18px 16px; background: linear-gradient(rgba(0, 0, 0, .78), rgba(0, 0, 0, 0)); transition: opacity .3s, transform .3s; }
.reader-title { flex: 1; min-width: 0; margin: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reader-count { margin: 0; font-variant-numeric: tabular-nums; opacity: .8; }
.reader-actions { display: flex; gap: 4px; }
.reader-btn { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; }
.reader-btn:hover, .reader-btn:focus-visible { background: rgba(255, 255, 255, .14); }
.reader.zoomed .reader-zoom { background: #ff6100; }

.reader-track { display: flex; height: 100%; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior: contain; scrollbar-width: none; outline: none; }
.reader-track::-webkit-scrollbar { display: none; }
.reader.zoomed .reader-track { overflow-x: hidden; scroll-snap-type: none; }
.reader-page { flex: 0 0 100%; height: 100%; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; padding: 56px 8px 40px; box-sizing: border-box; scroll-snap-align: center; scroll-snap-stop: always; overflow: hidden; }
.reader-page img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; background: #fff; box-shadow: 0 10px 40px rgba(0, 0, 0, .5); user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: pan-x pan-y pinch-zoom; }
.reader-page.is-zoomed { display: block; overflow: auto; padding: 0; overscroll-behavior: contain; }
.reader-page.is-zoomed img { max-width: none; max-height: none; width: 250%; height: auto; }
@media (orientation: landscape) { .reader-page.is-zoomed img { width: 160%; } }
/* telefono in orizzontale: poca altezza, la tavola usa tutto lo schermo e i comandi le stanno sopra */
@media (orientation: landscape) and (max-height: 560px) { .reader-page { padding: 4px 8px; } }

.reader-nav { position: absolute; z-index: 2; top: 50%; transform: translateY(-50%); width: 52px; height: 88px; border: 0; border-radius: 10px; background: rgba(0, 0, 0, .35); color: #fff; font-size: 40px; line-height: 1; cursor: pointer; display: none; }
.reader-prev { left: 10px; }
.reader-next { right: 10px; }
.reader-nav:disabled { opacity: .2; cursor: default; }
@media (hover: hover) and (pointer: fine) { .reader-nav { display: block; } }
.reader.zoomed .reader-nav { display: none; }

.reader-help { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; margin: 0; padding: 16px 16px max(10px, env(safe-area-inset-bottom)); text-align: center; font-size: .78rem; opacity: .65; background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .7)); transition: opacity .3s; pointer-events: none; }
.reader.ui-hidden .reader-bar { opacity: 0; transform: translateY(-100%); pointer-events: none; }
.reader.ui-hidden .reader-help, .reader.ui-hidden .reader-nav { opacity: 0; pointer-events: none; }

.reader-end { text-align: center; }
.reader-end-title { margin: 0; font-size: 2.4rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.reader-end-albo { margin: .3em 0 1.6em; opacity: .7; }
.reader-end-actions { display: flex; flex-direction: column; gap: 12px; align-items: center; }
.reader-cta { min-height: 46px; padding: 10px 22px; border: 2px solid #ff6100; border-radius: 999px; background: #ff6100; color: #fff; font-family: inherit; font-size: 1rem; font-weight: 600; line-height: 1.2; cursor: pointer; }
.reader-cta-alt { background: transparent; color: #fff; }