/** Shopify CDN: Minification failed

Line 1392:17 Expected "}" to go with "{"

**/
/* Master Muscles - Custom Tailwind CSS
   Converted from React Vite project
   Date: 2024-12-06
*/

/* ========================================
   Base Colors & Variables
   ======================================== */
:root {
    --color-primary: #5B3FFF;
    --color-primary-hover: #4A2FE6;
    --color-primary-light: #EBE6FF;
    --color-secondary: #1A1A1A;
    --color-gray-50: #F9FAFB;
    --color-gray-100: #F3F4F6;
    --color-gray-200: #E5E7EB;
    --color-gray-300: #D1D5DB;
    --color-gray-400: #9CA3AF;
    --color-gray-500: #6B7280;
    --color-gray-600: #4B5563;
    --color-gray-700: #374151;
    --color-gray-800: #1F2937;
    --color-gray-900: #111827;
}

/* ========================================
   Container
   ======================================== */
.mm-container {
    width: 100%;
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

@media (min-width: 768px) {
    .mm-container {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

/* ========================================
   Buttons
   ======================================== */
.mm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    border-radius: 9999px;
    transition: all 0.2s ease;
    cursor: pointer;
    text-decoration: none;
}

.mm-btn-primary {
    background-color: var(--color-primary);
    color: white;
}

.mm-btn-primary:hover {
    background-color: var(--color-primary-hover);
}

.mm-btn-secondary {
    background-color: var(--color-secondary);
    color: white;
}

.mm-btn-secondary:hover {
    opacity: 0.9;
}

/* ========================================
   Typography
   ======================================== */
.mm-text-primary {
    color: var(--color-primary);
}

.mm-text-secondary {
    color: var(--color-secondary);
}

.mm-text-gray-400 {
    color: var(--color-gray-400);
}

.mm-text-gray-500 {
    color: var(--color-gray-500);
}

.mm-text-gray-600 {
    color: var(--color-gray-600);
}

.mm-text-gray-700 {
    color: var(--color-gray-700);
}

.mm-text-gray-900 {
    color: var(--color-gray-900);
}

.mm-text-white {
    color: white;
}

.mm-font-bold {
    font-weight: 700;
}

.mm-font-semibold {
    font-weight: 600;
}

.mm-font-medium {
    font-weight: 500;
}

.mm-text-xs {
    font-size: 0.75rem;
    line-height: 1rem;
}

.mm-text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.mm-text-base {
    font-size: 1rem;
    line-height: 1.5rem;
}

.mm-text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
}

.mm-text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
}

.mm-text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
}

.mm-text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
}

.mm-text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
}

.mm-text-5xl {
    font-size: 3rem;
    line-height: 1;
}

/* ========================================
   Backgrounds
   ======================================== */
.mm-bg-primary {
    background-color: var(--color-primary);
}

.mm-bg-secondary {
    background-color: var(--color-secondary);
}

.mm-bg-white {
    background-color: white;
}

.mm-bg-gray-50 {
    background-color: var(--color-gray-50);
}

.mm-bg-gray-100 {
    background-color: var(--color-gray-100);
}

/* ========================================
   Layout & Flexbox
   ======================================== */
.mm-flex {
    display: flex;
}

.mm-inline-flex {
    display: inline-flex;
}

.mm-grid {
    display: grid;
}

.mm-hidden {
    display: none;
}

.mm-block {
    display: block;
}

.mm-items-center {
    align-items: center;
}

.mm-items-start {
    align-items: flex-start;
}

.mm-items-end {
    align-items: flex-end;
}

.mm-justify-center {
    justify-content: center;
}

.mm-justify-between {
    justify-content: space-between;
}

.mm-justify-start {
    justify-content: flex-start;
}

.mm-justify-end {
    justify-content: flex-end;
}

.mm-flex-col {
    flex-direction: column;
}

.mm-flex-row {
    flex-direction: row;
}

.mm-flex-wrap {
    flex-wrap: wrap;
}

.mm-flex-1 {
    flex: 1 1 0%;
}

