/* ================================================
   MOBILE FIXES - Apple HIG Responsive Design
   Vortex - Dark Mode Compliant
   ================================================ */

/* ========================================
   CSS CUSTOM PROPERTIES - Mobile + Dark Mode
   ======================================== */
:root {
    /* Mobile-specific spacing */
    --mobile-padding: 16px;
    --mobile-gap: 12px;
    --mobile-radius: 12px;
    
    /* Touch targets - Apple HIG minimum 44px */
    --touch-target-min: 44px;
    --touch-target-comfortable: 48px;
    
    /* Safe areas for notch devices */
    --safe-area-top: env(safe-area-inset-top, 0px);
    --safe-area-bottom: env(safe-area-inset-bottom, 0px);
    --safe-area-left: env(safe-area-inset-left, 0px);
    --safe-area-right: env(safe-area-inset-right, 0px);
    
    /* Apple System Colors (Dark Mode) - Fallbacks */
    --system-blue: #0A84FF;
    --system-blue: #0a84ff;
    --system-red: #ff453a;
    --system-orange: #ff9f0a;
    
    /* Apple Backgrounds (Dark) */
    --secondary-system-background: #1c1c1e;
    --tertiary-system-background: #2c2c2e;
    
    /* Apple Labels (Dark) */
    --label-primary: #ffffff;
    --label-secondary: #ebebf5;
    --label-tertiary: #aeaeb2;  /* Solid color - was rgba(235,235,245,0.6) */
    
    /* Separators */
    --separator: rgba(84, 84, 88, 0.65);
}

/* ========================================
   GLOBAL MOBILE FIXES
   ======================================== */

/* Prevent horizontal scroll */
html {
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

body {
    overflow-x: hidden;
    min-height: 100vh;
    min-height: 100dvh; /* Dynamic viewport height for mobile browsers */
}

/* Ensure all containers don't cause overflow */
.container,
.sf-container,
main,
section,
article,
.sf-admin-content,
.sf-admin-main {
    max-width: 100vw;
    overflow-x: hidden;
}

/* Better tap highlighting */
* {
    -webkit-tap-highlight-color: rgba(10, 132, 255, 0.1);
}

/* Prevent text selection on interactive elements */
button, a, .clickable {
    -webkit-user-select: none;
    user-select: none;
}

/* Smooth scrolling */
@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

/* ========================================
   TYPOGRAPHY - Mobile Optimized
   ======================================== */
@media (max-width: 768px) {
    html {
        font-size: 16px; /* Prevent iOS zoom on input focus */
    }
    
    body {
        font-size: 16px;
        line-height: 1.5;
    }
    
    h1, .h1 { font-size: 1.75rem; }
    h2, .h2 { font-size: 1.5rem; }
    h3, .h3 { font-size: 1.25rem; }
    h4, .h4 { font-size: 1.125rem; }
    h5, .h5 { font-size: 1rem; }
    h6, .h6 { font-size: 0.875rem; }
}

/* ========================================
   ADMIN LAYOUT - Mobile
   ======================================== */
@media (max-width: 1200px) {
    /* Main content takes full width */
    .sf-admin-main {
        margin-left: 0 !important;
        width: 100% !important;
    }
    
    /* Sidebar slides from left */
    .sf-admin-sidebar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        width: 85vw !important;
        max-width: 320px !important;
        transform: translateX(-100%) !important;
        z-index: 1100 !important;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }
    
    .sf-admin-sidebar.open {
        transform: translateX(0) !important;
        box-shadow: 8px 0 40px rgba(0, 0, 0, 0.3) !important;
    }
    
    /* Content padding */
    .sf-admin-content {
        padding: var(--mobile-padding) !important;
        padding-bottom: calc(var(--mobile-padding) + 80px) !important; /* Space for FAB */
    }
}

/* ========================================
   SIDEBAR TOGGLE - FAB Style
   ======================================== */
