/* --- Welcome Section  --- */

.welcome-section {
    background-color: var(--yappy-welcome-gray);
    text-align: center;
    margin-bottom: 22px;
    padding-bottom:22px;
}

@media (max-width: 768px) {
    .welcome-section h1 {
        font-size: 2rem;
    }
}

/* Make welcome section side images smaller at medium screen sizes */
@media (max-width: 1199.98px) and (min-width: 768px) {
    .welcome-section .col-md-4:first-child,
    .welcome-section .col-md-4:last-child {
        flex: 0 0 25%;
        max-width: 25%;
    }
    .welcome-section .col-md-4:nth-child(2) {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

/* --- Product Section --- */

.product-section h1
{
    font-family: "gilroybold", "Century Gothic", "Futura";
    font-size: 2rem;
    color: var(--yappy-purple);
    margin-bottom: 1rem;
}

.product-section h2
{
    font-size: 1.1rem;
    margin-bottom: 2rem;
    margin-top: 1rem;
    color: var(--yappy-purple);
}

/* Placeholder for category tiles (avoids layout shift while Woofatron image loads) */
.product-section .animatedTile img {
    width: 100%;
    aspect-ratio: 1 / 1; /* reserve square space */
    background-color: #f3f3f3; /* light placeholder */
    object-fit: cover;
    display: block;
    border-radius: 8px;
}

/* My Stores section - pet tiles background */
.my-stores-section .animatedTile img {
    background-color: #9edcdb;
    padding: 15%;
}

/* --- Reviews Section --- */

.reviews-grid img {
    width: 100%;
    border-radius: 8px;
}