.mm-flex-shrink-0 {
    flex-shrink: 0;
}

.mm-gap-1 {
    gap: 0.25rem;
}

.mm-gap-2 {
    gap: 0.5rem;
}

.mm-gap-3 {
    gap: 0.75rem;
}

.mm-gap-4 {
    gap: 1rem;
}

.mm-gap-6 {
    gap: 1.5rem;
}

.mm-gap-8 {
    gap: 2rem;
}

.mm-gap-12 {
    gap: 3rem;
}

/* ========================================
   Spacing
   ======================================== */
.mm-p-2 {
    padding: 0.5rem;
}

.mm-p-3 {
    padding: 0.75rem;
}

.mm-p-4 {
    padding: 1rem;
}

.mm-p-6 {
    padding: 1.5rem;
}

.mm-p-8 {
    padding: 2rem;
}

.mm-px-2 {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.mm-px-3 {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

.mm-px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
}

.mm-px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.mm-px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
}

.mm-py-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.mm-py-3 {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

.mm-py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.mm-py-6 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

.mm-py-8 {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.mm-py-12 {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

.mm-py-16 {
    padding-top: 4rem;
    padding-bottom: 4rem;
}

.mm-py-20 {
    padding-top: 5rem;
    padding-bottom: 5rem;
}

.mm-mb-2 {
    margin-bottom: 0.5rem;
}

.mm-mb-4 {
    margin-bottom: 1rem;
}

.mm-mb-6 {
    margin-bottom: 1.5rem;
}

.mm-mb-8 {
    margin-bottom: 2rem;
}

.mm-mb-12 {
    margin-bottom: 3rem;
}

.mm-mt-1 {
    margin-top: 0.25rem;
}

.mm-mt-2 {
    margin-top: 0.5rem;
}

.mm-mt-4 {
    margin-top: 1rem;
}

/* ========================================
   Borders & Rounded
   ======================================== */
.mm-rounded {
    border-radius: 0.25rem;
}

.mm-rounded-lg {
    border-radius: 0.5rem;
}

.mm-rounded-xl {
    border-radius: 0.75rem;
}

.mm-rounded-2xl {
    border-radius: 1rem;
}

.mm-rounded-3xl {
    border-radius: 1.5rem;
}

.mm-rounded-full {
    border-radius: 9999px;
}

.mm-border {
    border-width: 1px;
}

.mm-border-t {
    border-top-width: 1px;
}

.mm-border-b {
    border-bottom-width: 1px;
}

.mm-border-gray-100 {
    border-color: var(--color-gray-100);
}

.mm-border-gray-200 {
    border-color: var(--color-gray-200);
}

/* ========================================
   Shadows
   ======================================== */
.mm-shadow-sm {
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}

.mm-shadow {
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
}

.mm-shadow-md {
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

.mm-shadow-lg {
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

/* ========================================
   Positioning
   ======================================== */
.mm-relative {
    position: relative;
}

.mm-absolute {
    position: absolute;
}

.mm-fixed {
    position: fixed;
}

.mm-sticky {
    position: sticky;
}

.mm-top-0 {
    top: 0;
}

.mm-left-0 {
    left: 0;
}

.mm-right-0 {
    right: 0;
}

.mm-bottom-0 {
    bottom: 0;
}

.mm-inset-0 {
    inset: 0;
}

.mm-z-10 {
    z-index: 10;
}

.mm-z-20 {
    z-index: 20;
}

.mm-z-30 {
    z-index: 30;
}

.mm-z-40 {
    z-index: 40;
}

.mm-z-50 {
    z-index: 50;
}

/* ========================================
   Width & Height
   ======================================== */
.mm-w-full {
    width: 100%;
}

.mm-w-auto {
    width: auto;
}

.mm-w-4 {
    width: 1rem;
}

.mm-w-5 {
    width: 1.25rem;
}

.mm-w-6 {
    width: 1.5rem;
}

.mm-w-8 {
    width: 2rem;
}

.mm-w-10 {
    width: 2.5rem;
}

.mm-w-12 {
    width: 3rem;
}

.mm-w-16 {
    width: 4rem;
}

.mm-w-20 {
    width: 5rem;
}

.mm-w-24 {
    width: 6rem;
}

.mm-h-full {
    height: 100%;
}

.mm-h-auto {
    height: auto;
}

.mm-h-4 {
    height: 1rem;
}

.mm-h-5 {
    height: 1.25rem;
}

.mm-h-6 {
    height: 1.5rem;
}

.mm-h-8 {
    height: 2rem;
}

.mm-h-10 {
    height: 2.5rem;
}

.mm-h-12 {
    height: 3rem;
}

.mm-h-16 {
    height: 4rem;
}

.mm-h-20 {
    height: 5rem;
}

.mm-h-24 {
    height: 6rem;
}

.mm-min-h-screen {
    min-height: 100vh;
}

.mm-max-w-md {
    max-width: 28rem;
}

.mm-max-w-lg {
    max-width: 32rem;
}

.mm-max-w-xl {
    max-width: 36rem;
}

.mm-max-w-2xl {
    max-width: 42rem;
}

/* ========================================
   Text Utilities
   ======================================== */
.mm-text-center {
    text-align: center;
}

.mm-text-left {
    text-align: left;
}

.mm-text-right {
    text-align: right;
}

.mm-uppercase {
    text-transform: uppercase;
}

.mm-capitalize {
    text-transform: capitalize;
}

.mm-line-clamp-1 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    line-clamp: 1;
}

.mm-line-clamp-2 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.mm-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ========================================
   Transitions
   ======================================== */
.mm-transition {
    transition: all 0.2s ease;
}

.mm-transition-colors {
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.mm-transition-transform {
    transition: transform 0.2s ease;
}

/* ========================================
   Hover States
   ======================================== */
.mm-hover\:text-primary:hover {
    color: var(--color-primary);
}

.mm-hover\:bg-gray-100:hover {
    background-color: var(--color-gray-100);
}

.mm-hover\:shadow-lg:hover {
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

.mm-hover\:scale-105:hover {
    transform: scale(1.05);
}

/* ========================================
   Responsive - Desktop Only (md+)
   ======================================== */
@media (min-width: 768px) {
    .mm-md\:flex {
        display: flex;
    }

    .mm-md\:block {
        display: block;
    }

    .mm-md\:hidden {
        display: none;
    }

    .mm-md\:grid {
        display: grid;
    }

    .mm-md\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mm-md\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .mm-md\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .mm-md\:gap-6 {
        gap: 1.5rem;
    }

    .mm-md\:gap-8 {
        gap: 2rem;
    }

    .mm-md\:gap-12 {
        gap: 3rem;
    }

    .mm-md\:py-12 {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }

    .mm-md\:py-16 {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }

    .mm-md\:py-20 {
        padding-top: 5rem;
        padding-bottom: 5rem;
    }

    .mm-md\:text-3xl {
        font-size: 1.875rem;
        line-height: 2.25rem;
    }

    .mm-md\:text-4xl {
        font-size: 2.25rem;
        line-height: 2.5rem;
    }

    .mm-md\:text-5xl {
        font-size: 3rem;
        line-height: 1;
    }

    .mm-md\:text-6xl {
        font-size: 3.75rem;
        line-height: 1;
    }
}

/* ========================================
   Responsive - Large Desktop (lg+)
   ======================================== */
@media (min-width: 1024px) {
    .mm-lg\:flex {
        display: flex;
    }

    .mm-lg\:block {
        display: block;
    }

    .mm-lg\:hidden {
        display: none;
    }

    .mm-lg\:grid {
        display: grid;
    }

    .mm-lg\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .mm-lg\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* ========================================
   Mobile Only
   ======================================== */
@media (max-width: 767px) {
    .mm-mobile\:flex {
        display: flex;
    }

    .mm-mobile\:block {
        display: block;
    }

    .mm-mobile\:hidden {
        display: none;
    }
}

/* ========================================
   Overflow
   ======================================== */
.mm-overflow-hidden {
    overflow: hidden;
}

.mm-overflow-x-auto {
    overflow-x: auto;
}

.mm-overflow-y-auto {
    overflow-y: auto;
}

/* Hide scrollbar for horizontal scroll */
.mm-no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.mm-no-scrollbar::-webkit-scrollbar {
    display: none;
}

/* ========================================
   Aspect Ratios
   ======================================== */
.mm-aspect-square {
    aspect-ratio: 1 / 1;
}

.mm-aspect-video {
    aspect-ratio: 16 / 9;
}

/* ========================================
   Object Fit
   ======================================== */
.mm-object-cover {
    object-fit: cover;
}

.mm-object-contain {
    object-fit: contain;
}

/* ========================================
   Product Card Specific
   ======================================== */
.mm-product-card {
    background: white;
    border-radius: 1rem;
    border: 1px solid var(--color-gray-100);
    overflow: hidden;
    transition: box-shadow 0.3s ease;
}

.mm-product-card:hover {
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

.mm-product-card__image {
    aspect-ratio: 1 / 1;
    background: var(--color-gray-50);
    overflow: hidden;
}

.mm-product-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    mix-blend-mode: multiply;
}

.mm-product-card__badge {
    position: absolute;
    top: 1rem;
    left: 1rem;
    background: var(--color-primary);
    color: white;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
}

/* ========================================
   Header Specific
   ======================================== */
.mm-header {
    background: white;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    position: sticky;
    top: 0;
    z-index: 50;
}

.mm-header__announcement {
    background: var(--color-secondary);
    color: white;
    padding: 0.5rem 0;
    font-size: 0.875rem;
}

.mm-header__main {
    padding: 1.5rem 0;
}

.mm-header__nav {
    border-top: 1px solid var(--color-gray-100);
}

.mm-header__nav-list {
    display: flex;
    align-items: center;
    gap: 2rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.mm-header__nav-link {
    color: var(--color-gray-700);
    font-weight: 500;
    padding: 1rem 0;
    display: block;
    transition: color 0.2s ease;
    text-decoration: none;
}

.mm-header__nav-link:hover {
    color: var(--color-primary);
}

/* ========================================
   Hero Section Specific
   ======================================== */
.mm-hero {
    position: relative;
    overflow: hidden;
}

.mm-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.2), transparent);
}

/* ========================================
   Star Rating
   ======================================== */
.mm-stars {
    color: #FBBF24;
}

/* ========================================
   Badge Colors
   ======================================== */
.mm-badge-blue {
    background: #3B82F6;
    color: white;
}

.mm-badge-green {
    background: #10B981;
    color: white;
}

.mm-badge-orange {
    background: #F97316;
    color: white;
}

.mm-badge-pink {
    background: #EC4899;
    color: white;
}

/* ========================================
   RTL / Arabic Fixes
   ======================================== */
/* Fix horizontal overflow in RTL - only on root elements */
html.rtl,
html[dir="rtl"] {
    overflow-x: hidden;
}

html.rtl body,
html[dir="rtl"] body {
    overflow-x: hidden;
}

/* NOTE: DO NOT add max-width: 100vw to * - it breaks CSS Grid layouts! */

/* Mobile overflow fixes */
@media (max-width: 768px) {

    /* Ensure bottom nav is always visible */
    html.rtl .mm-bottom-nav,
    html[dir="rtl"] .mm-bottom-nav {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 9999 !important;
    }
}

/* ========================================
   Announcement Bar RTL Fix  
   ======================================== */
/* Browser handles RTL layout automatically - minimal overrides */
html.rtl .mm-announcement-text,
html[dir="rtl"] .mm-announcement-text {
    text-align: start;

    .mm-badge-orange {
        background: #F97316;
        color: white;
    }

    .mm-badge-pink {
        background: #EC4899;
        color: white;
    }

    /* ========================================
   RTL / Arabic Fixes
   ======================================== */
    /* Fix horizontal overflow in RTL - only on root elements */
    html.rtl,
    html[dir="rtl"] {
        overflow-x: hidden;
    }

    html.rtl body,
    html[dir="rtl"] body {
        overflow-x: hidden;
    }

    /* NOTE: DO NOT add max-width: 100vw to * - it breaks CSS Grid layouts! */

    /* Mobile overflow fixes */
    @media (max-width: 768px) {

        /* Ensure bottom nav is always visible */
        html.rtl .mm-bottom-nav,
        html[dir="rtl"] .mm-bottom-nav {
            position: fixed !important;
            bottom: 0 !important;
            left: 0 !important;
            right: 0 !important;
            z-index: 9999 !important;
        }
    }

    /* ========================================
   Announcement Bar RTL Fix  
   ======================================== */
    /* Browser handles RTL layout automatically - minimal overrides */
    html.rtl .mm-announcement-text,
    html[dir="rtl"] .mm-announcement-text {
        text-align: start;
    }

    /* ========================================
   Banner Arrows - Hide on Mobile
   ======================================== */
    @media (max-width: 768px) {

        .mm-banner-arrows,
        .mm-banner-arrow,
        .slideshow-arrows,
        .slideshow-control,
        .mm-hero-arrow,
        [class*="banner"] [class*="arrow"],
        [class*="slider"] [class*="arrow"] {
            display: none !important;
        }
    }

    /* ========================================
   Mobile Product Info - Image Gallery Fix
   ======================================== */
    @media (max-width: 768px) {
        .mmpim-gallery {
            touch-action: pan-x pan-y;
            -webkit-overflow-scrolling: touch;
        }

        .mmpim-gallery-main {
            scroll-snap-type: x mandatory;
            overflow-x: auto;
            display: flex;
        }

        .mmpim-gallery-main img,
        .mmpim-gallery-main .mmpim-main-img {
            scroll-snap-align: center;
            flex-shrink: 0;
            width: 100%;
        }
    }

    /* ========================================
   RTL Support - Minimal & Non-Destructive
   ======================================== */
    /* 
   IMPORTANT: DO NOT add max-width: 100vw to * selector - it breaks CSS Grid!
   DO NOT add direction: rtl to containers - browser handles it from html[dir="rtl"]
   
   The browser automatically handles RTL mirroring when dir="rtl" is set on <html>.
   We only need minimal rules for:
   1. Overflow protection at root level
   2. Text alignment for specific elements
*/

    /* Root-level overflow protection only */
    html[dir="rtl"],
    html[dir="rtl"] body {
        overflow-x: hidden;
    }

    /* Text alignment for announcement */
    html[dir="rtl"] .mm-announcement-text {
        text-align: start;
    }

    /* Mobile bottom nav - ensure visibility */
    @media (max-width: 768px) {
        html[dir="rtl"] .mm-bottom-nav {
            position: fixed !important;

            .mm-hero {
                position: relative;
                overflow: hidden;
            }

            .mm-hero__overlay {
                position: absolute;
                inset: 0;
                background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.2), transparent);
            }

            /* ========================================
   Star Rating
   ======================================== */
            .mm-stars {
                color: #FBBF24;
            }

            /* ========================================
   Badge Colors
   ======================================== */
            .mm-badge-blue {
                background: #3B82F6;
                color: white;
            }

            .mm-badge-green {
                background: #10B981;
                color: white;
            }

            .mm-badge-orange {
                background: #F97316;
                color: white;
            }

            .mm-badge-pink {
                background: #EC4899;
                color: white;
            }

            /* ========================================
   RTL / Arabic Fixes
   ======================================== */
            /* Fix horizontal overflow in RTL - only on root elements */
            html.rtl,
            html[dir="rtl"] {
                overflow-x: hidden;
            }

            html.rtl body,
            html[dir="rtl"] body {
                overflow-x: hidden;
            }

            /* NOTE: DO NOT add max-width: 100vw to * - it breaks CSS Grid layouts! */

            /* Mobile overflow fixes */
            @media (max-width: 768px) {

                /* Ensure bottom nav is always visible */
                html.rtl .mm-bottom-nav,
                html[dir="rtl"] .mm-bottom-nav {
                    position: fixed !important;
                    bottom: 0 !important;
                    left: 0 !important;
                    right: 0 !important;
                    z-index: 9999 !important;
                }
            }

            /* ========================================
   Announcement Bar RTL Fix  
   ======================================== */
            /* Browser handles RTL layout automatically - minimal overrides */
            html.rtl .mm-announcement-text,
            html[dir="rtl"] .mm-announcement-text {
                text-align: start;

                .mm-badge-orange {
                    background: #F97316;
                    color: white;
                }

                .mm-badge-pink {
                    background: #EC4899;
                    color: white;
                }

                /* ========================================
   RTL / Arabic Fixes
   ======================================== */
                /* Fix horizontal overflow in RTL - only on root elements */
                html.rtl,
                html[dir="rtl"] {
                    overflow-x: hidden;
                }

                html.rtl body,
                html[dir="rtl"] body {
                    overflow-x: hidden;
                }

                /* NOTE: DO NOT add max-width: 100vw to * - it breaks CSS Grid layouts! */

                /* Mobile overflow fixes */
                @media (max-width: 768px) {

                    /* Ensure bottom nav is always visible */
                    html.rtl .mm-bottom-nav,
                    html[dir="rtl"] .mm-bottom-nav {
                        position: fixed !important;
                        bottom: 0 !important;
                        left: 0 !important;
                        right: 0 !important;
                        z-index: 9999 !important;
                    }
                }

                /* ========================================
   Announcement Bar RTL Fix  
   ======================================== */
                /* Browser handles RTL layout automatically - minimal overrides */
                html.rtl .mm-announcement-text,
                html[dir="rtl"] .mm-announcement-text {
                    text-align: start;
                }

                /* ========================================
   Banner Arrows - Hide on Mobile
   ======================================== */
                @media (max-width: 768px) {

                    .mm-banner-arrows,
                    .mm-banner-arrow,
                    .slideshow-arrows,
                    .slideshow-control,
                    .mm-hero-arrow,
                    [class*="banner"] [class*="arrow"],
                    [class*="slider"] [class*="arrow"] {
                        display: none !important;
                    }
                }

                /* ========================================
   Mobile Product Info - Image Gallery Fix
   ======================================== */
                @media (max-width: 768px) {
                    .mmpim-gallery {
                        touch-action: pan-x pan-y;
                        -webkit-overflow-scrolling: touch;
                    }

                    .mmpim-gallery-main {
                        scroll-snap-type: x mandatory;
                        overflow-x: auto;
                        display: flex;
                    }

                    .mmpim-gallery-main img,
                    .mmpim-gallery-main .mmpim-main-img {
                        scroll-snap-align: center;
                        flex-shrink: 0;
                        width: 100%;
                    }
                }

                /* ========================================
   RTL Support - Minimal & Non-Destructive
   ======================================== */
                /* 
   IMPORTANT: DO NOT add max-width: 100vw to * selector - it breaks CSS Grid!
   DO NOT add direction: rtl to containers - browser handles it from html[dir="rtl"]
   
   The browser automatically handles RTL mirroring when dir="rtl" is set on <html>.
   We only need minimal rules for:
   1. Overflow protection at root level
   2. Text alignment for specific elements
*/

                /* Root-level overflow protection only */
                html[dir="rtl"],
                html[dir="rtl"] body {
                    overflow-x: hidden;
                }

                /* Text alignment for announcement */
                html[dir="rtl"] .mm-announcement-text {
                    text-align: start;
                }

                /* Mobile bottom nav - ensure visibility */
                @media (max-width: 768px) {
                    html[dir="rtl"] .mm-bottom-nav {
                        position: fixed !important;
                        bottom: 0 !important;
                        left: 0 !important;
                        right: 0 !important;
                        z-index: 9999 !important;
                    }
                }