/* ================================================================
   FR COLLECTIONS - EXTRA SMALL DEVICES RESPONSIVE CSS
   Target: Devices with width < 400px (Very small phones only)
   Normal Android phones (360px-414px+) remain unaffected
   Only truly extra small/compact devices get these styles
   ================================================================ */

@media (max-width: 399.98px) {
    
    /* ==========================================
       GLOBAL TYPOGRAPHY - SMALLER FONTS
       ========================================== */
    html {
        font-size: 14px;
    }
    
    body {
        font-size: 0.875rem;
        line-height: 1.5;
    }
    
    h1 { font-size: 1.5rem !important; }
    h2 { font-size: 1.3rem !important; }
    h3 { font-size: 1.15rem !important; }
    h4 { font-size: 1rem !important; }
    h5 { font-size: 0.9rem !important; }
    h6 { font-size: 0.85rem !important; }
    
    /* Override for category names to keep them small */
    .category-name { font-size: 0.7rem !important; }
    
    p {
        font-size: 0.85rem !important;
        line-height: 1.5 !important;
    }
    
    /* ==========================================
       NAVBAR - COMPACT MOBILE VERSION
       ========================================== */
    .navbar {
        padding: 8px 0 !important;
    }
    
    .navbar .container {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    
    .navbar-brand {
        font-size: 0.9rem !important;
    }
    
    .navbar-brand img {
        height: 30px !important;
    }
    
    .logo-text {
        font-size: 0.95rem !important;
    }
    
    .logo-circle {
        width: 32px !important;
        height: 32px !important;
        font-size: 14px !important;
    }
    
    /* Mobile Signup Button */
    .signup-btn {
        padding: 5px 10px !important;
        font-size: 0.75rem !important;
        gap: 4px !important;
    }
    
    .signup-btn i {
        font-size: 0.7rem !important;
    }
    
    /* Mobile User Avatar */
    .user-avatar-circle {
        width: 28px !important;
        height: 28px !important;
        font-size: 12px !important;
    }
    
    /* Mobile Cart Icon */
    .navbar .fa-shopping-cart {
        font-size: 1rem !important;
    }
    
    #cart-count, #mobile-cart-count {
        font-size: 0.55rem !important;
        padding: 1px 4px !important;
        min-width: 14px !important;
        height: 14px !important;
    }
    
    /* Hamburger Menu */
    .navbar-toggler-icon-custom {
        width: 18px !important;
        height: 14px !important;
    }
    
    .navbar-toggler-icon-custom span {
        height: 2px !important;
    }
    
    /* ==========================================
       MOBILE MENU DRAWER - XS OPTIMIZED
       ========================================== */
    .mobile-menu-sidebar {
        width: 290px !important;
        max-width: 95% !important;
        top: 55px !important;
        padding: 10px 0 14px 0 !important;
    }
    
    .mobile-menu-header {
        padding: 10px 12px 12px 12px !important;
        gap: 6px !important;
    }
    
    .mobile-menu-icons-left {
        display: flex !important;
        gap: 6px !important;
        flex-wrap: nowrap !important;
        flex: 1 !important;
    }
    
    .mobile-menu-cart-icon,
    .mobile-menu-favorites-icon,
    .mobile-menu-wishlist-icon,
    .mobile-menu-mystery-icon,
    .mobile-menu-profile-icon,
    .mobile-menu-spin-icon,
    .mobile-menu-address-icon {
        width: 26px !important;
        height: 26px !important;
        font-size: 10px !important;
        border-radius: 6px !important;
        flex-shrink: 0 !important;
    }
    
    .mobile-menu-close {
        width: 26px !important;
        height: 26px !important;
        font-size: 11px !important;
        flex-shrink: 0 !important;
    }
    
    .mobile-nav-link {
        font-size: 0.85rem !important;
        padding: 10px 15px !important;
    }
    
    .mobile-orders-btn {
        font-size: 0.8rem !important;
        padding: 10px 15px !important;
        margin: 10px 12px !important;
    }
    
    /* ==========================================
       HERO SECTIONS - COMPACT
       ========================================== */
    .hero-section {
        height: 50vh !important;
        min-height: 300px !important;
    }
    
    .hero-title {
        font-size: 1.5rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    .hero-subtitle {
        font-size: 0.85rem !important;
        margin-bottom: 1rem !important;
    }
    
    .hero-content {
        padding: 0 15px !important;
    }
    
    .hero-btn,
    .btn-hero {
        padding: 10px 20px !important;
        font-size: 0.8rem !important;
    }
    
    /* Shop/Page Heroes */
    .shop-hero,
    .page-hero,
    .contact-hero,
    .about-hero,
    .blog-hero {
        padding: 60px 15px 40px !important;
        min-height: auto !important;
    }
    
    .shop-hero h1,
    .page-hero h1,
    .contact-hero h1,
    .about-hero h1,
    .blog-hero h1 {
        font-size: 1.5rem !important;
    }
    
    .shop-hero p,
    .page-hero p {
        font-size: 0.85rem !important;
    }
    
    /* Orders Hero */
    .orders-hero {
        padding: 60px 15px 40px !important;
    }
    
    .orders-hero h1 {
        font-size: 1.5rem !important;
    }
    
    .orders-stats-bar {
        gap: 8px !important;
    }
    
    .stat-item {
        padding: 6px 10px !important;
        font-size: 0.7rem !important;
        min-width: 60px !important;
    }
    
    /* ==========================================
       BUTTONS - SMALLER
       ========================================== */
    .btn {
        padding: 8px 16px !important;
        font-size: 0.8rem !important;
    }
    
    .btn-lg {
        padding: 10px 20px !important;
        font-size: 0.85rem !important;
    }
    
    .btn-sm {
        padding: 5px 10px !important;
        font-size: 0.7rem !important;
    }
    
    /* ==========================================
       CARDS & CONTAINERS
       ========================================== */
    .container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    
    .card {
        border-radius: 12px !important;
    }
    
    .card-body {
        padding: 15px !important;
    }
    
    .card-title {
        font-size: 1rem !important;
    }
    
    /* ==========================================
       PRODUCT CARDS - COMPACT
       ========================================== */
    .product-card-modern {
        border-radius: 12px !important;
    }
    
    .product-card-modern .product-info {
        padding: 10px 8px 8px !important;
    }
    
    .product-card-modern .product-title {
        font-size: 0.8rem !important;
        margin-bottom: 4px !important;
        -webkit-line-clamp: 1 !important;
    }
    
    .product-card-modern .current-price {
        font-size: 0.8rem !important;
    }
    
    .product-card-modern .original-price {
        font-size: 0.65rem !important;
    }
    
    .product-card-modern .stock-text {
        font-size: 0.55rem !important;
        padding: 2px 6px !important;
    }
    
    .product-card-modern .sold-stat {
        font-size: 0.6rem !important;
    }
    
    .product-card-modern .favorite-btn {
        width: 30px !important;
        height: 30px !important;
        top: 6px !important;
        right: 6px !important;
    }
    
    .product-card-modern .favorite-btn i {
        font-size: 0.75rem !important;
    }
    
    .product-card-modern .btn-cart,
    .product-card-modern .btn-buy,
    .product-card-modern .btn-in-cart {
        padding: 4px 6px !important;
        font-size: 0.6rem !important;
        height: 26px !important;
    }
    
    .product-card-modern .product-actions {
        gap: 4px !important;
    }
    
    /* Products Grid */
    .products-grid {
        gap: 10px !important;
    }
    
    /* ==========================================
       SECTIONS - REDUCED PADDING
       ========================================== */
    section {
        padding: 30px 0 !important;
    }
    
    .section-title {
        font-size: 1.3rem !important;
        margin-bottom: 15px !important;
    }
    
    .section-subtitle {
        font-size: 0.8rem !important;
    }
    
    /* ==========================================
       FORMS - COMPACT
       ========================================== */
    .form-control {
        padding: 10px 12px !important;
        font-size: 0.85rem !important;
        border-radius: 8px !important;
    }
    
    .form-label {
        font-size: 0.8rem !important;
        margin-bottom: 4px !important;
    }
    
    .form-group {
        margin-bottom: 12px !important;
    }
    
    .form-group i.input-icon {
        font-size: 0.9rem !important;
        left: 14px !important;
    }
    
    .form-group input {
        padding: 10px 12px 10px 38px !important;
        font-size: 0.85rem !important;
    }
    
    /* ==========================================
       AUTH PAGES - XS OPTIMIZED
       ========================================== */
    .auth-section {
        padding: 70px 10px 30px !important;
        min-height: calc(100vh - 60px) !important;
    }
    
    .auth-wrapper {
        border-radius: 16px !important;
        max-width: 100% !important;
    }
    
    .auth-info-panel {
        display: none !important;
    }
    
    .auth-form-panel {
        padding: 25px 18px !important;
    }
    
    .auth-form h3 {
        font-size: 1.4rem !important;
        margin-bottom: 20px !important;
    }
    
    .auth-form h3::after {
        width: 40px !important;
        height: 3px !important;
        bottom: -8px !important;
    }
    
    .auth-button {
        padding: 12px !important;
        font-size: 0.9rem !important;
    }
    
    .google-btn {
        padding: 10px 14px !important;
        font-size: 0.85rem !important;
        gap: 8px !important;
    }
    
    .google-btn svg {
        width: 18px !important;
        height: 18px !important;
    }
    
    .auth-divider {
        margin: 12px 0 !important;
    }
    
    .auth-divider span {
        font-size: 0.75rem !important;
    }
    
    .auth-footer {
        font-size: 0.8rem !important;
        margin-top: 15px !important;
    }
    
    .alert {
        padding: 10px 12px !important;
        font-size: 0.8rem !important;
        border-radius: 10px !important;
        gap: 8px !important;
    }
    
    .alert i {
        font-size: 1rem !important;
        width: 26px !important;
        height: 26px !important;
    }
    
    /* Auth Header */
    .auth-header {
        padding: 10px 0 !important;
    }
    
    .auth-header .container {
        padding: 0 10px !important;
    }
    
    .auth-header img {
        height: 28px !important;
    }
    
    .auth-header span {
        font-size: 0.95rem !important;
    }
    
    .auth-signup-btn {
        padding: 5px 10px !important;
        font-size: 0.8rem !important;
        gap: 5px !important;
    }
    
    /* ==========================================
       AFFILIATE PAGE - XS
       ========================================== */
    .affiliate-blocked-fullpage {
        padding: 30px 15px !important;
    }
    
    .blocked-content {
        padding: 30px 20px !important;
        border-radius: 20px !important;
    }
    
    .blocked-icon-wrapper {
        width: 90px !important;
        height: 90px !important;
        margin-bottom: 20px !important;
    }
    
    .blocked-icon-wrapper i {
        font-size: 2.5rem !important;
    }
    
    .blocked-title {
        font-size: 1.4rem !important;
    }
    
    .blocked-text {
        font-size: 0.9rem !important;
    }
    
    .btn-contact-team {
        padding: 12px 25px !important;
        font-size: 0.9rem !important;
    }
    
    /* ==========================================
       SHOP PAGE - XS
       ========================================== */
    .shop-filters {
        padding: 10px !important;
    }
    
    .filter-btn {
        padding: 6px 12px !important;
        font-size: 0.75rem !important;
    }
    
    .sort-dropdown {
        font-size: 0.8rem !important;
    }
    
    /* ==========================================
       PRODUCT DETAIL PAGE - XS
       ========================================== */
    .product-detail-section {
        padding: 20px 10px !important;
    }
    
    .product-gallery {
        margin-bottom: 20px !important;
    }
    
    .product-title-detail {
        font-size: 1.2rem !important;
    }
    
    .product-price-detail {
        font-size: 1.3rem !important;
    }
    
    .product-description {
        font-size: 0.85rem !important;
    }
    
    .quantity-selector {
        gap: 8px !important;
    }
    
    .quantity-btn {
        width: 32px !important;
        height: 32px !important;
        font-size: 0.9rem !important;
    }
    
    .quantity-input {
        width: 50px !important;
        font-size: 0.9rem !important;
    }
    
    /* ==========================================
       CART PAGE - XS
       ========================================== */
    .cart-item {
        padding: 12px !important;
        flex-direction: column !important;
        gap: 10px !important;
    }
    
    .cart-item-image {
        width: 70px !important;
        height: 70px !important;
    }
    
    .cart-item-title {
        font-size: 0.85rem !important;
    }
    
    .cart-item-price {
        font-size: 0.9rem !important;
    }
    
    .cart-summary {
        padding: 15px !important;
    }
    
    .cart-total {
        font-size: 1.1rem !important;
    }
    
    /* ==========================================
       CHECKOUT PAGE - XS
       ========================================== */
    .checkout-hero {
        padding: 60px 15px 40px !important;
    }
    
    .checkout-card {
        border-radius: 12px !important;
    }
    
    .card-header {
        padding: 15px !important;
    }
    
    .card-header h5 {
        font-size: 1rem !important;
    }
    
    .payment-info-compact {
        padding: 12px !important;
    }
    
    .payment-details-inline {
        flex-direction: column !important;
        gap: 10px !important;
    }
    
    .payment-detail-box {
        padding: 12px !important;
        min-width: 100% !important;
    }
    
    .payment-methods-inline {
        gap: 8px !important;
    }
    
    .payment-method-item-compact {
        min-width: 80px !important;
        padding: 8px 10px !important;
        font-size: 0.7rem !important;
    }
    
    .payment-method-item-compact i {
        font-size: 1.2rem !important;
    }
    
    /* ==========================================
       ORDERS PAGE - XS
       ========================================== */
    .orders-content {
        padding: 30px 10px !important;
    }
    
    .filter-tabs {
        gap: 6px !important;
    }
    
    .filter-tab {
        padding: 8px 12px !important;
        font-size: 0.7rem !important;
    }
    
    .order-item-modern {
        border-radius: 12px !important;
    }
    
    .order-header-modern {
        padding: 12px !important;
        gap: 10px !important;
    }
    
    .order-thumbnail-modern {
        width: 50px !important;
        height: 50px !important;
        border-radius: 8px !important;
    }
    
    .order-number-badge {
        font-size: 0.85rem !important;
    }
    
    .status-badge-mini {
        font-size: 0.6rem !important;
        padding: 3px 8px !important;
    }
    
    .order-summary-dropdown {
        padding: 15px !important;
    }
    
    .btn-order-cancel,
    .btn-order-receipt,
    .btn-order-again {
        padding: 10px 20px !important;
        font-size: 0.8rem !important;
    }
    
    /* ==========================================
       RECEIPT PAGE - XS
       ========================================== */
    #receipt-container {
        padding: 10px !important;
    }
    
    .receipt-header {
        padding: 18px 15px !important;
        border-radius: 10px !important;
    }
    
    .receipt-title {
        font-size: 1.3rem !important;
    }
    
    .receipt-title i {
        font-size: 1.1rem !important;
    }
    
    .receipt-number {
        font-size: 0.85rem !important;
    }
    
    .receipt-details-section,
    .address-section,
    .pricing-section {
        padding: 12px !important;
    }
    
    .section-divider {
        font-size: 0.85rem !important;
    }
    
    .info-row {
        padding: 8px 0 !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 4px !important;
    }
    
    .info-label,
    .info-value {
        font-size: 0.8rem !important;
    }
    
    .info-value {
        text-align: left !important;
    }
    
    .pricing-row {
        padding: 10px 12px !important;
        font-size: 0.85rem !important;
    }
    
    .action-buttons {
        flex-direction: column !important;
        gap: 10px !important;
    }
    
    .btn-back,
    .btn-download {
        padding: 10px 16px !important;
        font-size: 0.85rem !important;
    }
    
    /* ==========================================
       PROFILE PAGE - XS
       ========================================== */
    .profile-hero {
        padding: 60px 15px 40px !important;
    }
    
    .profile-avatar {
        width: 80px !important;
        height: 80px !important;
        font-size: 2rem !important;
    }
    
    .profile-name {
        font-size: 1.3rem !important;
    }
    
    .profile-email {
        font-size: 0.85rem !important;
    }
    
    .profile-tabs {
        gap: 5px !important;
    }
    
    .profile-tab {
        padding: 8px 12px !important;
        font-size: 0.75rem !important;
    }
    
    /* ==========================================
       CONTACT PAGE - XS
       ========================================== */
    .contact-cards-grid {
        gap: 15px !important;
    }
    
    .contact-card {
        padding: 20px 15px !important;
    }
    
    .contact-card-icon {
        width: 50px !important;
        height: 50px !important;
        font-size: 1.3rem !important;
    }
    
    .contact-card h3 {
        font-size: 1rem !important;
    }
    
    .contact-card p {
        font-size: 0.8rem !important;
    }
    
    .contact-form-section {
        padding: 30px 15px !important;
    }
    
    /* ==========================================
       BLOG PAGE - XS
       ========================================== */
    .blog-grid {
        gap: 15px !important;
    }
    
    .blog-card {
        border-radius: 12px !important;
    }
    
    .blog-card-body {
        padding: 15px !important;
    }
    
    .blog-card-title {
        font-size: 0.95rem !important;
    }
    
    .blog-card-excerpt {
        font-size: 0.8rem !important;
    }
    
    .blog-card-meta {
        font-size: 0.7rem !important;
    }
    
    /* Blog Post Detail */
    .blog-post-content {
        padding: 20px 15px !important;
    }
    
    .blog-post-title {
        font-size: 1.4rem !important;
    }
    
    .blog-post-body {
        font-size: 0.9rem !important;
    }
    
    /* ==========================================
       ABOUT PAGE - XS
       ========================================== */
    .about-section {
        padding: 30px 15px !important;
    }
    
    .about-title {
        font-size: 1.3rem !important;
    }
    
    .about-text {
        font-size: 0.85rem !important;
    }
    
    .team-member {
        padding: 15px !important;
    }
    
    .team-member-image {
        width: 80px !important;
        height: 80px !important;
    }
    
    .team-member-name {
        font-size: 1rem !important;
    }
    
    .team-member-role {
        font-size: 0.8rem !important;
    }
    
    /* ==========================================
       SPIN & WIN - XS
       ========================================== */
    .spin-wheel-container {
        max-width: 280px !important;
    }
    
    .spin-wheel {
        width: 260px !important;
        height: 260px !important;
    }
    
    .spin-button {
        width: 60px !important;
        height: 60px !important;
        font-size: 0.8rem !important;
    }
    
    /* ==========================================
       MYSTERY BOX / YOUR CARDS - XS
       ========================================== */
    .your-cards-header {
        padding: 40px 15px !important;
    }
    
    .collect-main-text {
        font-size: 1.5rem !important;
    }
    
    .cards-stats-container {
        gap: 15px !important;
    }
    
    .stat-card-animated {
        padding: 20px !important;
        min-width: 140px !important;
        border-radius: 15px !important;
    }
    
    .stat-card-animated .stat-number {
        font-size: 1.8rem !important;
    }
    
    .stat-card-animated .stat-label {
        font-size: 0.75rem !important;
    }
    
    .phase-wrapper {
        width: 240px !important;
        padding: 15px !important;
        border-radius: 15px !important;
    }
    
    .cards-grid {
        max-width: 160px !important;
        gap: 6px !important;
    }
    
    .collection-card {
        height: 36px !important;
        border-radius: 5px !important;
    }
    
    /* Card Dialogues */
    .lock-card-dialogue,
    .collected-card-dialogue,
    .order-card-dialogue,
    .collect-card-dialogue {
        padding: 25px !important;
        max-width: 90% !important;
        border-radius: 20px !important;
    }
    
    /* ==========================================
       GLOBAL DIALOGS - XS
       ========================================== */
    .global-dialog-container {
        max-width: 92% !important;
        border-radius: 18px !important;
    }
    
    .global-dialog-header {
        padding: 20px 15px 18px !important;
    }
    
    .global-dialog-icon-wrapper {
        width: 60px !important;
        height: 60px !important;
        margin-bottom: 12px !important;
    }
    
    .global-dialog-icon-wrapper i {
        font-size: 1.8rem !important;
    }
    
    .global-dialog-title {
        font-size: 1.2rem !important;
    }
    
    .global-dialog-subtitle {
        font-size: 0.8rem !important;
    }
    
    .global-dialog-body {
        padding: 20px 15px !important;
    }
    
    .global-dialog-message {
        font-size: 0.85rem !important;
    }
    
    .global-dialog-actions {
        flex-direction: column !important;
        padding: 0 15px 20px !important;
        gap: 10px !important;
    }
    
    .global-dialog-btn {
        padding: 12px 18px !important;
        font-size: 0.8rem !important;
    }
    
    .global-dialog-close {
        width: 30px !important;
        height: 30px !important;
        top: 12px !important;
        right: 12px !important;
    }
    
    /* ==========================================
       LEARNING ZONE - XS
       ========================================== */
    .learning-zone-section {
        padding: 30px 15px !important;
    }
    
    .module-card {
        padding: 20px 15px !important;
        border-radius: 12px !important;
    }
    
    .module-icon {
        width: 50px !important;
        height: 50px !important;
        font-size: 1.3rem !important;
    }
    
    .module-title {
        font-size: 1rem !important;
    }
    
    .module-progress {
        font-size: 0.75rem !important;
    }
    
    /* ==========================================
       FOOTER - XS
       ========================================== */
    footer,
    .site-footer {
        padding: 30px 15px 20px !important;
    }
    
    .footer-logo {
        height: 35px !important;
    }
    
    .footer-title {
        font-size: 1rem !important;
    }
    
    .footer-links a {
        font-size: 0.8rem !important;
    }
    
    .footer-social a {
        width: 35px !important;
        height: 35px !important;
        font-size: 0.9rem !important;
    }
    
    .footer-bottom {
        font-size: 0.75rem !important;
        padding-top: 15px !important;
    }
    
    /* ==========================================
       MOBILE CART ICON (FIXED) - XS
       ========================================== */
    .mobile-cart-icon {
        bottom: 15px !important;
        right: 15px !important;
    }
    
    .mobile-cart-icon .btn {
        width: 50px !important;
        height: 50px !important;
    }
    
    .mobile-cart-icon .fa-shopping-cart {
        font-size: 1.1rem !important;
    }
    
    .mobile-cart-count {
        width: 20px !important;
        height: 20px !important;
        font-size: 0.7rem !important;
    }
    
    /* ==========================================
       WISHLIST/FAVORITES - XS
       ========================================== */
    .wishlist-item,
    .favorites-item {
        padding: 12px !important;
    }
    
    .wishlist-item-image,
    .favorites-item-image {
        width: 70px !important;
        height: 70px !important;
    }
    
    .wishlist-item-title,
    .favorites-item-title {
        font-size: 0.85rem !important;
    }
    
    /* ==========================================
       CHATBOT WIDGET - XS
       ========================================== */
    .chatbot-widget {
        bottom: 70px !important;
        right: 15px !important;
    }
    
    .chatbot-toggle {
        width: 45px !important;
        height: 45px !important;
    }
    
    .chatbot-window {
        width: calc(100vw - 30px) !important;
        height: 400px !important;
        bottom: 55px !important;
        right: 0 !important;
    }
    
    /* ==========================================
       SLICK CAROUSEL - XS
       ========================================== */
    .slick-prev,
    .slick-next {
        width: 30px !important;
        height: 30px !important;
    }
    
    .slick-prev {
        left: 5px !important;
    }
    
    .slick-next {
        right: 5px !important;
    }
    
    .slick-dots li button:before {
        font-size: 8px !important;
    }
    
    /* ==========================================
       TABLES - XS (Horizontal Scroll)
       ========================================== */
    .table-responsive {
        font-size: 0.75rem !important;
    }
    
    .table th,
    .table td {
        padding: 8px 10px !important;
        font-size: 0.75rem !important;
    }
    
    /* ==========================================
       MODALS - XS
       ========================================== */
    .modal-dialog {
        margin: 10px !important;
    }
    
    .modal-content {
        border-radius: 15px !important;
    }
    
    .modal-header {
        padding: 15px !important;
    }
    
    .modal-title {
        font-size: 1.1rem !important;
    }
    
    .modal-body {
        padding: 15px !important;
    }
    
    .modal-footer {
        padding: 12px 15px !important;
    }
    
    /* ==========================================
       BADGES - XS
       ========================================== */
    .badge {
        font-size: 0.65rem !important;
        padding: 3px 6px !important;
    }
    
    /* ==========================================
       PAGINATION - XS
       ========================================== */
    .pagination {
        gap: 4px !important;
    }
    
    .page-link {
        padding: 6px 10px !important;
        font-size: 0.75rem !important;
    }
    
    /* ==========================================
       BREADCRUMB - XS
       ========================================== */
    .breadcrumb {
        font-size: 0.75rem !important;
        padding: 8px 0 !important;
    }
    
    .breadcrumb-item + .breadcrumb-item::before {
        font-size: 0.7rem !important;
    }
    
}

