/* This site's own overrides. A separate file because style.css is cached for a year under a
   fixed ?v=2.7.0; bump ?v= in init.php when this changes. */

/* Logo: chip mark (img/logo-mark.svg) beside the site name, which stays live text */
#logo .brand-name { display: flex; align-items: center; }
#logo .brand-mark { flex: none; width: 44px; height: 44px; margin-right: 12px; }
#logo .brand:hover, #logo .brand:focus { text-decoration: none; }

/* Phones and tablets. style.css pins .container at 970px on every screen, so phones got a shrunk
   desktop page even with a viewport tag. Everything below sits under the 992px desktop breakpoint;
   desktop rendering is unchanged. */

/* listing.php emits a row break after every 3rd card (.clear-3) and every 2nd (.clear-2);
   only the one matching the cards per row may show, or rows go 2,1,2,1 */
#products .clear-2 { display: none; }

@media (max-width: 991px) {
    .container { width: auto !important; }
}

@media (max-width: 767px) {
    /* product grid: two per row instead of three squeezed ones */
    #products .item.grid-group-item { width: 50%; }
    #products .clear-3 { display: none; }
    #products .clear-2 { display: block; }
    /* homepage carousel thumbnails */
    .featured-posts .thumbnails > li { width: 50%; }
    #page img, #products img { max-width: 100%; height: auto; }
}

@media (max-width: 479px) {
    #products .item.grid-group-item { width: 100%; }
}