/**
 * LV Peptides — responsive.css
 *
 * Global responsive rules that apply across all pages.
 * Consolidates missing responsive behaviors not covered by
 * individual component stylesheets.
 *
 * Breakpoints:
 *   Mobile:  < 768px
 *   Tablet:  768px – 1024px
 *   Desktop: > 1024px
 *
 * @see Requirements: 8.1, 8.2, 8.3, 8.4, 8.5, 8.6, 9.3
 */

/* ==========================================================================
   Prevent Horizontal Scrolling (320px – 1440px)
   Requirement: 8.1
   ========================================================================== */
html,
body {
    overflow-x: hidden;
    max-width: 100vw;
}

/* ==========================================================================
   Responsive Images — WordPress srcset support
   Requirement: 8.6
   ========================================================================== */
img {
    max-width: 100%;
    height: auto;
}

/* Ensure WordPress-generated images with srcset scale properly */
img[srcset] {
    width: 100%;
    height: auto;
}

/* WooCommerce product images — ensure srcset is respected */
.woocommerce-product-gallery img,
.woocommerce ul.products li.product img,
.lv-product-card__image img {
    max-width: 100%;
    height: auto;
}

/* ==========================================================================
   Desktop (> 1024px) — Base responsive padding
   Requirement: 9.3
   ========================================================================== */
.site-content,
.woocommerce-page .woocommerce,
.page .entry-content,
.single .entry-content {
    padding-left: var(--space-8);
    padding-right: var(--space-8);
}


/* ==========================================================================
   Tablet (768px – 1024px)
   Requirement: 8.2, 9.3
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1024px) {
    .site-content,
    .woocommerce-page .woocommerce,
    .page .entry-content,
    .single .entry-content {
        padding-left: var(--space-6);
        padding-right: var(--space-6);
    }
}

/* ==========================================================================
   Mobile (< 768px)
   Requirements: 8.2, 8.3, 8.4, 8.5, 9.3
   ========================================================================== */
@media (max-width: 767px) {

    /* ---- Responsive padding: 16px on mobile (Req 9.3) ---- */
    .site-content,
    .woocommerce-page .woocommerce,
    .page .entry-content,
    .single .entry-content {
        padding-left: var(--space-4);
        padding-right: var(--space-4);
    }

    /* ---- 16px minimum body text on mobile (Req 8.4) ---- */
    body {
        font-size: 16px;
        font-size: max(16px, var(--font-size-base));
    }

    p,
    li,
    td,
    th,
    label,
    span,
    .woocommerce-product-details__short-description,
    .woocommerce-Tabs-panel {
        font-size: max(16px, inherit);
    }

    /* Prevent iOS zoom on input focus by ensuring 16px font */
    input,
    textarea,
    select {
        font-size: 16px;
    }

    /* ---- 44px minimum touch targets on mobile (Req 8.3) ---- */
    a,
    button,
    input[type="submit"],
    input[type="button"],
    .button,
    .woocommerce a.button,
    .woocommerce button.button,
    .woocommerce input.button,
    .woocommerce .wc-proceed-to-checkout a,
    select {
        min-height: 44px;
        min-width: 44px;
    }

    /* Inline links don't need min-width, just min-height via line-height */
    p a,
    li a,
    .woocommerce-product-details__short-description a {
        min-width: unset;
        min-height: unset;
        display: inline;
        line-height: 2.2;
    }

    /* ---- Full-width cart/checkout form fields on mobile (Req 8.5) ---- */
    .woocommerce-cart .woocommerce table.cart td,
    .woocommerce-cart .woocommerce table.cart th {
        display: block;
        width: 100%;
    }

    .woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
    .woocommerce-checkout .woocommerce-shipping-fields__field-wrapper,
    .woocommerce-checkout .woocommerce-additional-fields__field-wrapper {
        width: 100%;
    }

    .woocommerce form .form-row,
    .woocommerce-page form .form-row,
    .woocommerce form .form-row-first,
    .woocommerce form .form-row-last,
    .woocommerce-page form .form-row-first,
    .woocommerce-page form .form-row-last {
        width: 100%;
        float: none;
        margin-right: 0;
    }

    .woocommerce form .form-row input.input-text,
    .woocommerce form .form-row textarea,
    .woocommerce form .form-row select,
    .woocommerce-page form .form-row input.input-text,
    .woocommerce-page form .form-row textarea,
    .woocommerce-page form .form-row select {
        width: 100%;
        max-width: 100%;
    }

    /* Coupon form full-width on mobile */
    .woocommerce-cart .coupon {
        display: flex;
        flex-direction: column;
        gap: var(--space-2);
    }

    .woocommerce-cart .coupon input[type="text"] {
        width: 100%;
    }

    .woocommerce-cart .coupon .button {
        width: 100%;
    }

    /* Checkout order review full-width */
    .woocommerce-checkout #order_review,
    .woocommerce-checkout #order_review_heading {
        width: 100%;
        float: none;
    }

    /* Cart actions full-width */
    .woocommerce .cart-collaterals,
    .woocommerce .cart-collaterals .cart_totals {
        width: 100%;
        float: none;
    }

    /* Proceed to checkout button full-width */
    .woocommerce .wc-proceed-to-checkout a.checkout-button {
        width: 100%;
        text-align: center;
        display: block;
    }

    /* Update cart button full-width */
    .woocommerce table.cart td.actions .button {
        width: 100%;
        margin-top: var(--space-2);
    }

    /* Quantity inputs in cart */
    .woocommerce table.cart .quantity .qty {
        width: 100%;
        max-width: 80px;
    }
}