/* ================================================================
   CRITICAL FIX FOR SHORT HEIGHT DEVICES
   Prevent buttons from overlapping cards
   ================================================================ */

/* Short height AND small width devices - Most critical */
@media (max-width: 480px) and (max-height: 700px) {
    /* Make page scrollable instead of overlapping */
    body {
        min-height: 100vh !important;
        overflow-y: auto !important;
    }
    
    .profile-hero {
        padding: 30px 0 60px !important;
        min-height: auto !important;
    }
    
    .hero-avatar-wrapper {
        width: 70px !important;
        height: 70px !important;
        margin-bottom: 8px !important;
    }
    
    .hero-avatar {
        width: 60px !important;
        height: 60px !important;
        font-size: 24px !important;
    }
    
    .hero-title {
        font-size: 1.1rem !important;
        margin-bottom: 4px !important;
    }
    
    .hero-subtitle {
        font-size: 0.85rem !important;
        margin-bottom: 3px !important;
    }
    
    .hero-email {
        font-size: 0.7rem !important;
        margin-bottom: 6px !important;
    }
    
    .hero-buttons-container {
        margin-top: 8px !important;
        margin-bottom: 50px !important;
        padding-bottom: 10px !important;
        gap: 6px !important;
    }
    
    .hero-delete-affiliate-btn,
    .hero-logout-btn {
        padding: 7px 14px !important;
        font-size: 0.75rem !important;
        gap: 5px !important;
    }
    
    /* Reduce negative margin significantly */
    .profile-stats-section {
        margin-top: -40px !important;
        padding-top: 25px !important;
        padding-bottom: 30px !important;
        min-height: auto !important;
    }
    
    .stats-cards-grid {
        gap: 12px !important;
    }
    
    .stat-card {
        padding: 16px 12px !important;
        min-height: auto !important;
    }
    
    .stat-card-icon {
        width: 48px !important;
        height: 48px !important;
        font-size: 1.2rem !important;
        margin-bottom: 8px !important;
    }
    
    .stat-card-count {
        font-size: 1.5rem !important;
        margin-bottom: 3px !important;
    }
    
    .stat-card-label {
        font-size: 0.8rem !important;
    }
}
    
    .hero-avatar-wrapper {
        width: 80px !important;
        height: 80px !important;
        margin-bottom: 10px !important;
    }
    
    .hero-avatar {
        width: 68px !important;
        height: 68px !important;
        font-size: 28px !important;
    }
    
    .hero-title {
        font-size: 1.2rem !important;
        margin-bottom: 6px !important;
    }
    
    .hero-subtitle {
        font-size: 0.9rem !important;
        margin-bottom: 4px !important;
    }
    
    .hero-email {
        font-size: 0.75rem !important;
        margin-bottom: 8px !important;
    }
    
    .hero-buttons-container {
        margin-top: 10px !important;
        margin-bottom: 40px !important;
        gap: 8px !important;
    }
    
    .hero-delete-affiliate-btn,
    .hero-logout-btn {
        padding: 8px 16px !important;
        font-size: 0.8rem !important;
        gap: 6px !important;
    }
    
    /* Reduce negative margin on stats section */
    .profile-stats-section {
        margin-top: -50px !important;
        padding-top: 20px !important;
        padding-bottom: 30px !important;
    }
    
    .stats-cards-grid {
        gap: 12px !important;
    }
    
    .stat-card {
        padding: 18px 15px !important;
    }
    
    .stat-card-icon {
        width: 50px !important;
        height: 50px !important;
        font-size: 1.3rem !important;
        margin-bottom: 10px !important;
    }
    
    .stat-card-count {
        font-size: 1.6rem !important;
        margin-bottom: 4px !important;
    }
    
    .stat-card-label {
        font-size: 0.85rem !important;
    }
}

