@media (max-width: 768px) {
    html, body { max-width: 100%; overflow-x: hidden; }
    /* ======================================================= */
    /* ====== CRITICAL FIX: PREVENT HORIZONTAL SCROLLING ====== */
    /* ======================================================= */
    body {
        overflow-x: hidden; /* This stops the page from being wider than the screen */
    }

    /* ======================================================= */
    /* ====== HEADER FIX (Using your exact preferred code) ====== */
    /* ======================================================= */
    .section-header {
        position: relative;
        width: 100%;
        padding: 0 85px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 50px;
    }

    .back-button {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        padding: 5px 12px;
        font-size: 12px;
        width: 60px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Your specified positioning for LTR (English) */
    html[dir="ltr"] .back-button {
        left: -30px;
        right: auto;
    }

    /* Your specified positioning for RTL (Arabic) */
    html[dir="rtl"] .back-button {
        right: 5px;
        left: auto;
    }

    /* The title class is .product-section-title on these pages */
    .product-section-title {
        font-size: 20px;
        margin: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* ======================================================= */
    /* ====== PRODUCT GRID FIX (Using your preferred code) ====== */
    /* ======================================================= */
    .product-grid {
        grid-template-columns: 1fr; /* Stack products in a single column */
        gap: 20px;
        margin: 20px 15px; /* Adjust margin for mobile */
    }

    .product {
        width: 250px; /* Using your specified width */
        margin: 0 auto; /* Center the card within the grid column */
    }

    .product-image-container {
        height: 220px;
    }

    .name {
        font-size: 16px;
        min-height: auto; /* Remove fixed height for better wrapping */
    }

    .description {
        font-size: 14px;
        height: 100px; /* Remove fixed height */
    }

    .gift-float .gift-open{ padding:5px 8px; }
    .gift-float .gift-amount{ font-size:12px; }
}