/* [c38] */

/* [c39] */

.stfb {
    --stfb-edge: clamp(3px, 0.4em, 8px);
    --stfb-radius: 0.4em;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 0;
    gap: clamp(8px, 0.85em, 22px);
    font-size: 12px;   /* [c40] */
    -webkit-user-select: none;
    user-select: none;
    outline: none;
}
/* [c41] */
.stfb.stfb-tooSmall { display: none; }

/* [c42] */
.stfb-stage {
    position: relative;
    z-index: 0;
    flex: 1 1 auto;
    min-height: 0;
    /* [c43] */
    perspective: 4600px;
    perspective-origin: 50% 50%;
    /* [c44] */
    touch-action: none;
}

/* [c45] */
.stfb-book {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    transform-style: preserve-3d;
}

/* [c46] */

.stfb-slot {
    position: relative;
    z-index: 1;
    flex: 1 1 50%;
    min-width: 0;
    overflow: hidden;
    background: var(--st-surface);
    box-shadow: 0 1.3em 2.6em -0.7em rgba(0, 0, 0, 0.38);
}
/* [c47] */
.stfb-slot-left  { border-radius: var(--stfb-radius) 0 0 var(--stfb-radius); }
.stfb-slot-right { border-radius: 0 var(--stfb-radius) var(--stfb-radius) 0; }

/* [c48] */
.stfb-edge {
    position: absolute;
    top: 0.55em;
    bottom: 0.55em;
    width: var(--stfb-edge);
    transform: translateZ(-1px);
    border-radius: var(--stfb-radius);
    background: repeating-linear-gradient(
        to bottom,
        var(--st-surface) 0 0.14em,
        var(--st-surface-2) 0.14em 0.2em);
    box-shadow: 0 0.9em 1.6em -0.4em rgba(0, 0, 0, 0.3);
}
.stfb-edge-l { left: calc(-1 * var(--stfb-edge)); }
.stfb-edge-r { right: calc(-1 * var(--stfb-edge)); }

/* [c49] */
.stfb-gutter {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 4.4em;
    max-width: 12%;
    transform: translateX(-50%);
    z-index: 5;
    pointer-events: none;
    background: linear-gradient(90deg,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.1) 34%,
        rgba(0, 0, 0, 0.3) 50%,
        rgba(0, 0, 0, 0.1) 66%,
        rgba(0, 0, 0, 0) 100%);
}

/* [c50] */
.stfb-cast {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 4;
    opacity: 0;
    pointer-events: none;
}
.stfb-cast-l { left: 0;   right: 50%; background: linear-gradient(to left,  rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0) 58%); }
.stfb-cast-r { left: 50%; right: 0;   background: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0) 58%); }

/* [c51] */

/* [c52] */
.stfb-page {
    position: absolute;
    inset: 0;
    background: var(--st-surface-2);
    border-radius: inherit;
    overflow: hidden;
    /* [c62] */
    pointer-events: none;
}
.stfb-art {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: cover;
    display: block;
    cursor: default;
    /* [c63] */
    -webkit-user-drag: none;
    user-drag: none;
}
/* [c53] */
/* [c64] */
.stfb-scrim {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 58%;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.46) 0%, rgba(0, 0, 0, 0.2) 42%, rgba(0, 0, 0, 0) 100%);
}
/* [c54] */
.stfb-page-empty {
    background:
        radial-gradient(120% 90% at 30% 10%, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 60%),
        linear-gradient(160deg, var(--st-surface-2) 0%, var(--st-surface) 55%, var(--st-surface-2) 100%);
}

/* [c55] */