/* Very short devices - extreme compression */
@media (max-width: 480px) and (max-height: 600px) {
    .profile-hero {
        padding: 30px 0 60px !important;
    }
    
    .hero-avatar-wrapper {
        width: 70px !important;
        height: 70px !important;
        margin-bottom: 8px !important;
    }
    
    .hero-avatar {
        width: 58px !important;
        height: 58px !important;
        font-size: 24px !important;
    }
    
    .hero-title {
        font-size: 1.1rem !important;
        margin-bottom: 4px !important;
    }
    
    .hero-subtitle {
        font-size: 0.85rem !important;
        margin-bottom: 3px !important;
    }
    
    .hero-email {
        font-size: 0.7rem !important;
        margin-bottom: 6px !important;
    }
    
    .hero-buttons-container {
        margin-top: 8px !important;
        margin-bottom: 30px !important;
        gap: 6px !important;
    }
    
    .hero-delete-affiliate-btn,
    .hero-logout-btn {
        padding: 6px 12px !important;
        font-size: 0.75rem !important;
        gap: 4px !important;
    }
    
    .profile-stats-section {
        margin-top: -40px !important;
        padding-top: 15px !important;
        padding-bottom: 25px !important;
    }
    
    .stats-cards-grid {
        gap: 10px !important;
    }
    
    .stat-card {
        padding: 15px 12px !important;
    }
    
    .stat-card-icon {
        width: 45px !important;
        height: 45px !important;
        font-size: 1.2rem !important;
        margin-bottom: 8px !important;
    }
    
    .stat-card-count {
        font-size: 1.4rem !important;
        margin-bottom: 3px !important;
    }
    
    .stat-card-label {
        font-size: 0.8rem !important;
    }
}

