/* Keep hero media above its background in mobile browsers. */
.hero .hero-photo { z-index: 0; }
.hero::after { z-index: 1; pointer-events: none; }
.hero .hero-inner { position: relative; z-index: 2; }

.product-image { display: block; width: 100%; }
.product-image img:not([src$="rice-catalog.png"]) {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (min-width: 761px) and (max-width: 1100px) {
    .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .enquiry-layout,
    .faq-layout { grid-template-columns: 1fr; }
}