/* NARA product photo refresh — deliberately leaves the original Bali homepage hero untouched. */
/* Homepage: refresh only the product collection thumbnails. */
.home-page .product-image {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #e8e0d1;
}
.home-page .product-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Desktop header is absolutely positioned over the document flow. Reserve its height
   on the catalog page so the first line of the title never sits underneath the navbar. */
@media (min-width: 901px) {
    body.px-catalog-page > main {
        padding-top: 124px;
    }
}

/* Keep the full incense stick visible in the catalog banner without cover-cropping. */
body.px-catalog-page .nara-products-hero-inner {
    min-height: 260px;
    grid-template-columns: minmax(0, 1.15fr) minmax(260px, .85fr);
}
body.px-catalog-page .nara-products-hero-copy {
    min-width: 0;
}
body.px-catalog-page .nara-products-hero h1 {
    margin-top: 0;
    max-width: 700px;
    line-height: 1.12;
    overflow-wrap: normal;
    word-break: normal;
}
body.px-catalog-page .nara-products-hero-image {
    min-height: 260px;
    background-color: #102319;
    background-image:
        linear-gradient(90deg, #102319 0%, rgba(16,35,25,.54) 18%, rgba(16,35,25,0) 60%),
        url("../images/products/incense-user-hero.jpeg");
    background-repeat: no-repeat, no-repeat;
    background-position: center, right center;
    background-size: 100% 100%, auto 100%;
}
body.px-catalog-page .nara-product-photo {
    aspect-ratio: 4 / 3;
    background: #e8e0d1;
}
body.px-catalog-page .nara-product-photo img {
    object-fit: cover;
    object-position: center;
}

@media (min-width: 761px) and (max-width: 1080px) {
    body.px-catalog-page .nara-products-hero-inner {
        grid-template-columns: minmax(0, 1.05fr) minmax(240px, .95fr);
    }
    body.px-catalog-page .nara-products-hero-copy {
        padding-left: clamp(24px, 4vw, 44px);
        padding-right: clamp(24px, 4vw, 44px);
    }
}

@media (max-width: 900px) {
    /* The responsive header is in normal flow, so no desktop top offset is needed. */
    body.px-catalog-page > main { padding-top: 0; }
}

@media (max-width: 760px) {
    body.px-catalog-page .nara-products-hero-inner {
        grid-template-columns: 1fr;
        min-height: 0;
    }
    body.px-catalog-page .nara-products-hero-copy {
        padding: 28px 22px 22px;
    }
    body.px-catalog-page .nara-products-hero-image {
        min-height: 210px;
        background-position: center, right center;
        background-size: 100% 100%, auto 100%;
    }
    body.px-catalog-page .nara-products-catalog { padding: 24px 16px; }
    body.px-catalog-page .nara-products-grid { grid-template-columns: 1fr; gap: 28px; }
    body.px-catalog-page .nara-product-feature {
        grid-template-columns: minmax(110px, .9fr) minmax(0, 1fr);
        gap: 16px;
    }
}

@media (max-width: 390px) {
    body.px-catalog-page .nara-product-feature { grid-template-columns: 1fr; }
    body.px-catalog-page .nara-product-photo { aspect-ratio: 4 / 3; }
}