/* Extremely short screens (landscape small phones) */
@media (max-width: 896px) and (max-height: 450px) and (orientation: landscape) {
    .profile-hero {
        padding: 20px 0 40px !important;
    }
    
    .hero-avatar-wrapper {
        width: 60px !important;
        height: 60px !important;
        margin-bottom: 6px !important;
    }
    
    .hero-avatar {
        width: 50px !important;
        height: 50px !important;
        font-size: 20px !important;
    }
    
    .hero-title {
        font-size: 1rem !important;
        margin-bottom: 3px !important;
    }
    
    .hero-subtitle {
        font-size: 0.8rem !important;
        margin-bottom: 2px !important;
    }
    
    .hero-email {
        font-size: 0.65rem !important;
        margin-bottom: 5px !important;
    }
    
    .hero-buttons-container {
        margin-top: 5px !important;
        margin-bottom: 20px !important;
        gap: 5px !important;
    }
    
    .hero-delete-affiliate-btn,
    .hero-logout-btn {
        padding: 5px 10px !important;
        font-size: 0.7rem !important;
        gap: 3px !important;
    }
    
    .profile-stats-section {
        margin-top: -30px !important;
        padding-top: 10px !important;
        padding-bottom: 20px !important;
    }
    
    .stats-cards-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
    }
    
    .stat-card {
        padding: 12px 8px !important;
    }
    
    .stat-card-icon {
        width: 40px !important;
        height: 40px !important;
        font-size: 1.1rem !important;
        margin-bottom: 6px !important;
    }
    
    .stat-card-count {
        font-size: 1.2rem !important;
        margin-bottom: 2px !important;
    }
    
    .stat-card-label {
        font-size: 0.7rem !important;
    }
}


