/**
 * TAULA — Block PP-1: Product Page Hero Banner
 *
 * 100vw × 40vh, full-bleed image, no text overlay.
 * Object-fit: cover — image crops to fill rather than squish.
 */

.taula-pp-hero {
    position: relative;
    width: 100%;
    height: 40vh;
    overflow: hidden;
    background: #111; /* fallback while image loads */
}

.taula-pp-hero__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
    .taula-pp-hero {
        height: 35vh;
    }
}

@media (max-width: 480px) {
    .taula-pp-hero {
        height: 30vh;
    }
}