@media (max-width: 800px) {
    html {
        overflow-x: hidden;
    }

    html body {
        overflow-x: hidden;
    }

    html body > header.site-header #navbar-shop {
        left: 12px;
    }

    html body > main,
    html body > .product-container,
    html body > .confirmation-container {
        width: calc(100% - 24px);
        max-width: 100%;
        margin: 16px auto;
    }

    html body .container {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 145px), 1fr));
        justify-content: stretch;
        gap: 12px;
        padding: 12px;
    }

    html body .product-link {
        min-width: 0;
    }

    html body .container .product {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 10px;
    }

    html body .container .product img {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 1;
        object-fit: cover;
    }

    html body .product-container {
        padding: 12px;
    }

    html body .product-content {
        flex-direction: column;
        gap: 16px;
    }

    html body .product-left {
        min-width: 0;
        padding: 0;
    }

    html body .product-right {
        min-width: 0;
        padding: 18px 0 0;
    }

    html body .product-gallery {
        gap: 6px;
    }

    html body .gallery-arrow {
        min-width: 40px;
        min-height: 40px;
        padding: 6px;
        font-size: 1.2rem;
    }

    html body .product-right form {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 12px;
    }

    html body #qty_input,
    html body #out_of_stock_text,
    html body .product-right button {
        margin: 0;
    }

    html body .cart-container,
    html body .checkout-container,
    html body .tracking-container,
    html body .info-container,
    html body .login-container,
    html body .register-container,
    html body .confirmation-card {
        width: calc(100% - 24px);
        max-width: 100%;
        margin: 16px auto;
        padding: 16px;
    }

    html body .cart-items {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        white-space: nowrap;
    }

    html body .cart-total {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    html body .checkout-container input,
    html body .checkout-container select,
    html body .checkout-container textarea {
        box-sizing: border-box;
        max-width: 100%;
    }

    html body .order-summary {
        max-width: 100%;
        overflow-x: auto;
    }

    html body .order-summary table {
        min-width: 420px;
    }

    html body .trackingid input,
    html body .trackingid select,
    html body .transaction-form input {
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
    }

    html body .account-orders li {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    html body .login-options {
        flex-wrap: wrap;
    }

    html body .confirmation-card {
        padding: 18px 14px;
    }

    html body .info-box {
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    html body .info-box .code {
        min-width: 0;
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    html body button,
    html body .btn-confirm,
    html body .btn-checkout,
    html body .submit-btn {
        min-height: 44px;
        max-width: 100%;
        margin-left: 0;
    }

    html body > footer {
        position: static;
        width: 100%;
    }

    html body > .page-header {
        align-items: stretch;
        flex-direction: column;
        padding: 0;
    }

    html body > .orders .order-card {
        min-width: 0;
        padding: 16px;
    }

    html body .review-actions {
        flex-direction: column;
    }

    html body .review-actions input {
        box-sizing: border-box;
        width: 100%;
    }
}

@media (max-width: 420px) {
    html body > header:not(.page-header) {
        gap: 4px;
        padding-right: 8px;
        padding-left: 8px;
    }

    html body > header #main-logo {
        max-width: 68vw;
    }

    html body .container {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        padding: 8px;
    }

    html body .cart-container,
    html body .checkout-container,
    html body .tracking-container,
    html body .info-container,
    html body .login-container,
    html body .register-container {
        width: calc(100% - 16px);
        padding: 12px;
    }
}