.product-hero {
    display: grid;

    grid-template-columns:
        minmax(220px, 320px)
        1fr;

    gap: var(--space-2xl);

    align-items: start;
    
    background: var(--color-surface);

    border-radius: var(--radius-lg);
    
    box-shadow: var(--shadow-soft);

    padding: var(--space-2xl);
}

.product-hero__cover {

    display: flex;
    flex-direction: column;
    
    align-items: center;

    gap: var(--space-lg);
    
    width: 100%;
}

.product-hero__cover img {
    display: block;

    width: 100%;
    height: auto;

    border-radius: 0;

    box-shadow: none;
}

.product-cover-placeholder {
    aspect-ratio: 2 / 3;

    border-radius: var(--radius-lg);

    background: var(--color-border);
}

.product-hero__content {
    display: flex;
    flex-direction: column;

    gap: var(--space-md);
    
    max-width: 800px;
}

.product-title {

    max-width: 14ch;

    font-size:
        clamp(
            2.5rem,
            6vw,
            4.5rem
        );

    line-height: 1.05;
}

.product-subtitle {
    font-size: 1.15rem;

    color: var(--color-muted);
}

.product-authors {

    font-size: 1.1rem;

    font-weight: 600;

    color: var(--color-muted);
}

.product-hero__tagline {
    max-width: var(--content-width);

    font-size: 1.2rem;

    line-height: 1.8;
    
    font-weight: 500;

    color: var(--color-text);
    
    padding-left: var(--space-lg);
    
    border-left: 4px solid
        var(--color-accent);
}

.product-hero__genres,
.product-hero__tropes {

    display: flex;

    flex-wrap: wrap;

}

.product-hero__genres {

    gap: .5rem;

    align-items: center;

    margin-top: .25rem;

    font-size: .95rem;

    font-weight: 600;

    color: var(--color-accent);
}

.product-hero__genres span {

    display: inline-flex;

    align-items: center;
}

.product-hero__genres span:not(:last-child)::after {

    content: "•";

    margin-left: .5rem;

    color: var(--color-muted);
}

.product-hero__tropes {

    gap: .75rem;

    padding-top: var(--space-sm);
    
    margin-top: .75rem;
}

.product-hero__details-link {

    display: inline-flex;

    align-items: center;

    gap: .35rem;

    margin-top: var(--space-sm);

    font-size: .95rem;

    font-weight: 600;

    color: var(--color-accent);

    text-decoration: none;
}

.product-hero__details-link:hover {

    text-decoration: underline;
}

.product-hero__details-link::after {

    content: "↓";

    font-size: .9em;
}

@media (max-width: 768px) {

    .product-hero {
        grid-template-columns: 1fr;

        gap: var(--space-xl);
    }

    .product-hero__cover {
        max-width: 260px;

        margin-inline: auto;
    }

    .product-title {
        max-width: none;
    }

}