/* ===== Product page: tablet (768px to 1232px) =====
   No @media wrapper needed: the <link> in the HTML only loads this file at these widths. */

#brand-logo-section {
    padding: 0 50px;
}

/* 3 products no longer fit at 362px each, so they share the row and shrink */
.product-showcase {
    width: 100%;
    min-height: 0;
    padding: 0 40px;
    gap: 24px;
}

.product {
    width: auto;
    flex: 1 1 0;
    min-width: 0;
    max-width: 362px;
}

.product img {
    height: auto;
    aspect-ratio: 362 / 304; 
}

.product-description h3,
.product-description p {
    font-size: 16px;
    line-height: 24px;
}