/* ================================================================
   EXTREME SHORT DEVICES - NO OVERLAP GUARANTEE
   Cards must start BELOW header, not overlapping
   ================================================================ */
@media (max-width: 576px) and (max-height: 750px) {
    /* Ensure hero ends completely before stats begin */
    .profile-hero {
        margin-bottom: 0 !important;
        padding-bottom: 20px !important;
    }
    
    /* Stats section starts AFTER hero, not overlapping */
    .profile-stats-section {
        margin-top: 0 !important;
        padding-top: 15px !important;
        background: white !important;
        position: relative !important;
        z-index: 10 !important;
    }
}

@media (max-width: 480px) and (max-height: 650px) {
    .profile-hero {
        padding: 20px 0 15px !important;
    }
    
    .hero-avatar-wrapper {
        width: 55px !important;
        height: 55px !important;
        margin-bottom: 5px !important;
    }
    
    .hero-avatar {
        width: 48px !important;
        height: 48px !important;
        font-size: 18px !important;
    }
    
    .hero-title {
        font-size: 0.9rem !important;
        margin-bottom: 2px !important;
    }
    
    .hero-subtitle {
        font-size: 0.7rem !important;
        margin-bottom: 2px !important;
    }
    
    .hero-email {
        font-size: 0.6rem !important;
    }
    
    .hero-buttons-container {
        margin-top: 6px !important;
        margin-bottom: 12px !important;
        gap: 5px !important;
    }
    
    .hero-delete-affiliate-btn,
    .hero-logout-btn {
        padding: 5px 10px !important;
        font-size: 0.65rem !important;
    }
    
    .profile-stats-section {
        margin-top: 0 !important;
        padding-top: 10px !important;
    }
    
    .stat-card {
        padding: 14px 10px !important;
    }
    
    .stat-card-icon {
        width: 42px !important;
        height: 42px !important;
        font-size: 1.1rem !important;
        margin-bottom: 6px !important;
    }
    
    .stat-card-count {
        font-size: 1.4rem !important;
    }
    
    .stat-card-label {
        font-size: 0.75rem !important;
    }
    
    /* ==========================================
       NAVIGATION GUIDE - EXTRA SMALL DEVICES
       ========================================== */
    .nav-guide-hero {
        padding: 30px 0 45px !important;
    }
    
    .nav-guide-icon {
        width: 50px !important;
        height: 50px !important;
        margin-bottom: 12px !important;
    }
    
    .nav-guide-icon i {
        font-size: 1.2rem !important;
    }
    
    .nav-guide-title {
        font-size: 1.4rem !important;
        margin-bottom: 8px !important;
    }
    
    .nav-guide-subtitle {
        font-size: 0.8rem !important;
        margin-bottom: 20px !important;
    }
    
    .nav-guide-search-input {
        padding: 10px 40px 10px 40px !important;
        font-size: 0.85rem !important;
    }
    
    .nav-guide-section-header {
        padding: 8px 10px !important;
        margin-bottom: 12px !important;
    }
    
    .nav-guide-section-icon {
        width: 26px !important;
        height: 26px !important;
    }
    
    .nav-guide-section-icon i {
        font-size: 0.75rem !important;
    }
    
    .nav-guide-section-title {
        font-size: 0.85rem !important;
    }
    
    .nav-guide-cards-grid {
        gap: 10px !important;
    }
    
    .nav-guide-card {
        padding: 14px !important;
    }
    
    .nav-guide-card-top {
        gap: 6px !important;
        margin-bottom: 8px !important;
    }
    
    .nav-guide-card-icon {
        width: 24px !important;
        height: 24px !important;
        min-width: 24px !important;
    }
    
    .nav-guide-card-icon i {
        font-size: 0.7rem !important;
    }
    
    .nav-guide-card-title {
        font-size: 0.75rem !important;
    }
    
    .nav-guide-card-description {
        font-size: 0.68rem !important;
        line-height: 1.4 !important;
    }
    
    .nav-guide-card-action {
        padding: 4px 7px !important;
        font-size: 0.6rem !important;
    }
    
    .nav-guide-card-action i {
        font-size: 0.55rem !important;
    }
}

