/*
 * Site-wide layout corrections.
 *
 * These came out of the site's customizer "Additional CSS". That box is the
 * wrong home for anything structural: it is invisible to this codebase, it does
 * not travel with a theme rename (it is stored per theme slug, and losing it is
 * exactly what made the first renamed deploy look broken), and because it loads
 * last it wins by position rather than by intent — which hides the fact that a
 * rule is fighting something.
 *
 * Loaded site-wide, immediately after style.css.
 */

/* The container is capped at var(--content-width) (1330px). Below the phone
   breakpoint that cap is irrelevant and style.css's own 750px/420px steps are
   narrower than the viewport, so the page gets gutters it does not want. */
@media (max-width: 767px) {

    .container {
        max-width: 100% !important;
        padding: 0 12px;
    }

    .header-bottom {
        margin-top: 20px;
    }
}

/* The sort dropdown is an unstyled native select against a white archive; a
   light fill is what makes it read as a control. */
.woocommerce .woocommerce-ordering select {
    background-color: #eee;
    margin-bottom: 8px;
}