/* mobile: slideshow banner must show in full, no cropping */
@media only screen and (max-width: 767px) {
    .slider-revolution .tp-bgimg.defaultimg {
        background-size: contain !important;
    }
}

/* tablet: bigger, left-aligned logo while the search box is still visible (mobile-header layout, >= 769px) */
@media only screen and (min-width: 769px) and (max-width: 1024px) {
    .header-compact .tt-mobile-header .tt-logo-container {
        justify-content: flex-start;
        height: 110px;
    }
    .header-compact .tt-mobile-header .tt-logo-container .tt-retina {
        max-height: 100px !important;
    }
}

/* mobile: equal-height product cards on home sections and all-sections listing */
@media only screen and (max-width: 767px) {
    .tt-product-listing > .tt-col-item {
        display: flex;
    }

    .tt-carousel-products.slick-slider .slick-track {
        display: flex;
    }

    .tt-carousel-products.slick-slider .slick-slide {
        height: auto;
    }

    /* slick sets the correct pixel width on the slide inline, but the
       Bootstrap col-* class also on that same element (slick adds
       "slick-slide" onto it, it doesn't wrap it) sets a flex-basis
       percentage which, once the track is flex, overrides slick's own
       width and shrinks the card to a fraction of the slide. Make the
       slide fall back to its inline width instead. */
    .tt-carousel-products.slick-slider .slick-slide {
        flex: 0 0 auto !important;
        max-width: none !important;
    }

    .tt-product-listing .tt-product,
    .tt-carousel-products .tt-product {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
    }

    .tt-product-listing .tt-description,
    .tt-carousel-products .tt-description {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
    }

    .tt-product-listing .tt-product-inside-hover,
    .tt-carousel-products .tt-product-inside-hover {
        margin-top: auto;
    }
}

/* mobile: theme.css has an unconditional `footer, footer>* { background-color:
   #fff !important }` near the end of the file that clobbers the dark mobile
   footer (.f-mobile-dark) for every store, leaving white-on-white text.
   Beat it with matching !important + higher specificity. */
@media only screen and (max-width: 789px) {
    .f-mobile-dark,
    .f-mobile-dark .tt-footer-col,
    .f-mobile-dark .tt-footer-center {
        background-color: #303030 !important;
    }

    .f-mobile-dark .tt-footer-col,
    .f-mobile-dark .tt-footer-center {
        color: #888888;
    }

    .f-mobile-dark .tt-footer-custom:last-child {
        background-color: #222222 !important;
    }

    .f-mobile-dark .tt-mobile-collapse .tt-collapse-title,
    .f-mobile-dark address span {
        color: #ffffff;
    }
}

/* top bar (contact us / phone / hours / track order) text lighter than
   theme.css default #888888 on the dark #303030 bar */
header .tt-color-scheme-01 .tt-box-info ul li a,
header .tt-color-scheme-01 .tt-box-info ul li [class^="icon-"],
header .tt-color-scheme-01 .tt-social-icon li a {
    color: #fcfcfc;
}