/* Mobile refinements for the SchriecksFriethuys storefront.
   Loaded after the main theme stylesheet so these rules win.
   Breakpoints follow Bootstrap: lg = 992px, md = 768px, sm = 576px. */

/* --- Header logo: 135px is too large on phones, tightens the top bar --- */
@media (max-width: 767.98px) {
    img[src*="branding/logo"] {
        max-width: 84px;
        height: auto;
    }
}

/* --- Product overview grid ---
   The grid is `.row.row-cols-lg-4` with no column count below lg, so phones
   crammed 3-4 tiny columns. Give it a sane count: 1 per row on phones, 2 on
   small tablets. The card keeps its existing image-left layout, which now has
   room to breathe (the image is no longer a ~34px thumbnail). */
@media (max-width: 575.98px) {
    .row.row-cols-lg-4 > .col {
        flex: 0 0 100%;
        max-width: 100%;
    }
    /* Cap the image width so a full-width card doesn't get a huge image. */
    .product-summary > .col-3 {
        flex: 0 0 33% !important;
        max-width: 120px !important;
    }
}
@media (min-width: 576px) and (max-width: 991.98px) {
    .row.row-cols-lg-4 > .col {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

/* --- Cart line ---
   Only the first row is split: name/variant on the left, price on the right.
   The price is taken out of flow (absolute, top-right) so the options (sauce
   chip) and actions (quantity, remove) below can use the full card width
   instead of being squeezed beside a full-height price column. The name gets
   right padding so it never runs under the price. Price stays on one line and
   gets a little breathing room from the card edge; "per stuk" is hidden. */
@media (max-width: 575.98px) {
    .cart-item .justify-content-between {
        position: relative;
    }
    .cart-item .justify-content-between > div:first-child {
        width: 100%;
        min-width: 0;
    }
    .cart-item .justify-content-between > div:first-child > .h6 {
        padding-right: 4rem;
    }
    .cart-item .justify-content-between > .align-items-end {
        position: absolute;
        top: 0;
        right: 0.5rem;
    }
    .cart-item .align-items-end h5 {
        white-space: nowrap;
    }
    .cart-item .align-items-end > span {
        display: none;
    }
}

/* --- Product detail add-to-cart button: btn-lg (20px) wrapped to a very tall
       button on phones. Bring it back to a normal size. --- */
@media (max-width: 575.98px) {
    #cart-item-form button[type="submit"] {
        font-size: 1rem;
        padding: 0.5rem 1rem;
        line-height: 1.25;
    }
}