@media (max-width: 1200px) {
    .sf-sidebar-toggle {
        display: flex !important;
        position: fixed !important;
        bottom: calc(20px + var(--safe-area-bottom)) !important;
        left: 20px !important;
        width: 56px !important;
        height: 56px !important;
        border-radius: 50% !important;
        background: var(--system-blue, #0A84FF) !important;
        color: #000000 !important;
        border: none !important;
        font-size: 22px !important;
        cursor: pointer !important;
        z-index: 1050 !important;
        box-shadow: 0 4px 16px rgba(10, 132, 255, 0.35) !important;
        align-items: center !important;
        justify-content: center !important;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }
    
    .sf-sidebar-toggle:active {
        transform: scale(0.95) !important;
    }
}

/* ========================================
   SIDEBAR OVERLAY
   ======================================== */
.sf-sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 1099;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.sf-sidebar-overlay.active {
    display: block;
    opacity: 1;
}

/* ========================================
   TOPBAR - Mobile
   ======================================== */
@media (max-width: 768px) {
    .sf-admin-topbar {
        padding: 12px 16px !important;
        flex-wrap: wrap;
        gap: 12px;
    }
    
    .sf-admin-topbar-left {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 4px !important;
        width: 100%;
    }
    
    .sf-admin-topbar-title {
        font-size: 1.25rem !important;
    }
    
    .sf-admin-topbar-subtitle {
        font-size: 0.8125rem !important;
    }
    
    .sf-admin-topbar-search {
        display: none !important;
    }
    
    .sf-admin-topbar-actions {
        position: absolute;
        top: 12px;
        right: 16px;
    }
    
    .sf-admin-topbar-btn {
        width: 44px !important;
        height: 44px !important;
    }
}

/* ========================================
   PAGE HEADER - Mobile
   ======================================== */
@media (max-width: 768px) {
    .sf-admin-page-header,
    .sf-page-header {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 16px !important;
    }
    
    .sf-admin-page-header h1,
    .sf-page-header__title {
        font-size: 1.5rem !important;
    }
    
    .sf-page-header__actions {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }
    
    .sf-page-header__actions .sf-btn {
        flex: 1;
        min-width: 120px;
        justify-content: center;
    }
}

/* ========================================
   CARDS - Mobile
   ======================================== */
@media (max-width: 768px) {
    .sf-card {
        border-radius: var(--mobile-radius) !important;
    }
    
    .sf-card__header,
    .sf-card__body,
    .sf-card__footer {
        padding: 16px !important;
    }
    
    .sf-card__title {
        font-size: 1rem !important;
    }
}

/* ========================================
   STATS GRID - Mobile
   ======================================== */
@media (max-width: 768px) {
    .sf-stats-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    
    .sf-stat-card {
        flex-direction: row !important;
        align-items: center !important;
        padding: 16px !important;
        gap: 16px !important;
    }
    
    .sf-stat-card__icon {
        width: 48px !important;
        height: 48px !important;
        font-size: 1.25rem !important;
        flex-shrink: 0;
    }
    
    .sf-stat-card__content {
        flex: 1;
        text-align: left !important;
    }
    
    .sf-stat-card__label {
        font-size: 0.75rem !important;
        margin-bottom: 4px !important;
    }
    
    .sf-stat-card__value {
        font-size: 1.5rem !important;
    }
}

/* ========================================
   TABLES - Mobile Cards
   ======================================== */
@media (max-width: 768px) {
    /* Hide desktop table */
    .sf-table-container .sf-table {
        display: none !important;
    }
    
    /* Show mobile cards */
    .sf-mobile-cards {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
    }
    
    .sf-mobile-card {
        background: var(--secondary-system-background, #1c1c1e);
        border: 0.5px solid var(--separator, rgba(84, 84, 88, 0.65));
        border-radius: var(--mobile-radius);
        overflow: hidden;
        transition: all 0.2s ease;
    }
    
    .sf-mobile-card:active {
        transform: scale(0.99);
        background: var(--tertiary-system-background, #2c2c2e);
    }
    
    .sf-mobile-card-header {
        padding: 14px 16px;
        background: var(--tertiary-system-background, #2c2c2e);
        border-bottom: 0.5px solid var(--separator, rgba(84, 84, 88, 0.65));
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    
    .sf-mobile-card-title {
        font-weight: 600;
        font-size: 0.9375rem;
        color: var(--label-primary, #ffffff);
        display: flex;
        align-items: center;
        gap: 8px;
    }
    
    .sf-mobile-card-body {
        padding: 12px 16px;
    }
    
    .sf-mobile-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 0;
        border-bottom: 0.5px solid var(--separator, rgba(84, 84, 88, 0.65));
    }
    
    .sf-mobile-row:last-child {
        border-bottom: none;
    }
    
    .sf-mobile-label {
        font-size: 0.8125rem;
        color: var(--label-tertiary, #aeaeb2);
        font-weight: 500;
    }
    
    .sf-mobile-value {
        font-size: 0.875rem;
        color: var(--label-primary, #ffffff);
        font-weight: 600;
        text-align: right;
    }
    
    .sf-mobile-card-footer {
        padding: 12px 16px;
        background: var(--tertiary-system-background, #2c2c2e);
        border-top: 0.5px solid var(--separator, rgba(84, 84, 88, 0.65));
        display: flex;
        gap: 8px;
    }
    
    .sf-mobile-card-footer .sf-btn,
    .sf-mobile-card-footer a {
        flex: 1;
        justify-content: center;
        min-height: 44px;
    }
}

/* Show table on desktop */
@media (min-width: 769px) {
    .sf-mobile-cards {
        display: none !important;
    }
}

/* ========================================
   FORMS - Mobile
   ======================================== */
@media (max-width: 768px) {
    .sf-form-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    
    .sf-form-group {
        margin-bottom: 16px;
    }
    
    /* Prevent iOS zoom */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    input[type="url"],
    input[type="search"],
    input[type="date"],
    textarea,
    select,
    .sf-input,
    .sf-select {
        font-size: 16px !important;
        min-height: var(--touch-target-min);
        padding: 12px 14px !important;
    }
    
    .sf-form-label {
        font-size: 0.875rem;
        margin-bottom: 8px;
    }
    
    .sf-form-hint {
        font-size: 0.8125rem;
        margin-top: 6px;
    }
}

/* ========================================
   BUTTONS - Mobile Touch Targets
   ======================================== */
@media (max-width: 768px) {
    .sf-btn,
    .sf-button,
    button:not(.sf-sidebar-toggle) {
        min-height: var(--touch-target-min) !important;
        padding: 12px 16px !important;
        font-size: 0.9375rem !important;
    }
    
    .sf-btn--sm {
        min-height: 40px !important;
        padding: 8px 12px !important;
        font-size: 0.875rem !important;
    }
    
    .sf-btn--lg {
        min-height: 52px !important;
        padding: 14px 20px !important;
    }
    
    /* Icon buttons */
    .sf-btn--icon,
    .sf-icon-btn {
        width: var(--touch-target-min) !important;
        height: var(--touch-target-min) !important;
        padding: 0 !important;
    }
    
    /* Full width buttons in mobile */
    .sf-btn--block-mobile {
        width: 100%;
        justify-content: center;
    }
}

/* ========================================
   MODALS - Mobile Full Screen
   ======================================== */
@media (max-width: 768px) {
    .sf-modal-backdrop {
        padding: 0 !important;
    }
    
    .sf-modal {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 100vh !important;
        min-height: 100dvh !important;
        margin: 0 !important;
        border-radius: 0 !important;
        display: flex;
        flex-direction: column;
    }
    
    .sf-modal__header {
        padding: 16px !important;
        padding-top: calc(16px + var(--safe-area-top)) !important;
        flex-shrink: 0;
    }
    
    .sf-modal__body {
        flex: 1;
        overflow-y: auto;
        padding: 16px !important;
    }
    
    .sf-modal__footer {
        padding: 16px !important;
        padding-bottom: calc(16px + var(--safe-area-bottom)) !important;
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    
    .sf-modal__footer .sf-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ========================================
   DROPDOWN MENUS - Mobile (Action Sheet Style)
   Apple HIG: Bottom sheet with backdrop
   ======================================== */
@media (max-width: 768px) {
    /* Backdrop overlay */
    .sf-dropdown.open::before {
        content: '';
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.2);
        z-index: 10000;
        animation: fadeIn 0.2s ease;
    }
    
    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }
    
    .sf-dropdown__menu {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        top: auto;
        max-height: 70vh;
        width: 100%;
        border-radius: 14px 14px 0 0;
        padding: 6px;
        padding-bottom: calc(12px + env(safe-area-inset-bottom, 0));
        z-index: 10001;
        transform: translateY(100%);
    }
    
    .sf-dropdown.open .sf-dropdown__menu {
        transform: translateY(0);
        animation: sheetSlideUp 0.3s cubic-bezier(0.32, 0.72, 0, 1);
    }
    
    @keyframes sheetSlideUp {
        from { transform: translateY(100%); }
        to { transform: translateY(0); }
    }
    
    /* Sheet handle indicator - Apple HIG Dark */
    .sf-dropdown__menu::before {
        content: '';
        display: block;
        width: 36px;
        height: 5px;
        background: rgba(255, 255, 255, 0.3);
        border-radius: 3px;
        margin: 6px auto 10px;
    }
    
    .sf-dropdown__header {
        padding: 10px 14px 10px;
        border-bottom: 0.5px solid var(--separator, rgba(84, 84, 88, 0.65));
        margin-bottom: 6px;
    }
    
    .sf-dropdown__menu-item {
        min-height: 44px;
        padding: 12px 14px;
        border-radius: 10px;
    }
    
    .sf-dropdown__divider {
        height: 0.5px;
        margin: 6px 0;
    }
}

/* ========================================
   TABS - Mobile Scroll
   ======================================== */
@media (max-width: 768px) {
    .sf-tabs__list {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        flex-wrap: nowrap !important;
        gap: 4px !important;
        padding: 4px !important;
    }
    
    .sf-tabs__list::-webkit-scrollbar {
        display: none;
    }
    
    .sf-tabs__tab {
        flex-shrink: 0;
        min-height: var(--touch-target-min);
        padding: 10px 16px !important;
        white-space: nowrap;
    }
    
    .sf-tabs__content {
        padding: 16px !important;
    }
}

/* ========================================
   PAGINATION - Mobile
   ======================================== */
@media (max-width: 768px) {
    .sf-pagination {
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
    }
    
    .sf-pagination__btn {
        min-width: var(--touch-target-min);
        min-height: var(--touch-target-min);
    }
    
    .sf-pagination__info {
        width: 100%;
        text-align: center;
        order: -1;
        margin-bottom: 8px;
    }
}

/* ========================================
   BADGES - Mobile
   ======================================== */
@media (max-width: 768px) {
    .sf-badge {
        padding: 6px 10px !important;
        font-size: 0.75rem !important;
    }
}

/* ========================================
   ALERTS - Mobile
   ======================================== */
@media (max-width: 768px) {
    .sf-alert {
        padding: 14px 16px !important;
        border-radius: var(--mobile-radius) !important;
    }
    
    .sf-alert__icon {
        font-size: 1.25rem !important;
    }
    
    .sf-alert__title {
        font-size: 0.9375rem !important;
    }
    
    .sf-alert__message {
        font-size: 0.875rem !important;
    }
}

/* ========================================
   EMPTY STATES - Mobile
   ======================================== */
@media (max-width: 768px) {
    .sf-empty-state {
        padding: 40px 24px !important;
    }
    
    .sf-empty-state__icon {
        font-size: 3rem !important;
        margin-bottom: 16px !important;
    }
    
    .sf-empty-state__title {
        font-size: 1.25rem !important;
    }
    
    .sf-empty-state__description {
        font-size: 0.9375rem !important;
    }
}

/* ========================================
   CHARTS - Mobile
   ======================================== */
@media (max-width: 768px) {
    .chart-container,
    .sf-chart-container {
        min-height: 250px !important;
        max-height: 300px !important;
    }
}

/* ========================================
   PDV TERMINAL - Mobile Only (< 768px)
   ======================================== */
/* DO NOT add PDV overrides here for desktop screens!
   The PDV has its own responsive styles in terminal.html */

@media (max-width: 768px) {
    .pdv-terminal-mode .pdv-topbar {
        padding: 10px 12px !important;
        flex-wrap: wrap;
    }
    
    .pdv-terminal-mode .tb-kpis {
        display: none;
    }
    
    .pdv-terminal-mode .tb-steps {
        order: 10;
        width: 100%;
        margin-top: 8px;
        justify-content: center;
    }
    
    .pdv-terminal-mode .search-input {
        font-size: 16px !important;
    }
    
    .pdv-terminal-mode .pay-methods {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ========================================
   NOTIFICATIONS - Mobile
   ======================================== */
@media (max-width: 768px) {
    .sf-notification-dropdown {
        position: fixed !important;
        top: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        max-height: 70vh !important;
        border-radius: 20px 20px 0 0 !important;
        padding-bottom: var(--safe-area-bottom);
    }
}

/* ========================================
   TOAST - Mobile
   ======================================== */
@media (max-width: 768px) {
    .sf-toast-container {
        top: auto !important;
        bottom: calc(20px + var(--safe-area-bottom)) !important;
        left: 16px !important;
        right: 16px !important;
    }
    
    .sf-toast {
        max-width: 100% !important;
    }
}

/* ========================================
   DARK MODE - Mobile
   ======================================== */
@media (max-width: 768px) {
    html[data-theme="dark"] .sf-mobile-card {
        background: var(--bg-card);
        border-color: var(--border-color);
    }
    
    html[data-theme="dark"] .sf-mobile-card-header {
        background: rgba(255, 255, 255, 0.03);
    }
}

/* ========================================
   LANDSCAPE PHONE
   ======================================== */
@media (max-width: 896px) and (orientation: landscape) {
    .sf-admin-content {
        padding: 12px !important;
    }
    
    .sf-modal {
        min-height: auto !important;
        max-height: 95vh !important;
    }
    
    .sf-modal__footer {
        flex-direction: row !important;
    }
}

/* ========================================
   SMALL PHONES (iPhone SE, etc)
   ======================================== */
@media (max-width: 375px) {
    .sf-admin-content {
        padding: 12px !important;
    }
    
    .sf-card__header,
    .sf-card__body,
    .sf-card__footer {
        padding: 12px !important;
    }
    
    .sf-stat-card {
        padding: 12px !important;
    }
    
    .sf-stat-card__value {
        font-size: 1.25rem !important;
    }
    
    .sf-btn {
        padding: 10px 12px !important;
        font-size: 0.875rem !important;
    }
}

/* ========================================
   ACCESSIBILITY - Focus States Mobile
   ======================================== */
@media (max-width: 768px) {
    /* Larger focus rings on mobile */
    *:focus-visible {
        outline: 3px solid var(--sf-primary, #0A84FF) !important;
        outline-offset: 2px !important;
    }
    
    /* Disable hover effects on touch */
    @media (hover: none) {
        *:hover {
            /* Let active states handle feedback instead */
        }
    }
}

/* ========================================
   PRINT - Mobile
   ======================================== */
@media print {
    .sf-sidebar-toggle,
    .sf-sidebar-overlay,
    .sf-admin-sidebar {
        display: none !important;
    }
    
    .sf-admin-main {
        margin-left: 0 !important;
    }
}

/* ================================================
   STOREFRONT MOBILE FIXES
   ================================================ */

/* ========================================
   DRAWER - Mobile Safe Areas
   ======================================== */
@media (max-width: 768px) {
    .sf-drawer {
        max-width: 85vw !important;
        width: 320px !important;
    }
    
    .sf-drawer__header {
        padding-top: calc(16px + var(--safe-area-top)) !important;
    }
    
    .sf-drawer__close {
        width: 44px !important;
        height: 44px !important;
    }
    
    .sf-drawer__footer {
        padding-bottom: calc(16px + var(--safe-area-bottom)) !important;
    }
    
    .sf-drawer-backdrop {
        z-index: 1098 !important;
    }
    
    .sf-drawer {
        z-index: 1099 !important;
    }
    
    /* Drawer navigation items */
    .sf-drawer-nav__item {
        min-height: 48px !important;
        padding: 14px 20px !important;
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
    }
    
    .sf-drawer-nav__item i {
        font-size: 1.25rem !important;
        width: 24px !important;
    }
}

/* ========================================
   NAVBAR - Mobile Enhancements
   Note: Base styles are in storefront-ui.css
   Only add minimal touch-target fixes here
   ======================================== */
@media (max-width: 768px) {
    /* WhatsApp float - Apple HIG 44px minimum touch target */
    .whatsapp-float {
        width: 48px;
        height: 48px;
        bottom: calc(60px + env(safe-area-inset-bottom, 0));
        right: 16px;
    }
    
    .whatsapp-float svg,
    .whatsapp-float i {
        width: 24px;
        height: 24px;
        font-size: 24px;
    }
}

/* ========================================
   MOBILE MENU OVERLAY
   ======================================== */
@media (max-width: 768px) {
    .mobile-menu-overlay {
        position: fixed !important;
        inset: 0 !important;
        background: rgba(0, 0, 0, 0.5) !important;
        backdrop-filter: blur(4px) !important;
        -webkit-backdrop-filter: blur(4px) !important;
        z-index: 1098 !important;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease !important;
    }
    
    .mobile-menu-overlay.active {
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    .mobile-menu {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 85vw !important;
        max-width: 320px !important;
        background: var(--bg-primary, #fff) !important;
        z-index: 1099 !important;
        transform: translateX(100%) !important;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        display: flex !important;
        flex-direction: column !important;
    }
    
    .mobile-menu.active {
        transform: translateX(0) !important;
    }
    
    .mobile-menu-header {
        padding: 16px !important;
        padding-top: calc(16px + var(--safe-area-top)) !important;
        border-bottom: 1px solid var(--border-color, #e4e4e7) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex-shrink: 0 !important;
    }
    
    .mobile-menu-close {
        width: 44px !important;
        height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 50% !important;
        background: var(--bg-secondary, #f4f4f5) !important;
        border: none !important;
        cursor: pointer !important;
    }
    
    .mobile-menu-nav {
        flex: 1 !important;
        padding: 16px !important;
        overflow-y: auto !important;
    }
    
    .mobile-menu-item {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        padding: 14px 16px !important;
        min-height: 52px !important;
        border-radius: 12px !important;
        text-decoration: none !important;
        color: var(--text-primary, #18181b) !important;
        transition: all 0.2s ease !important;
    }
    
    .mobile-menu-item:active {
        background: var(--bg-secondary, #f4f4f5) !important;
    }
    
    .mobile-menu-item i {
        font-size: 1.25rem !important;
        width: 24px !important;
        text-align: center !important;
    }
    
    .mobile-menu-footer {
        padding: 16px !important;
        padding-bottom: calc(16px + var(--safe-area-bottom)) !important;
        border-top: 1px solid var(--border-color, #e4e4e7) !important;
        flex-shrink: 0 !important;
    }
}

/* ========================================
   HERO SECTION - Mobile
   ======================================== */
@media (max-width: 768px) {
    .hero,
    .sf-hero {
        min-height: calc(100vh - 56px - 60px) !important;
        padding: 40px 16px !important;
    }
    
    .hero h1,
    .sf-hero__title {
        font-size: 1.75rem !important;
        line-height: 1.2 !important;
    }
    
    .hero p,
    .sf-hero__subtitle {
        font-size: 1rem !important;
    }
    
    .hero-badge {
        font-size: 0.8125rem !important;
        padding: 8px 16px !important;
    }
    
    .hero-buttons,
    .sf-hero__actions {
        flex-direction: column !important;
        gap: 12px !important;
        width: 100% !important;
    }
    
    .hero-buttons .btn,
    .sf-hero__actions .sf-btn {
        width: 100% !important;
        justify-content: center !important;
    }
}

/* ========================================
   PRODUCT CARDS - Mobile
   ======================================== */
@media (max-width: 768px) {
    .sf-product-grid,
    .products-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
    
    .sf-product-card,
    .product-card {
        border-radius: 12px !important;
    }
    
    .sf-product-card__image,
    .product-card-image {
        aspect-ratio: 1/1 !important;
    }
    
    .sf-product-card__body,
    .product-card-body {
        padding: 10px !important;
    }
    
    .sf-product-card__title,
    .product-card-title {
        font-size: 0.8125rem !important;
        line-height: 1.3 !important;
        -webkit-line-clamp: 2 !important;
        display: -webkit-box !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }
    
    .sf-product-card__price,
    .product-card-price {
        font-size: 1rem !important;
    }
    
    .sf-product-card__original-price {
        font-size: 0.75rem !important;
    }
    
    /* Add to cart button on card */
    .sf-product-card__add-btn {
        min-height: 40px !important;
        font-size: 0.8125rem !important;
    }
}

@media (max-width: 375px) {
    .sf-product-grid,
    .products-grid {
        gap: 8px !important;
    }
    
    .sf-product-card__body,
    .product-card-body {
        padding: 8px !important;
    }
    
    .sf-product-card__title,
    .product-card-title {
        font-size: 0.75rem !important;
    }
    
    .sf-product-card__price,
    .product-card-price {
        font-size: 0.9375rem !important;
    }
}

/* ========================================
   PRODUCT PAGE - Mobile
   ======================================== */
@media (max-width: 768px) {
    .produto-wrapper {
        padding: 12px !important;
    }
    
    .produto-main {
        padding: 16px !important;
        gap: 24px !important;
    }
    
    .produto-galeria {
        max-width: 100% !important;
    }
    
    .produto-titulo {
        font-size: 1.375rem !important;
        line-height: 1.25 !important;
    }
    
    .preco-valor {
        font-size: 1.875rem !important;
    }
    
    .quantidade-selector {
        width: 100% !important;
    }
    
    .quantidade-btn {
        width: 48px !important;
        height: 48px !important;
    }
    
    .btn-comprar {
        min-height: 52px !important;
        font-size: 1rem !important;
    }
    
    .produto-garantias {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
    }
    
    .garantia-item {
        padding: 12px 8px !important;
    }
    
    .garantia-item i {
        font-size: 1.25rem !important;
    }
    
    .garantia-item span {
        font-size: 0.6875rem !important;
    }
    
    /* Tabs */
    .tabs-header {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        padding-bottom: 4px !important;
    }
    
    .tabs-header::-webkit-scrollbar {
        display: none !important;
    }
    
    .tab-btn {
        flex-shrink: 0 !important;
        min-height: 44px !important;
        padding: 10px 16px !important;
        white-space: nowrap !important;
    }
    
    /* Related products */
    .relacionados-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
}

/* ========================================
   CART PAGE - Mobile
   ======================================== */
@media (max-width: 768px) {
    .cart-container {
        padding: 16px !important;
    }
    
    .cart-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    
    .cart-item {
        padding: 16px !important;
        gap: 12px !important;
    }
    
    .cart-item-image {
        width: 80px !important;
        height: 80px !important;
        flex-shrink: 0 !important;
    }
    
    .cart-item-info {
        flex: 1 !important;
        min-width: 0 !important;
    }
    
    .cart-item-title {
        font-size: 0.9375rem !important;
        line-height: 1.3 !important;
    }
    
    .cart-item-price {
        font-size: 1.125rem !important;
    }
    
    .cart-item-quantity {
        width: 100% !important;
        margin-top: 12px !important;
    }
    
    .cart-item-remove {
        position: absolute !important;
        top: 12px !important;
        right: 12px !important;
        width: 32px !important;
        height: 32px !important;
    }
    
    /* Cart summary sticky bottom */
    .cart-summary {
        position: sticky !important;
        bottom: calc(60px + var(--safe-area-bottom)) !important;
        background: var(--bg-primary, #fff) !important;
        padding: 16px !important;
        border-radius: 16px 16px 0 0 !important;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1) !important;
        margin: 0 -16px !important;
        z-index: 10 !important;
    }
    
    .cart-summary-total {
        font-size: 1.5rem !important;
    }
    
    .cart-checkout-btn {
        min-height: 52px !important;
        font-size: 1rem !important;
    }
}

/* ========================================
   CHECKOUT - Mobile
   ======================================== */
@media (max-width: 768px) {
    .checkout-container {
        padding: 16px !important;
    }
    
    .checkout-grid {
        grid-template-columns: 1fr !important;
    }
    
    .checkout-step {
        padding: 16px !important;
    }
    
    .checkout-step-header {
        padding: 14px 16px !important;
    }
    
    .checkout-form-row {
        flex-direction: column !important;
        gap: 16px !important;
    }
    
    /* Payment methods */
    .payment-methods-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    
    .payment-method-card {
        min-height: 60px !important;
        padding: 16px !important;
    }
    
    /* Order summary */
    .checkout-summary {
        position: sticky !important;
        bottom: 0 !important;
        background: var(--bg-primary, #fff) !important;
        margin: 0 -16px !important;
        padding: 16px !important;
        border-radius: 16px 16px 0 0 !important;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1) !important;
    }
}

/* ========================================
   FOOTER - Mobile
   ======================================== */
@media (max-width: 768px) {
    .sf-footer,
    .footer {
        padding-bottom: calc(60px + var(--safe-area-bottom)) !important;
    }
    
    .sf-footer__grid,
    .footer-grid {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
    }
    
    .sf-footer__brand,
    .footer-brand {
        text-align: center !important;
        padding-right: 0 !important;
    }
    
    .sf-footer__logo,
    .footer-logo {
        justify-content: center !important;
    }
    
    .sf-footer__column,
    .footer-column {
        text-align: center !important;
    }
    
    .sf-footer__column-title,
    .footer-column-title {
        font-size: 1rem !important;
        margin-bottom: 16px !important;
    }
    
    .sf-footer__links,
    .footer-links {
        align-items: center !important;
    }
    
    .sf-footer__link,
    .footer-link {
        padding: 10px 0 !important;
    }
    
    .sf-footer__social,
    .footer-social {
        justify-content: center !important;
    }
    
    .sf-footer__bottom,
    .footer-bottom {
        flex-direction: column !important;
        gap: 16px !important;
        text-align: center !important;
        padding: 24px 16px !important;
    }
}

/* ========================================
   SEARCH RESULTS - Mobile
   ======================================== */
@media (max-width: 768px) {
    .search-filters {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        width: 85vw !important;
        max-width: 320px !important;
        background: var(--bg-primary, #fff) !important;
        z-index: 1100 !important;
        transform: translateX(-100%) !important;
        transition: transform 0.3s ease !important;
        padding: 16px !important;
        padding-top: calc(16px + var(--safe-area-top)) !important;
        overflow-y: auto !important;
    }
    
    .search-filters.open {
        transform: translateX(0) !important;
    }
    
    .search-filters-toggle {
        display: flex !important;
        min-height: 44px !important;
        padding: 12px 16px !important;
        gap: 8px !important;
        align-items: center !important;
        justify-content: center !important;
        background: var(--bg-secondary, #f4f4f5) !important;
        border-radius: 12px !important;
        margin-bottom: 16px !important;
    }
    
    .search-results-header {
        flex-direction: column !important;
        gap: 12px !important;
    }
    
    .search-sort-select {
        width: 100% !important;
        min-height: 44px !important;
    }
}

/* ========================================
   CATEGORIES PAGE - Mobile
   ======================================== */
@media (max-width: 768px) {
    .categories-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
    
    .category-card {
        padding: 16px !important;
        border-radius: 12px !important;
    }
    
    .category-card-icon {
        width: 48px !important;
        height: 48px !important;
        font-size: 1.5rem !important;
    }
    
    .category-card-title {
        font-size: 0.875rem !important;
    }
    
    .category-card-count {
        font-size: 0.75rem !important;
    }
}

/* ========================================
   ACCOUNT PAGES - Mobile
   ======================================== */
@media (max-width: 768px) {
    .account-container {
        padding: 16px !important;
    }
    
    .account-grid {
        grid-template-columns: 1fr !important;
    }
    
    .account-sidebar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        width: 85vw !important;
        max-width: 280px !important;
        background: var(--bg-primary, #fff) !important;
        z-index: 1100 !important;
        transform: translateX(-100%) !important;
        transition: transform 0.3s ease !important;
        padding: 16px !important;
        padding-top: calc(16px + var(--safe-area-top)) !important;
    }
    
    .account-sidebar.open {
        transform: translateX(0) !important;
    }
    
    .account-menu-toggle {
        display: flex !important;
        min-height: 44px !important;
        padding: 12px 16px !important;
        margin-bottom: 16px !important;
    }
    
    .account-menu-item {
        min-height: 48px !important;
        padding: 12px 16px !important;
    }
    
    /* Orders list */
    .orders-table {
        display: none !important;
    }
    
    .orders-mobile-cards {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
    }
    
    .order-card {
        padding: 16px !important;
        border-radius: 12px !important;
    }
}

/* ========================================
   BREADCRUMBS - Mobile
   ======================================== */
@media (max-width: 768px) {
    .breadcrumb,
    .sf-breadcrumb {
        font-size: 0.8125rem !important;
        padding: 12px 0 !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        white-space: nowrap !important;
    }
    
    .breadcrumb::-webkit-scrollbar,
    .sf-breadcrumb::-webkit-scrollbar {
        display: none !important;
    }
}

/* ========================================
   COOKIE BANNER - Mobile
   ======================================== */
@media (max-width: 768px) {
    .cookie-banner {
        bottom: calc(60px + var(--safe-area-bottom)) !important;
        left: 12px !important;
        right: 12px !important;
        padding: 16px !important;
        border-radius: 16px !important;
    }
    
    .cookie-banner-content {
        flex-direction: column !important;
        gap: 12px !important;
    }
    
    .cookie-banner-actions {
        flex-direction: column !important;
        width: 100% !important;
        gap: 8px !important;
    }
    
    .cookie-banner-actions .btn {
        width: 100% !important;
    }
}

/* ================================================
   iOS SAFARI SPECIFIC FIXES
   ================================================ */

/* Fix 100vh issue on iOS */
@supports (-webkit-touch-callout: none) {
    body {
        min-height: -webkit-fill-available;
    }
    
    .sf-modal {
        max-height: -webkit-fill-available !important;
    }
    
    .sf-drawer {
        height: -webkit-fill-available !important;
    }
}

/* Momentum scrolling for all scrollable containers */
.sf-admin-sidebar,
.sf-drawer__body,
.sf-modal__body,
.cart-body,
.items-scroll,
.mobile-menu-nav,
.sf-tabs__list,
.tabs-header {
    -webkit-overflow-scrolling: touch;
}

/* Prevent rubber-banding on body while allowing it on scroll containers */
@media (max-width: 768px) {
    html {
        position: fixed;
        width: 100%;
    }
    
    body {
        overflow-y: auto;
        height: 100%;
        height: 100dvh;
    }
}

/* Fix input zoom on iOS (font-size < 16px triggers zoom) */
@media (max-width: 768px) {
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    input[type="url"],
    input[type="search"],
    input[type="date"],
    input[type="time"],
    input[type="datetime-local"],
    textarea,
    select {
        font-size: 16px !important;
    }
}

/* ================================================
   UTILITY CLASSES - Mobile
   ================================================ */

/* Hide on mobile */
@media (max-width: 768px) {
    .sf-hide-mobile,
    .hide-mobile,
    .d-none-mobile {
        display: none !important;
    }
}

/* Show only on mobile */
@media (min-width: 769px) {
    .sf-show-mobile,
    .show-mobile,
    .d-mobile-only {
        display: none !important;
    }
}

/* Full width on mobile */
@media (max-width: 768px) {
    .sf-full-mobile,
    .full-width-mobile {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* Stack on mobile (flex column) */
@media (max-width: 768px) {
    .sf-stack-mobile,
    .stack-mobile {
        flex-direction: column !important;
    }
}

/* Center on mobile */
@media (max-width: 768px) {
    .sf-center-mobile,
    .center-mobile {
        text-align: center !important;
        justify-content: center !important;
        align-items: center !important;
    }
}

/* Remove padding on mobile */
@media (max-width: 768px) {
    .sf-no-padding-mobile,
    .no-padding-mobile {
        padding: 0 !important;
    }
}

/* Smaller text on mobile */
@media (max-width: 768px) {
    .sf-text-sm-mobile {
        font-size: 0.875rem !important;
    }
    
    .sf-text-xs-mobile {
        font-size: 0.75rem !important;
    }
}