/* [c65] */
.stfb-prods {
    position: absolute;
    z-index: 2;
    left: 0.7em;
    top: 0.7em;
    bottom: 0.7em;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.3em;
    max-width: 74%;
    overflow: hidden;
}
.stfb-prod {
    display: inline-flex;
    align-items: center;
    gap: 0.45em;
    max-width: 100%;
    padding: 0.2em 0.65em 0.2em 0.2em;
    /* [c66] */
    border-radius: 0.55em;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(10, 12, 14, 0.5);
    color: #fff;
    font-size: 0.8em;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: 0.005em;
}
.stfb-prod-thumb {
    width: 1.9em;
    height: 1.9em;
    border-radius: 0.36em;
    object-fit: cover;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.28);
    -webkit-user-drag: none;
    user-drag: none;
}
.stfb-prod-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 13ch;
    color: #fff;
}
.stfb-prod-more { padding: 0.2em 0.65em; }

/* [c56] */

.stfb-leaf {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 7;
    transform-style: preserve-3d;
    will-change: transform;
    pointer-events: none;
}
/* [c57] */
.stfb-leaf-fwd  { transform-origin: left center; }
.stfb-leaf-back { transform-origin: right center; }
.stfb-face {
    position: absolute;
    inset: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    overflow: hidden;
    border-radius: var(--stfb-radius);
    box-shadow: 0 1.4em 2.8em -0.6em rgba(0, 0, 0, 0.32);
}
.stfb-face-back { transform: rotateY(180deg); }

/* [c58] */
.stfb-shine {
    position: absolute;
    inset: 0;
    z-index: 3;
    opacity: 0;
    pointer-events: none;
}
.stfb-leaf-fwd .stfb-face-front .stfb-shine {
    background: linear-gradient(to right,
        rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.14) 26%,
        rgba(255, 255, 255, 0.12) 76%, rgba(255, 255, 255, 0.3) 100%);
}
.stfb-leaf-fwd .stfb-face-back .stfb-shine {
    background: linear-gradient(to left,
        rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.1) 28%,
        rgba(255, 255, 255, 0.14) 78%, rgba(255, 255, 255, 0.28) 100%);
}
.stfb-leaf-back .stfb-face-front .stfb-shine {
    background: linear-gradient(to left,
        rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.14) 26%,
        rgba(255, 255, 255, 0.12) 76%, rgba(255, 255, 255, 0.3) 100%);
}
.stfb-leaf-back .stfb-face-back .stfb-shine {
    background: linear-gradient(to right,
        rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.1) 28%,
        rgba(255, 255, 255, 0.14) 78%, rgba(255, 255, 255, 0.28) 100%);
}

/* [c59] */
.stfb-fadein { animation: stfb-fadein 0.32s ease both; }
@keyframes stfb-fadein { from { opacity: 0; } to { opacity: 1; } }

/* [c60] */

/* [c61] */
.stfb-controls {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(10px, 1em, 26px);
}
.stfb-controls[hidden] { display: none; }

.stfb-nav {
    width: clamp(30px, 2.5em, 60px);
    height: clamp(30px, 2.5em, 60px);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--st-border);
    border-radius: 50%;
    background: var(--st-surface);
    color: var(--st-text);
    cursor: pointer;
    box-shadow: var(--st-shadow-sm, 0 2px 10px rgba(0, 0, 0, 0.12));
    transition: transform 0.15s ease, opacity 0.15s ease;
}
.stfb-nav:hover { transform: scale(1.08); }
.stfb-nav svg { width: 38%; height: 38%; }
.stfb-nav[disabled] { opacity: 0.28; cursor: default; }
.stfb-nav[disabled]:hover { transform: none; }

.stfb-dots {
    display: flex;
    align-items: center;
    gap: clamp(6px, 0.55em, 14px);
}
.stfb-dot {
    width: clamp(6px, 0.55em, 13px);
    height: clamp(6px, 0.55em, 13px);
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--st-border);
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}
.stfb-dot.is-on {
    background: var(--st-accent);
    transform: scale(1.35);
}

@media (prefers-reduced-motion: reduce) {
    .stfb-nav,
    .stfb-dot { transition: none; }
}