/* ================================================================
   EXTREME SMALL DEVICES - 320px and below
   Ultra compact styling for the smallest devices
   ================================================================ */
@media (max-width: 320px) {
    
    /* ==========================================
       GLOBAL TYPOGRAPHY - ULTRA SMALL
       ========================================== */
    html {
        font-size: 12px;
    }
    
    body {
        font-size: 0.8rem;
        line-height: 1.4;
    }
    
    h1 { font-size: 1.2rem !important; }
    h2 { font-size: 1.1rem !important; }
    h3 { font-size: 1rem !important; }
    h4 { font-size: 0.9rem !important; }
    h5 { font-size: 0.8rem !important; }
    h6 { font-size: 0.75rem !important; }
    
    p {
        font-size: 0.75rem !important;
        line-height: 1.4 !important;
    }
    
    .container {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
    
    /* ==========================================
       NAVBAR - ULTRA COMPACT
       ========================================== */
    .navbar {
        padding: 6px 0 !important;
    }
    
    .navbar .container {
        padding-left: 6px !important;
        padding-right: 6px !important;
    }
    
    .navbar-brand {
        font-size: 0.8rem !important;
    }
    
    .navbar-brand img {
        height: 26px !important;
    }
    
    .logo-circle {
        width: 28px !important;
        height: 28px !important;
        font-size: 12px !important;
    }
    
    .signup-btn {
        padding: 4px 8px !important;
        font-size: 0.65rem !important;
        gap: 3px !important;
    }
    
    .user-avatar-circle {
        width: 24px !important;
        height: 24px !important;
        font-size: 10px !important;
    }
    
    #cart-count, #mobile-cart-count {
        font-size: 0.5rem !important;
        padding: 0px 3px !important;
        min-width: 12px !important;
        height: 12px !important;
    }
    
    /* ==========================================
       ALL HERO SECTIONS - ULTRA COMPACT
       ========================================== */
    .hero-section,
    .shop-hero,
    .page-hero,
    .contact-hero,
    .about-hero,
    .blog-hero,
    .profile-hero,
    .learning-hero,
    .orders-hero,
    .checkout-hero {
        padding: 30px 8px 50px !important;
        min-height: auto !important;
    }
    
    .hero-title,
    .shop-title,
    .page-title,
    .profile-title,
    .learning-hero-title,
    .orders-hero h1,
    .checkout-title {
        font-size: 1.1rem !important;
        line-height: 1.2 !important;
        margin-bottom: 5px !important;
    }
    
    .hero-subtitle,
    .shop-subtitle,
    .page-subtitle,
    .profile-subtitle,
    .learning-hero-subtitle {
        font-size: 0.7rem !important;
        line-height: 1.3 !important;
        margin-bottom: 5px !important;
    }
    
    .hero-avatar-wrapper,
    .shop-avatar-wrapper,
    .profile-avatar-wrapper {
        width: 60px !important;
        height: 60px !important;
        margin-bottom: 10px !important;
    }
    
    .hero-avatar,
    .shop-avatar,
    .profile-avatar {
        width: 50px !important;
        height: 50px !important;
        font-size: 22px !important;
    }
    
    .hero-icon,
    .learning-hero-icon {
        width: 45px !important;
        height: 45px !important;
        margin-bottom: 8px !important;
    }
    
    .hero-icon i,
    .learning-hero-icon i {
        font-size: 1.3rem !important;
    }
    
    /* Hero buttons and badges */
    .hero-btn,
    .btn-hero,
    .hero-delete-affiliate-btn,
    .hero-logout-btn {
        padding: 5px 10px !important;
        font-size: 0.65rem !important;
        gap: 3px !important;
    }
    
    .shop-status-hero,
    .count-badge-hero {
        font-size: 0.65rem !important;
        padding: 3px 8px !important;
    }
    
    /* ==========================================
       STATS/CARDS SECTIONS - ULTRA COMPACT
       ========================================== */
    .shop-stats-section,
    .profile-stats-section,
    .orders-stats-section {
        margin-top: -50px !important;
        padding-bottom: 15px !important;
    }
    
    .shop-cards-grid,
    .stats-cards-grid,
    .profile-cards-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
        padding: 0 8px !important;
    }
    
    .shop-stat-card,
    .stat-card,
    .profile-card {
        padding: 15px 10px !important;
        border-radius: 12px !important;
        min-height: 120px !important;
    }
    
    .shop-card-icon,
    .stat-card-icon,
    .profile-card-icon {
        width: 35px !important;
        height: 35px !important;
        font-size: 1rem !important;
        margin-bottom: 8px !important;
        border-radius: 10px !important;
    }
    
    .shop-card-count,
    .stat-card-count,
    .profile-card-count {
        font-size: 1.2rem !important;
        margin-bottom: 4px !important;
    }
    
    .shop-card-label,
    .stat-card-label,
    .profile-card-label {
        font-size: 0.65rem !important;
        line-height: 1.2 !important;
    }
    
    /* ==========================================
       PRODUCT CARDS - ULTRA COMPACT
       ========================================== */
    .products-grid,
    .product-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }
    
    .product-card,
    .product-card-modern {
        border-radius: 10px !important;
    }
    
    .product-image,
    .product-card-image {
        height: 120px !important;
        border-radius: 10px 10px 0 0 !important;
    }
    
    .product-info,
    .product-card-info {
        padding: 8px !important;
    }
    
    .product-name,
    .product-card-title {
        font-size: 0.7rem !important;
        line-height: 1.2 !important;
        margin-bottom: 4px !important;
        min-height: 28px !important;
    }
    
    .product-price,
    .product-card-price {
        font-size: 0.85rem !important;
        margin-bottom: 4px !important;
    }
    
    .product-category,
    .category-badge {
        font-size: 0.6rem !important;
        padding: 2px 6px !important;
    }
    
    .add-to-cart-btn,
    .btn-add-to-cart {
        padding: 6px 10px !important;
        font-size: 0.65rem !important;
        gap: 3px !important;
    }
    
    .favorite-btn,
    .wishlist-btn {
        width: 28px !important;
        height: 28px !important;
        font-size: 0.7rem !important;
    }
    
    /* ==========================================
       FORMS - ULTRA COMPACT
       ========================================== */
    .form-group {
        margin-bottom: 12px !important;
    }
    
    .form-group label {
        font-size: 0.7rem !important;
        margin-bottom: 5px !important;
    }
    
    .form-control,
    .form-control-shop,
    .form-control-settings,
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    textarea,
    select {
        padding: 8px 10px !important;
        font-size: 0.75rem !important;
        border-radius: 8px !important;
    }
    
    textarea {
        min-height: 80px !important;
    }
    
    .btn,
    .btn-primary,
    .btn-secondary,
    .btn-save,
    .btn-shop-primary {
        padding: 8px 15px !important;
        font-size: 0.7rem !important;
        border-radius: 8px !important;
    }
    
    /* ==========================================
       SEARCH BOXES - ULTRA COMPACT
       ========================================== */
    .search-container,
    .search-box,
    .search-wrapper {
        margin-bottom: 12px !important;
    }
    
    .search-input,
    .search-input-manage,
    .search-input-modern {
        padding: 8px 35px 8px 10px !important;
        font-size: 0.7rem !important;
        border-radius: 8px !important;
    }
    
    .search-btn,
    .search-btn-modern {
        width: 30px !important;
        height: 30px !important;
        font-size: 0.7rem !important;
    }
    
    /* ==========================================
       FILTERS - ULTRA COMPACT
       ========================================== */
    .filters-row,
    .shop-filters {
        gap: 4px !important;
        margin-bottom: 10px !important;
        padding: 4px !important;
    }
    
    .filter-dropdown-wrapper {
        flex: 0 1 47% !important;
        min-width: 0 !important;
        max-width: 47% !important;
        width: 47% !important;
    }
    
    .dropdown-selected {
        padding: 4px 5px !important;
        font-size: 0.58rem !important;
        border-radius: 6px !important;
        height: 26px !important;
        line-height: 1.2 !important;
        border: 1px solid #e2e8f0 !important;
    }
    
    .dropdown-arrow {
        font-size: 0.45rem !important;
        margin-left: 2px !important;
    }
    
    .dropdown-option {
        padding: 4px 5px !important;
        font-size: 0.58rem !important;
    }
    
    .clear-all-filters-btn {
        width: 32px !important;
        height: 32px !important;
        font-size: 0.7rem !important;
    }
    
    /* ==========================================
       TABLES - ULTRA COMPACT
       ========================================== */
    table {
        font-size: 0.7rem !important;
    }
    
    th, td {
        padding: 6px 4px !important;
    }
    
    /* ==========================================
       MODALS/DIALOGS - ULTRA COMPACT
       ========================================== */
    .global-dialog-container,
    .modal-content {
        max-width: 95% !important;
        padding: 15px !important;
        border-radius: 12px !important;
    }
    
    .global-dialog-title,
    .modal-title {
        font-size: 1rem !important;
    }
    
    .global-dialog-message,
    .modal-body {
        font-size: 0.7rem !important;
    }
    
    .global-dialog-btn,
    .modal-footer .btn {
        padding: 8px 12px !important;
        font-size: 0.65rem !important;
    }
    
    /* ==========================================
       BADGES & LABELS - ULTRA COMPACT
       ========================================== */
    .badge,
    .status-badge,
    .label {
        padding: 2px 6px !important;
        font-size: 0.6rem !important;
        border-radius: 6px !important;
    }
    
    /* ==========================================
       CART & WISHLIST - ULTRA COMPACT
       ========================================== */
    .cart-item,
    .wishlist-item {
        padding: 10px !important;
        gap: 8px !important;
    }
    
    .cart-item-image,
    .wishlist-item-image {
        width: 60px !important;
        height: 60px !important;
    }
    
    .cart-item-name,
    .wishlist-item-name {
        font-size: 0.7rem !important;
    }
    
    .cart-item-price,
    .wishlist-item-price {
        font-size: 0.8rem !important;
    }
    
    .quantity-selector {
        gap: 4px !important;
    }
    
    .quantity-btn {
        width: 24px !important;
        height: 24px !important;
        font-size: 0.7rem !important;
    }
    
    .quantity-input {
        width: 35px !important;
        font-size: 0.7rem !important;
        padding: 3px !important;
    }
    
    /* ==========================================
       ORDERS - ULTRA COMPACT
       ========================================== */
    .order-item,
    .order-item-modern {
        padding: 10px !important;
        border-radius: 10px !important;
    }
    
    .order-header,
    .order-header-modern {
        gap: 8px !important;
    }
    
    .order-thumbnail,
    .order-thumbnail-modern {
        width: 50px !important;
        height: 50px !important;
    }
    
    .order-number,
    .order-number-badge {
        font-size: 0.7rem !important;
    }
    
    .order-details {
        font-size: 0.65rem !important;
    }
    
    .status-badge-mini {
        font-size: 0.55rem !important;
        padding: 2px 6px !important;
    }
    
    .btn-order-cancel,
    .btn-order-receipt,
    .btn-order-again {
        padding: 8px 12px !important;
        font-size: 0.65rem !important;
        gap: 3px !important;
    }
    
    /* ==========================================
       BLOG/ANNOUNCEMENTS - ULTRA COMPACT
       ========================================== */
    .blog-card,
    .announcement-card {
        border-radius: 10px !important;
    }
    
    .blog-image,
    .announcement-image {
        height: 120px !important;
    }
    
    .blog-content,
    .announcement-content {
        padding: 10px !important;
    }
    
    .blog-title,
    .announcement-title {
        font-size: 0.8rem !important;
        margin-bottom: 5px !important;
    }
    
    .blog-excerpt,
    .announcement-excerpt {
        font-size: 0.65rem !important;
        line-height: 1.3 !important;
    }
    
    .blog-meta,
    .announcement-meta {
        font-size: 0.6rem !important;
    }
    
    .read-more-btn {
        padding: 5px 10px !important;
        font-size: 0.65rem !important;
    }
    
    /* ==========================================
       PROFILE/SETTINGS - ULTRA COMPACT
       ========================================== */
    .settings-card,
    .profile-section {
        padding: 15px !important;
        border-radius: 12px !important;
    }
    
    .section-title {
        font-size: 0.9rem !important;
        margin-bottom: 10px !important;
    }
    
    .info-row {
        padding: 6px 0 !important;
        gap: 6px !important;
    }
    
    .info-label {
        font-size: 0.65rem !important;
    }
    
    .info-value {
        font-size: 0.7rem !important;
    }
    
    /* ==========================================
       FOOTER - ULTRA COMPACT
       ========================================== */
    footer {
        padding: 15px 8px !important;
    }
    
    .footer-content {
        font-size: 0.65rem !important;
    }
    
    .footer-links a {
        font-size: 0.65rem !important;
        padding: 3px 0 !important;
    }
    
    .social-icons a {
        width: 28px !important;
        height: 28px !important;
        font-size: 0.7rem !important;
    }
    
    /* ==========================================
       LEARNING ZONE - ULTRA COMPACT
       ========================================== */
    .modules-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    
    .module-card {
        padding: 12px !important;
        border-radius: 12px !important;
    }
    
    .module-header {
        padding: 10px !important;
        gap: 8px !important;
    }
    
    .module-number {
        width: 35px !important;
        height: 35px !important;
        font-size: 0.9rem !important;
    }
    
    .module-title {
        font-size: 0.8rem !important;
    }
    
    .module-stats {
        gap: 5px !important;
    }
    
    .module-stat {
        padding: 8px 6px !important;
    }
    
    .module-stat-value {
        font-size: 0.9rem !important;
    }
    
    .module-stat-label {
        font-size: 0.6rem !important;
    }
    
    /* ==========================================
       AFFILIATE - ULTRA COMPACT
       ========================================== */
    .affiliate-card {
        padding: 12px !important;
        border-radius: 12px !important;
    }
    
    .affiliate-header {
        gap: 8px !important;
        margin-bottom: 8px !important;
    }
    
    .affiliate-icon {
        width: 35px !important;
        height: 35px !important;
        font-size: 0.9rem !important;
    }
    
    .affiliate-title {
        font-size: 0.8rem !important;
    }
    
    .affiliate-value {
        font-size: 1rem !important;
    }
    
    .affiliate-label {
        font-size: 0.65rem !important;
    }
    
    /* ==========================================
       NAVIGATION GUIDE - ULTRA COMPACT
       ========================================== */
    .nav-guide-card {
        padding: 10px !important;
        border-radius: 10px !important;
    }
    
    .nav-guide-card-icon {
        width: 20px !important;
        height: 20px !important;
        min-width: 20px !important;
    }
    
    .nav-guide-card-icon i {
        font-size: 0.6rem !important;
    }
    
    .nav-guide-card-title {
        font-size: 0.65rem !important;
    }
    
    .nav-guide-card-description {
        font-size: 0.6rem !important;
    }
    
    .nav-guide-card-action {
        padding: 3px 6px !important;
        font-size: 0.55rem !important;
    }
    
    /* ==========================================
       MYSTERY BOX/CARDS - ULTRA COMPACT
       ========================================== */
    .cards-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 5px !important;
    }
    
    .collection-card {
        width: 100% !important;
        height: 35px !important;
        border-radius: 5px !important;
    }
    
    .phase-wrapper {
        width: 220px !important;
        padding: 12px !important;
        border-radius: 12px !important;
    }
    
    .phase-header {
        font-size: 0.75rem !important;
        margin-bottom: 8px !important;
    }
    
    /* ==========================================
       CHECKOUT - ULTRA COMPACT
       ========================================== */
    .checkout-card {
        border-radius: 12px !important;
    }
    
    .card-header {
        padding: 12px 15px !important;
        font-size: 0.8rem !important;
    }
    
    .checkout-item {
        padding: 8px !important;
        gap: 8px !important;
    }
    
    .checkout-item-image {
        width: 50px !important;
        height: 50px !important;
    }
    
    .checkout-item-name {
        font-size: 0.7rem !important;
    }
    
    .checkout-item-price {
        font-size: 0.75rem !important;
    }
    
    .order-summary-row {
        padding: 6px 0 !important;
        font-size: 0.7rem !important;
    }
    
    .order-total {
        font-size: 0.9rem !important;
        padding: 8px 0 !important;
    }
    
    .payment-method {
        padding: 10px !important;
        border-radius: 8px !important;
    }
    
    .payment-method-title {
        font-size: 0.7rem !important;
    }
    
    .place-order-btn {
        padding: 10px 20px !important;
        font-size: 0.75rem !important;
    }
    
    /* ==========================================
       SPIN AND WIN - ULTRA COMPACT
       ========================================== */
    .spin-wheel {
        width: 220px !important;
        height: 220px !important;
    }
    
    .spin-btn {
        width: 60px !important;
        height: 60px !important;
        font-size: 0.7rem !important;
    }
    
    .prize-display {
        font-size: 0.8rem !important;
        padding: 8px 12px !important;
    }
    
    /* ==========================================
       ALERTS & NOTIFICATIONS - ULTRA COMPACT
       ========================================== */
    .alert,
    .alert-shop,
    .notification {
        padding: 8px 10px !important;
        font-size: 0.7rem !important;
        border-radius: 8px !important;
    }
    
    .alert i {
        font-size: 0.8rem !important;
    }
    
    /* ==========================================
       PAGINATION - ULTRA COMPACT
       ========================================== */
    .pagination {
        gap: 4px !important;
    }
    
    .pagination .page-link {
        padding: 5px 8px !important;
        font-size: 0.65rem !important;
        min-width: 28px !important;
    }
    
    /* ==========================================
       BREADCRUMBS - ULTRA COMPACT
       ========================================== */
    .breadcrumb {
        font-size: 0.65rem !important;
        padding: 6px 10px !important;
    }
    
    .breadcrumb-item + .breadcrumb-item::before {
        font-size: 0.6rem !important;
    }
}