@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&family=Inter:wght@300;400;500;600;700;800&display=swap');

:root {
    /* Brand Palette variables */
    --qk-orange: #FF5A1F;
    --qk-orange-dark: #E64912;
    --qk-blue: #0D47C9;
    --qk-blue-dark: #0A2F7A;
    --qk-orange-soft: #FFF2EC;
    --qk-blue-soft: #EEF4FF;
    --qk-text: #18212B;
    --qk-bg: #F7F8FB;
    --qk-card: #FFFFFF;

    /* Semantic Status colors (In Stock green, Danger red, Warning yellow/orange, Info blue) */
    --qk-green: #10b981;
    --qk-green-hover: #059669;
    --qk-green-gradient: linear-gradient(135deg, #10b981 0%, #059669 100%);
    --qk-yellow: #f59e0b;
    --qk-yellow-gradient: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    --qk-aqua: #0D47C9;
    --qk-aqua-gradient: linear-gradient(135deg, #0D47C9 0%, #0A2F7A 100%);
    --qk-coral: #f43f5e;
    --qk-coral-gradient: linear-gradient(135deg, #f43f5e 0%, #e11d48 100%);

    --qk-dark: var(--qk-text);
    --qk-dark-light: #24303f;
    --qk-muted: #8a97a0;
    --border-color: #e8ecf0;
    
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-xl: 32px;
    
    --shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.04), 0 2px 4px -1px rgba(0, 0, 0, 0.02);
    --shadow-md: 0 10px 20px -5px rgba(255, 90, 31, 0.06), 0 8px 16px -6px rgba(0, 0, 0, 0.04);
    --shadow-lg: 0 20px 25px -5px rgba(24, 33, 43, 0.08), 0 10px 10px -5px rgba(24, 33, 43, 0.03);
    
    --font: 'Outfit', 'Inter', -apple-system, sans-serif;
    --transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font);
    background-color: var(--qk-bg);
    color: var(--qk-dark);
    line-height: 1.5;
    padding-bottom: 80px; /* Space for bottom mobile nav */
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition);
}

button, input, select, textarea {
    font-family: inherit;
    border: none;
    outline: none;
}

/* Typography Utilities */
h1, h2, h3, h4, h5, h6 {
    font-weight: 800;
    color: var(--qk-dark);
    letter-spacing: -0.5px;
}

.text-muted {
    color: var(--qk-muted);
    font-size: 0.9rem;
    font-family: 'Inter', sans-serif;
}

.badge {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.badge-success { background-color: rgba(3, 199, 90, 0.12); color: var(--qk-green); }
.badge-warning { background-color: rgba(247, 207, 0, 0.15); color: #c49a00; }
.badge-info { background-color: rgba(2, 170, 176, 0.12); color: var(--qk-aqua); }
.badge-danger { background-color: rgba(255, 81, 47, 0.12); color: var(--qk-coral); }

/* Layout Containers */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Custom Scrollbars */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: var(--qk-bg);
}
::-webkit-scrollbar-thumb {
    background: #dcdde1;
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--qk-muted);
}

/* Keyframe Animations */
@keyframes float {
    0% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-12px) rotate(4deg); }
    100% { transform: translateY(0px) rotate(0deg); }
}

@keyframes waveMove {
    0% { transform: translateX(0); }
    50% { transform: translateX(-25%); }
    100% { transform: translateX(-50%); }
}

@keyframes pulse {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(3, 199, 90, 0.4); }
    70% { transform: scale(1.05); box-shadow: 0 0 0 8px rgba(3, 199, 90, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(3, 199, 90, 0); }
}

@keyframes bounceCart {
    0% { transform: scale(1); }
    30% { transform: scale(1.22); }
    50% { transform: scale(0.92); }
    70% { transform: scale(1.08); }
    100% { transform: scale(1); }
}

@keyframes slideUp {
    from { transform: translateY(40px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

@keyframes fadeInUp {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* Animations Classes */
.animate-float {
    animation: float 4s ease-in-out infinite;
}
.animate-pulse-green {
    animation: pulse 2s infinite;
}
.bounce-active {
    animation: bounceCart 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Header & Glassmorphic Navigation */
.header-glass {
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}

.nav-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 80px;
}

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.7rem;
    font-weight: 900;
    color: var(--qk-orange);
    background: linear-gradient(135deg, var(--qk-orange) 0%, var(--qk-orange-dark) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.logo-icon {
    font-size: 2rem;
    background: none;
    -webkit-text-fill-color: initial;
    filter: drop-shadow(0 4px 6px rgba(255, 90, 31, 0.15));
}

.nav-location {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(13, 71, 201, 0.06);
    padding: 10px 18px;
    border-radius: var(--radius-md);
    cursor: pointer;
    border: 1px solid rgba(13, 71, 201, 0.1);
    transition: var(--transition);
}

.nav-location:hover {
    background: rgba(13, 71, 201, 0.1);
    transform: translateY(-1px);
}

.nav-location select {
    background: transparent;
    font-weight: 700;
    color: var(--qk-blue);
    font-size: 0.95rem;
    cursor: pointer;
}

.nav-search {
    flex-grow: 1;
    max-width: 480px;
    margin: 0 24px;
    position: relative;
}

.search-input {
    width: 100%;
    background: var(--qk-bg);
    padding: 14px 20px 14px 48px;
    border-radius: var(--radius-md);
    font-size: 0.95rem;
    font-weight: 500;
    border: 2px solid transparent;
    transition: var(--transition);
}

.search-input:focus {
    background: var(--qk-card);
    border-color: var(--qk-orange);
    box-shadow: 0 8px 20px -5px rgba(255, 90, 31, 0.15);
}

.search-icon {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--qk-muted);
    font-size: 1.1rem;
    transition: var(--transition);
}

.search-input:focus + .search-icon {
    color: var(--qk-orange);
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Premium Buttons Styling */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 28px;
    border-radius: var(--radius-md);
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    transition: var(--transition);
}

.btn-primary {
    background: linear-gradient(135deg, var(--qk-orange) 0%, var(--qk-orange-dark) 100%);
    color: var(--qk-card);
    box-shadow: 0 6px 20px -4px rgba(255, 90, 31, 0.35);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px -3px rgba(255, 90, 31, 0.5);
}

.btn-primary:active {
    transform: translateY(0);
}

.btn-secondary {
    background: linear-gradient(135deg, var(--qk-blue) 0%, var(--qk-blue-dark) 100%);
    color: var(--qk-card);
    box-shadow: 0 6px 20px -4px rgba(13, 71, 201, 0.3);
}

.btn-secondary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px -3px rgba(13, 71, 201, 0.45);
}

.btn-outline {
    background: transparent;
    border: 2px solid var(--qk-blue);
    color: var(--qk-blue);
}

.btn-outline:hover {
    background: rgba(13, 71, 201, 0.05);
    transform: translateY(-2px);
}

.btn-cart {
    background: var(--qk-dark);
    color: var(--qk-card);
    padding: 12px 24px;
    border-radius: var(--radius-md);
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: var(--shadow-sm);
}

.btn-cart:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.btn-cart .cart-price {
    border-left: 1px solid rgba(255, 255, 255, 0.2);
    padding-left: 14px;
    color: var(--qk-orange);
}

/* Premium Homepage Hero Banner with Waves & Floating Emojis */
.hero-banner {
    background: linear-gradient(135deg, rgba(13, 71, 201, 0.05) 0%, rgba(255, 90, 31, 0.04) 50%, rgba(13, 71, 201, 0.02) 100%);
    border-radius: var(--radius-lg);
    padding: 60px 48px 80px;
    margin: 24px 0 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(13, 71, 201, 0.08);
    box-shadow: var(--shadow-sm);
}

.hero-text {
    max-width: 55%;
    position: relative;
    z-index: 5;
}

.hero-delivery-promise {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, var(--qk-orange) 0%, var(--qk-orange-dark) 100%);
    color: var(--qk-card);
    padding: 8px 18px;
    border-radius: 50px;
    font-weight: 800;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 24px;
    box-shadow: 0 4px 10px rgba(255, 90, 31, 0.25);
}

.hero-text h1 {
    font-size: 3.4rem;
    line-height: 1.15;
    margin-bottom: 18px;
    background: linear-gradient(135deg, var(--qk-dark) 40%, var(--qk-orange) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-text p {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 1.15rem;
    color: #4b5563;
    margin-bottom: 30px;
}

.hero-image {
    max-width: 38%;
    position: relative;
    z-index: 5;
    display: flex;
    justify-content: center;
}

.hero-image .mock-img {
    font-size: 11rem;
    filter: drop-shadow(0 15px 30px rgba(3, 199, 90, 0.15));
    animation: float 5s ease-in-out infinite;
}

/* Floating Groceries Particles */
.floating-item {
    position: absolute;
    font-size: 2.2rem;
    z-index: 4;
    user-select: none;
    pointer-events: none;
    filter: drop-shadow(0 6px 12px rgba(0,0,0,0.06));
}

.float-1 { top: 15%; left: 10%; animation: float 6s ease-in-out infinite; }
.float-2 { top: 50%; left: 8%; animation: float 4.5s ease-in-out infinite 1s; }
.float-3 { top: 10%; right: 42%; animation: float 5.5s ease-in-out infinite 0.5s; }
.float-4 { top: 75%; right: 45%; animation: float 5s ease-in-out infinite 1.5s; }
.float-5 { top: 25%; right: 12%; animation: float 6.5s ease-in-out infinite 2s; }
.float-6 { top: 60%; right: 10%; animation: float 4.8s ease-in-out infinite 0.8s; }

/* Maldives Ocean Waves SVG base styling */
.hero-waves {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    width: 200%;
    height: 40px;
    z-index: 3;
    opacity: 0.9;
}

.wave-graphic {
    width: 100%;
    height: 100%;
    fill: var(--qk-bg);
    animation: waveMove 20s linear infinite;
}

/* Category grid & Lift layout */
.section-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.section-title h2 {
    font-size: 1.8rem;
    font-weight: 800;
    position: relative;
    padding-left: 16px;
}

.section-title h2::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 26px;
    background: linear-gradient(135deg, var(--qk-blue) 0%, var(--qk-blue-dark) 100%);
    border-radius: 4px;
}

.category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 20px;
    margin-bottom: 48px;
}

.category-card {
    background: var(--qk-card);
    padding: 28px 20px;
    border-radius: var(--radius-lg);
    text-align: center;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    position: relative;
    overflow: hidden;
}

.category-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: transparent;
    transition: var(--transition);
}

.category-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-md);
    border-color: rgba(3, 199, 90, 0.15);
}

.category-card:nth-child(1):hover::after { background: var(--qk-green); }
.category-card:nth-child(2):hover::after { background: var(--qk-aqua); }
.category-card:nth-child(3):hover::after { background: var(--qk-yellow); }
.category-card:nth-child(4):hover::after { background: var(--qk-coral); }
.category-card:nth-child(5):hover::after { background: var(--qk-green); }

.category-icon {
    font-size: 3.2rem;
    width: 80px;
    height: 80px;
    background: var(--qk-bg);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.category-card:hover .category-icon {
    background: rgba(3, 199, 90, 0.08);
    transform: scale(1.1) rotate(3deg);
}

.category-card span {
    font-weight: 800;
    font-size: 1.05rem;
    color: var(--qk-dark);
}

/* Horizontal Scroll wrapper for mobile/tablet */
.scroll-container-mobile {
    display: contents;
}

/* Product Cards & Stepper buttons styling */
.product-shelf {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 24px;
    margin-bottom: 50px;
}

.product-card {
    background: var(--qk-card);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    padding: 18px;
    position: relative;
    display: flex;
    flex-direction: column;
    transition: var(--transition);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
    border-color: rgba(3, 199, 90, 0.15);
}

.product-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    background: var(--qk-coral-gradient);
    color: var(--qk-card);
    padding: 5px 12px;
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: 900;
    z-index: 2;
    text-transform: uppercase;
    box-shadow: 0 4px 8px rgba(255, 81, 47, 0.2);
}

.product-image-container {
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-bottom: 14px;
    background: #f7f8fa;
    border-radius: var(--radius-md);
    overflow: hidden;
}

.product-visual-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
}

.product-visual-wrapper svg {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
    transition: var(--transition);
}

.product-card:hover .product-visual-wrapper svg {
    transform: scale(1.06) translateY(-2px);
}


.product-info {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.product-title {
    font-size: 0.95rem;
    font-weight: 800;
    line-height: 1.35;
    margin-bottom: 8px;
    height: 40px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    color: var(--qk-dark);
}

.product-meta {
    font-size: 0.8rem;
    color: var(--qk-muted);
    font-weight: 600;
    margin-bottom: 12px;
    display: flex;
    justify-content: space-between;
    font-family: 'Inter', sans-serif;
}

.product-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
}

.product-price {
    font-size: 1.25rem;
    font-weight: 900;
    color: var(--qk-dark);
}

/* Visual stepper styles override primary primary colors */
.qty-control {
    display: flex;
    align-items: center;
    background: var(--qk-orange);
    color: var(--qk-card);
    border-radius: var(--radius-sm);
    padding: 3px;
    gap: 10px;
    font-weight: 800;
    box-shadow: 0 4px 10px rgba(255, 90, 31, 0.2);
    transition: var(--transition);
}

.qty-control span {
    font-size: 0.95rem;
    min-width: 14px;
    text-align: center;
}

.qty-btn {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.2);
    color: var(--qk-card);
    cursor: pointer;
    font-size: 1.1rem;
    font-weight: 900;
    transition: var(--transition);
}

.qty-btn:hover {
    background: rgba(255, 255, 255, 0.35);
}

/* Compact Stepper for Product Cards (Blinkit style) */
.product-card .qty-control {
    max-width: 90px;
    width: 90px;
    padding: 3px 6px;
    justify-content: space-between;
    gap: 4px;
    box-shadow: 0 4px 12px rgba(255, 90, 31, 0.15);
}

.product-card .qty-btn {
    width: 22px;
    height: 22px;
    font-size: 0.95rem;
}

.product-card .qty-control span {
    font-size: 0.85rem;
    min-width: 14px;
}

.add-btn {
    border: 2px solid var(--qk-orange);
    background: var(--qk-card);
    color: var(--qk-orange);
    padding: 8px 20px;
    border-radius: var(--radius-sm);
    font-weight: 800;
    font-size: 0.85rem;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}

.add-btn:hover {
    background: linear-gradient(135deg, var(--qk-orange) 0%, var(--qk-orange-dark) 100%);
    color: var(--qk-card);
    border-color: transparent;
    transform: scale(1.05);
}

/* Category Chips Roster */
.category-chips {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 14px;
    margin-bottom: 30px;
    scrollbar-width: none;
}

.category-chips::-webkit-scrollbar {
    display: none;
}

.category-chip {
    padding: 10px 22px;
    background: var(--qk-blue-soft);
    border: 1px solid rgba(13, 71, 201, 0.15);
    border-radius: 50px;
    font-weight: 800;
    font-size: 0.9rem;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    color: var(--qk-blue);
}

.category-chip.active, .category-chip:hover {
    background: linear-gradient(135deg, var(--qk-orange) 0%, var(--qk-orange-dark) 100%);
    color: var(--qk-card);
    border-color: transparent;
    box-shadow: 0 4px 10px rgba(255, 90, 31, 0.25);
    transform: translateY(-1px);
}

/* Scroll reveal helper hook */
.reveal-on-scroll {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Product Detail layout visual enhancements */
.product-detail-layout {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 48px;
    background: var(--qk-card);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    padding: 48px;
    margin: 24px 0 40px;
    box-shadow: var(--shadow-sm);
}

.detail-gallery {
    background: var(--qk-bg);
    border-radius: var(--radius-lg);
    height: 420px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color);
}

.detail-gallery .mock-img {
    font-size: 13rem;
    filter: drop-shadow(0 20px 40px rgba(0,0,0,0.12));
}

.detail-category {
    font-weight: 800;
    color: var(--qk-green);
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 1px;
    margin-bottom: 10px;
    display: inline-block;
}

.detail-title {
    font-size: 2.4rem;
    line-height: 1.15;
    margin-bottom: 14px;
    color: var(--qk-dark);
}

.detail-desc {
    color: #4b5563;
    font-family: 'Inter', sans-serif;
    margin-bottom: 24px;
    font-size: 1.05rem;
    line-height: 1.6;
}

.detail-price-box {
    background: rgba(3, 199, 90, 0.04);
    border: 1px solid rgba(3, 199, 90, 0.08);
    padding: 24px;
    border-radius: var(--radius-md);
    margin: 24px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: var(--shadow-sm);
}

.detail-price {
    font-size: 2.2rem;
    font-weight: 900;
    color: var(--qk-dark);
}

.meta-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 30px;
}

.meta-table td {
    padding: 12px 0;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.95rem;
}

.meta-table td:first-child {
    font-weight: 700;
    color: var(--qk-muted);
    width: 38%;
}

.meta-table td:last-child {
    color: var(--qk-dark);
    font-weight: 700;
}

/* Similar items details footer grids */
.similar-grid {
    margin-top: 48px;
}

/* Modern Step-based visual layout checkouts */
.checkout-steps {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    margin-bottom: 35px;
    padding: 0 40px;
}

.checkout-steps::before {
    content: '';
    position: absolute;
    top: 25px;
    left: 50px;
    right: 50px;
    height: 4px;
    background: var(--border-color);
    z-index: 1;
}

.step-bar-fill {
    position: absolute;
    top: 25px;
    left: 50px;
    height: 4px;
    background: linear-gradient(135deg, var(--qk-orange) 0%, var(--qk-orange-dark) 100%);
    z-index: 2;
    transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.step-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 3;
    gap: 8px;
}

.step-number {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--qk-card);
    border: 3px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.1rem;
    color: var(--qk-muted);
    transition: var(--transition);
}

.step-node.active .step-number {
    border-color: var(--qk-orange);
    background: linear-gradient(135deg, var(--qk-orange) 0%, var(--qk-orange-dark) 100%);
    color: var(--qk-card);
    box-shadow: 0 0 0 6px rgba(255, 90, 31, 0.15);
}

.step-node.completed .step-number {
    border-color: var(--qk-blue);
    background: linear-gradient(135deg, var(--qk-blue) 0%, var(--qk-blue-dark) 100%);
    color: var(--qk-card);
}

.step-label {
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--qk-muted);
    text-transform: uppercase;
}

.step-node.active .step-label {
    color: var(--qk-orange);
}

/* Zone Card Selectors */
.zone-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.zone-select-card {
    background: var(--qk-card);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 20px;
    text-align: center;
    cursor: pointer;
    transition: var(--transition);
    position: relative;
}

.zone-select-card:hover {
    border-color: var(--qk-aqua);
    transform: translateY(-2px);
}

.zone-select-card.active {
    border-color: var(--qk-green);
    background: rgba(3, 199, 90, 0.03);
    box-shadow: var(--shadow-sm);
}

.zone-select-card.active::before {
    content: '✓';
    position: absolute;
    top: 10px;
    right: 12px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--qk-green);
    color: var(--qk-card);
    font-size: 0.75rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
}

.zone-card-title {
    font-weight: 800;
    font-size: 1.1rem;
    margin-bottom: 4px;
}

/* Replacement Preference Card Selector */
.preference-card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 16px;
}

.preference-select-card {
    background: var(--qk-bg);
    border: 2px solid transparent;
    border-radius: var(--radius-md);
    padding: 16px;
    text-align: center;
    cursor: pointer;
    transition: var(--transition);
}

.preference-select-card:hover {
    background: var(--qk-card);
    border-color: var(--border-color);
}

.preference-select-card.active {
    border-color: var(--qk-green);
    background: var(--qk-card);
    box-shadow: var(--shadow-sm);
}

.preference-icon {
    font-size: 1.8rem;
    margin-bottom: 8px;
}

.preference-title {
    font-weight: 800;
    font-size: 0.85rem;
    color: var(--qk-dark);
}

/* Mobile Bottom Navigation Bar */
.mobile-bottom-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 70px;
    background: var(--qk-card);
    border-top: 1px solid var(--border-color);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.04);
    z-index: 99;
}

.mobile-nav-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    height: 100%;
}

.mobile-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--qk-muted);
    gap: 4px;
}

.mobile-nav-item.active {
    color: var(--qk-orange);
}

.mobile-nav-item i {
    font-size: 1.35rem;
}

/* Mobile Cart Sticky notification widget */
.mobile-cart-bar {
    position: fixed;
    bottom: 85px;
    left: 16px;
    right: 16px;
    background: linear-gradient(135deg, var(--qk-orange) 0%, var(--qk-orange-dark) 100%);
    color: var(--qk-card);
    border-radius: var(--radius-md);
    padding: 16px 20px;
    display: none;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 10px 30px rgba(255, 90, 31, 0.35);
    z-index: 98;
    animation: slideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.cart-bar-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cart-bar-count {
    font-size: 0.8rem;
    text-transform: uppercase;
    font-weight: 800;
    background: rgba(255, 255, 255, 0.2);
    padding: 3px 10px;
    border-radius: 40px;
    align-self: flex-start;
}

.cart-bar-total {
    font-size: 1.25rem;
    font-weight: 900;
}

.cart-bar-link {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 900;
    font-size: 1.05rem;
}

/* Sticky Bottom Mobile Add/Purchase controls bar */
.sticky-mobile-purchase {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--qk-card);
    padding: 16px 24px;
    border-top: 1px solid var(--border-color);
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.08);
    z-index: 90;
    align-items: center;
    justify-content: space-between;
}

/* Confetti Canvas for order success celebrations */
#confetti-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 150;
    pointer-events: none;
}

/* SaaS Admin Layout Overhaul */
.admin-sidebar {
    width: 280px;
    background: var(--qk-dark);
    color: var(--qk-card);
    padding: 40px 24px;
    display: flex;
    flex-direction: column;
    gap: 40px;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 10;
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.05);
}

.admin-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.45rem;
    font-weight: 900;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--qk-dark-light);
}

.admin-menu-item a {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 20px;
    border-radius: var(--radius-md);
    font-weight: 700;
    color: var(--qk-muted);
    transition: var(--transition);
}

.admin-menu-item.active a, .admin-menu-item a:hover {
    background: var(--qk-green-gradient);
    color: var(--qk-card);
    box-shadow: 0 4px 12px rgba(3, 199, 90, 0.2);
}

.admin-main {
    flex-grow: 1;
    margin-left: 280px;
    padding: 48px;
    background: var(--qk-bg);
}

.admin-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
}

/* Elevated glass metrics grids */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-bottom: 48px;
}

.stats-card {
    background: var(--qk-card);
    padding: 28px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: var(--transition);
}

.stats-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.stats-info h3 {
    font-size: 0.85rem;
    color: var(--qk-muted);
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.stats-info .stats-value {
    font-size: 2rem;
    font-weight: 900;
    color: var(--qk-dark);
}

.stats-icon {
    font-size: 2.2rem;
    width: 64px;
    height: 64px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.stats-card:hover .stats-icon {
    transform: scale(1.1);
}

/* Admin Tables Visual styles */
.admin-table th {
    background: rgba(3, 199, 90, 0.03);
    padding: 18px 24px;
    font-weight: 800;
    font-size: 0.85rem;
    text-transform: uppercase;
    color: var(--qk-muted);
    border-bottom: 1px solid var(--border-color);
}

.admin-table td {
    padding: 18px 24px;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.95rem;
    color: var(--qk-dark);
}

/* Rider App styling rules */
.rider-body {
    background-color: var(--qk-bg);
    max-width: 600px;
    margin: 0 auto;
    padding-bottom: 30px;
    border-left: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
    min-height: 100vh;
}

.rider-header-banner {
    background: var(--qk-green-gradient);
    color: var(--qk-card);
    padding: 30px 24px;
    border-bottom-left-radius: var(--radius-lg);
    border-bottom-right-radius: var(--radius-lg);
    box-shadow: 0 8px 24px rgba(3, 199, 90, 0.2);
    margin-bottom: 24px;
}

.rider-card {
    background: var(--qk-card);
    border-radius: var(--radius-lg);
    padding: 24px;
    margin-bottom: 20px;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}

.rider-card:hover {
    box-shadow: var(--shadow-md);
}

.rider-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    border-bottom: 1px dashed var(--border-color);
    padding-bottom: 12px;
}

/* Coral Box for cash collect */
.rider-cash-box {
    background: linear-gradient(135deg, rgba(255, 81, 47, 0.05) 0%, rgba(255, 81, 47, 0.1) 100%);
    border: 1px solid rgba(255, 81, 47, 0.15);
    padding: 16px;
    border-radius: var(--radius-md);
    margin: 18px 0;
}

/* Swipe-to-deliver visuals */
.swipe-deliver-container {
    background: #2f3542;
    border-radius: var(--radius-md);
    padding: 18px;
    box-shadow: var(--shadow-md);
}

/* Timeline Timeline timeline tracking enhancements */
.timeline-item.active .timeline-badge {
    background: var(--qk-green);
    box-shadow: 0 0 0 6px rgba(3, 199, 90, 0.2);
    animation: pulse 2s infinite;
}

/* Responsive Overrides */
@media (max-width: 991px) {
    .nav-search {
        display: none;
    }
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
}

@media (max-width: 768px) {
    body {
        padding-bottom: 150px; /* Space for both mobile bottom nav AND sticky cart */
    }
    .hero-banner {
        padding: 30px 20px !important;
        margin: 16px 0 24px !important;
        flex-direction: column !important;
        text-align: center !important;
    }
    .hero-text {
        max-width: 100% !important;
        width: 100% !important;
    }
    .hero-text h1 {
        font-size: 2.2rem !important;
        margin-bottom: 12px !important;
        line-height: 1.25 !important;
    }
    .hero-text p {
        font-size: 0.95rem !important;
        margin-bottom: 20px !important;
    }
    .hero-delivery-promise {
        margin-bottom: 16px !important;
        font-size: 0.75rem !important;
        padding: 6px 14px !important;
    }
    .hero-zone-chips {
        justify-content: center !important;
        gap: 6px !important;
        margin-bottom: 16px !important;
    }
    .hero-image {
        display: none !important; /* Hide complex collage completely on mobile */
    }
    .floating-item {
        display: none !important; /* Hide floating items on mobile */
    }
    .search-chips-container {
        justify-content: center !important;
        margin-top: 12px !important;
    }
    .mobile-bottom-nav {
        display: block;
    }
    
    .category-grid {
        display: flex;
        overflow-x: auto;
        padding-bottom: 12px;
        margin-bottom: 30px;
        gap: 16px;
        scrollbar-width: none;
    }
    .category-grid::-webkit-scrollbar {
        display: none;
    }
    .category-card {
        min-width: 140px;
        padding: 20px 12px;
    }
    .category-icon {
        width: 60px;
        height: 60px;
        font-size: 2.5rem;
    }

    .scroll-container-mobile {
        display: contents; /* Ensure shelves display as a uniform 2-column grid instead of messy horizontal wraps */
    }

    .product-shelf {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
        display: grid !important;
    }

    .product-card {
        padding: 12px !important;
        border-radius: var(--radius-md) !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        min-height: 290px !important; /* Force perfectly uniform card heights on mobile */
    }

    .product-image-container {
        height: 130px !important;
        background: #f7f8fa !important;
        margin-bottom: 10px !important;
    }

    .product-title {
        font-size: 0.85rem !important;
        height: 34px !important;
        line-height: 1.3 !important;
        margin-bottom: 4px !important;
    }

    .product-meta {
        font-size: 0.75rem !important;
        margin-bottom: 8px !important;
    }

    .product-price {
        font-size: 1.05rem !important;
    }

    .product-card .add-btn {
        padding: 6px 14px !important;
        font-size: 0.8rem !important;
    }

    .product-card .qty-control {
        max-width: 80px !important;
        width: 80px !important;
        padding: 2px 4px !important;
    }

    .product-card .qty-btn {
        width: 20px !important;
        height: 20px !important;
        font-size: 0.85rem !important;
    }

    .product-card .qty-control span {
        font-size: 0.8rem !important;
    }

    
    .product-detail-layout {
        grid-template-columns: 1fr;
        padding: 24px;
        gap: 24px;
    }
    .detail-gallery {
        height: 280px;
    }
    .detail-gallery .mock-img {
        font-size: 8rem;
    }
    .detail-title {
        font-size: 1.8rem;
    }
    
    .sticky-mobile-purchase {
        display: flex;
    }

    .cart-layout {
        grid-template-columns: 1fr;
    }
    .checkout-steps {
        padding: 0 10px;
    }
    .checkout-steps::before, .step-bar-fill {
        left: 20px;
        right: 20px;
    }
    .zone-cards-grid, .preference-card-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .zone-select-card, .preference-select-card {
        padding: 14px;
        text-align: left;
        display: flex;
        align-items: center;
        gap: 16px;
    }
    .preference-icon {
        margin-bottom: 0;
    }
    .zone-select-card.active::before {
        top: 50%;
        transform: translateY(-50%);
        right: 16px;
    }

    .stats-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

/* Category Sidebar Rail Layout inside products.php */
.products-layout-wrapper {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 30px;
    align-items: start;
    margin-top: 20px;
}

.category-sidebar-rail {
    background: var(--qk-card);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    padding: 24px;
    position: sticky;
    top: 100px;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sidebar-title {
    font-size: 1.25rem;
    font-weight: 800;
    margin-bottom: 8px;
    color: var(--qk-dark);
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 10px;
}

.sidebar-rail-links {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sidebar-rail-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--qk-dark);
    transition: var(--transition);
    border: 1px solid transparent;
}

.sidebar-rail-link .rail-icon {
    font-size: 1.25rem;
}

.sidebar-rail-link:hover {
    background: rgba(3, 199, 90, 0.05);
    color: var(--qk-green);
}

.sidebar-rail-link.active {
    background: var(--qk-green-gradient);
    color: var(--qk-card);
    box-shadow: 0 4px 10px rgba(3, 199, 90, 0.2);
}

/* Popular Search Chips Styling */
.search-chip {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--qk-dark);
    background: rgba(3, 199, 90, 0.06);
    border: 1px solid rgba(3, 199, 90, 0.1);
    padding: 6px 12px;
    border-radius: 50px;
    cursor: pointer;
    transition: var(--transition);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.search-chip:hover {
    background: var(--qk-green);
    color: var(--qk-card);
    border-color: transparent;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(3, 199, 90, 0.15);
}

/* Toggle displays for responsive views */
.category-chips-mobile-only {
    display: none;
}

@media (max-width: 768px) {
    .products-layout-wrapper {
        grid-template-columns: 1fr;
        gap: 0;
    }
    
    .category-sidebar-rail {
        display: none; /* Hide vertical rail on mobile */
    }
    
    .category-chips-mobile-only {
        display: flex; /* Show horizontal chips on mobile */
    }
}

/* Premium Cart Item Row Layout */
.cart-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--qk-card);
    padding: 16px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    margin-bottom: 12px;
    transition: var(--transition);
}

.cart-item:hover {
    box-shadow: var(--shadow-sm);
    border-color: rgba(3, 199, 90, 0.12);
}

.cart-item-img {
    width: 64px;
    height: 64px;
    background: linear-gradient(180deg, rgba(245, 246, 250, 0.3) 0%, rgba(245, 246, 250, 0.8) 100%);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color);
    overflow: hidden;
}

.cart-item-img .pv-container {
    width: 100%;
    height: 100%;
    transform: scale(0.65);
}

.cart-item-info {
    flex-grow: 1;
    margin: 0 16px;
}

.cart-item-name {
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--qk-dark);
    display: block;
    margin-bottom: 4px;
    line-height: 1.3;
}

.cart-item-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

.qty-control {
    display: flex;
    align-items: center;
    background: var(--qk-green);
    color: var(--qk-card);
    border-radius: var(--radius-sm);
    padding: 4px;
    gap: 8px;
    font-weight: 800;
    box-shadow: 0 4px 10px rgba(3, 199, 90, 0.15);
    max-width: 110px; /* Constrain stepper width! */
    width: 110px;
    justify-content: space-between;
}

.qty-control span {
    font-size: 0.9rem;
    min-width: 16px;
    text-align: center;
}

.qty-btn {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.15);
    color: var(--qk-card);
    cursor: pointer;
    font-size: 1rem;
    font-weight: 900;
    transition: var(--transition);
}

.qty-btn:hover {
    background: rgba(255, 255, 255, 0.3);
}

.btn-remove {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 1.1rem;
    color: var(--qk-muted);
    padding: 8px;
    border-radius: 50%;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-remove:hover {
    background: rgba(255, 81, 47, 0.08);
    color: var(--qk-coral);
    transform: scale(1.1);
}

/* Premium Card Collage Layout for Hero Section */
.hero-collage {
    position: relative;
    width: 320px;
    height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.collage-card {
    background: var(--qk-card);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    padding: 12px;
    position: absolute;
    width: 130px;
    box-shadow: var(--shadow-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: var(--transition);
    animation: float 6s ease-in-out infinite;
}

.collage-card:hover {
    transform: translateY(-8px) scale(1.05);
    z-index: 10;
}

.c-card-1 {
    top: 10px;
    left: -20px;
    transform: rotate(-10deg);
    animation-delay: 0s;
}

.c-card-2 {
    bottom: 20px;
    right: -10px;
    transform: rotate(15deg);
    animation-delay: 1s;
}

.c-card-3 {
    top: 60px;
    right: 120px;
    transform: rotate(-5deg);
    animation-delay: 2s;
    width: 125px;
}

.collage-card .pv-container {
    height: 90px;
    margin-bottom: 8px;
}

.c-card-info {
    text-align: center;
}

.c-title {
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--qk-dark);
    display: block;
}

.c-price {
    font-size: 0.7rem;
    font-weight: 900;
    color: var(--qk-green);
}

/* Hero Zone Chips */
.hero-zone-chip {
    font-size: 0.8rem;
    font-weight: 800;
    color: var(--qk-dark);
    background: rgba(255, 255, 255, 0.8);
    padding: 6px 14px;
    border-radius: 50px;
    border: 1px solid var(--border-color);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    backdrop-filter: blur(10px);
    transition: var(--transition);
}

.hero-zone-chip:hover {
    transform: translateY(-1px);
    background: var(--qk-card);
    box-shadow: var(--shadow-sm);
}

/* Premium Product Mockup Vector Styles */
.pv-container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

/* 1. Kurumba */
.pv-kurumba .coconut-body {
    width: 80px;
    height: 80px;
    background: radial-gradient(circle at 30% 30%, #a8e063, #56ab2f);
    border-radius: 50%;
    position: relative;
    box-shadow: inset -10px -10px 20px rgba(0,0,0,0.15), 0 10px 20px rgba(0,0,0,0.1);
}
.pv-kurumba .coconut-straw {
    width: 6px;
    height: 45px;
    background: linear-gradient(90deg, #ff9f43, #ee5253);
    position: absolute;
    top: -20px;
    right: 20px;
    transform: rotate(20deg);
    border-radius: 4px;
}
.pv-kurumba .coconut-shine {
    width: 18px;
    height: 8px;
    background: rgba(255,255,255,0.4);
    border-radius: 50%;
    position: absolute;
    top: 12px;
    left: 16px;
    transform: rotate(-30deg);
}

/* 2. Valhomas */
.pv-valhomas .tuna-packet {
    width: 70px;
    height: 90px;
    background: linear-gradient(135deg, #bdc3c7, #2c3e50);
    border-radius: 8px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.15);
    border: 1px solid rgba(255,255,255,0.25);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px;
}
.pv-valhomas .packet-seal {
    width: 100%;
    height: 6px;
    background: repeating-linear-gradient(90deg, #7f8c8d, #7f8c8d 4px, #34495e 4px, #34495e 8px);
    position: absolute;
    top: 0;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}
.pv-valhomas .packet-label {
    font-size: 0.6rem;
    font-weight: 900;
    color: var(--qk-card);
    letter-spacing: 1px;
    background: var(--qk-coral-gradient);
    padding: 1px 5px;
    border-radius: 4px;
    margin-bottom: 4px;
}
.pv-valhomas .packet-sub {
    font-size: 0.5rem;
    color: #ecf0f1;
    font-weight: 700;
}

/* 3. Rihaakuru */
.pv-rihaakuru .jar-lid {
    width: 44px;
    height: 10px;
    background: linear-gradient(90deg, #f39c12, #d35400);
    border-radius: 4px 4px 0 0;
    margin-bottom: -2px;
    position: relative;
    z-index: 2;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.pv-rihaakuru .jar-body {
    width: 50px;
    height: 65px;
    background: rgba(255,255,255,0.15);
    border: 2px solid rgba(255,255,255,0.4);
    backdrop-filter: blur(4px);
    border-radius: 0 0 10px 10px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    overflow: hidden;
}
.pv-rihaakuru .jar-liquid {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 75%;
    background: linear-gradient(180deg, #2c3e50, #000000);
}
.pv-rihaakuru .jar-label {
    position: relative;
    z-index: 3;
    font-size: 0.5rem;
    font-weight: 900;
    color: #2c3e50;
    background: #f1c40f;
    padding: 1px 3px;
    border-radius: 2px;
    letter-spacing: 0.5px;
}

/* 4. Githeyo Mirus */
.pv-githeyo .chilli-leaf {
    width: 50px;
    height: 25px;
    background: #27ae60;
    border-radius: 50% 0 50% 0;
    position: absolute;
    bottom: 20px;
    transform: rotate(-10deg);
    opacity: 0.4;
}
.pv-githeyo .chilli-red {
    width: 12px;
    height: 50px;
    background: linear-gradient(to bottom, #ff7675, #d63031);
    border-radius: 50% 50% 20% 20%;
    position: absolute;
    transform: rotate(35deg) skewX(10deg);
    left: 40px;
    top: 30px;
    box-shadow: 0 5px 10px rgba(0,0,0,0.15);
}
.pv-githeyo .chilli-green {
    width: 12px;
    height: 45px;
    background: linear-gradient(to bottom, #55efc4, #00b894);
    border-radius: 50% 50% 20% 20%;
    position: absolute;
    transform: rotate(-25deg) skewX(-10deg);
    left: 28px;
    top: 35px;
    box-shadow: 0 5px 10px rgba(0,0,0,0.15);
}

/* 5. Banana Bundle */
.pv-keyo .banana-bundle {
    position: relative;
    width: 70px;
    height: 70px;
}
.pv-keyo .banana {
    width: 16px;
    height: 55px;
    background: linear-gradient(135deg, #ffeaa7, #fdcb6e);
    border-radius: 10px 10px 30px 10px;
    border-left: 2px solid #e1b12c;
    position: absolute;
}
.pv-keyo .b1 { transform: rotate(-20deg); left: 10px; }
.pv-keyo .b2 { transform: rotate(0deg); left: 24px; top: 4px; }
.pv-keyo .b3 { transform: rotate(20deg); left: 38px; }

/* 6. Papaya Slices */
.pv-papaya .papaya-half {
    width: 55px;
    height: 80px;
    background: linear-gradient(135deg, #ff9f43, #ee5253);
    border-radius: 30px;
    position: relative;
    border: 3px solid #10ac84;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
.pv-papaya .papaya-flesh {
    width: 38px;
    height: 60px;
    background: #ff7f50;
    border-radius: 50%;
    position: relative;
    overflow: hidden;
}
.pv-papaya .papaya-seeds {
    position: absolute;
    top: 12px;
    left: 8px;
    width: 22px;
    height: 35px;
    background: radial-gradient(circle, #2d3436 2px, transparent 3px);
    background-size: 5px 5px;
    opacity: 0.85;
}

/* 7. Hikimas Bag */
.pv-hikimas .kraft-pouch {
    width: 60px;
    height: 85px;
    background: linear-gradient(135deg, #e5c090, #c89d6c);
    border-radius: 6px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.12);
    border: 1px solid rgba(255,255,255,0.15);
    position: relative;
    padding: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.pv-hikimas .pouch-seal {
    width: 100%;
    height: 5px;
    background: #b08554;
    position: absolute;
    top: 3px;
    left: 0;
}
.pv-hikimas .pouch-label {
    font-size: 0.5rem;
    font-weight: 900;
    color: #784e24;
    border: 1px solid #784e24;
    padding: 1px 3px;
    border-radius: 2px;
    margin-top: 10px;
    letter-spacing: 0.5px;
}
.pv-hikimas .pouch-window {
    width: 40px;
    height: 22px;
    background: rgba(0,0,0,0.25);
    border-radius: 4px;
    margin-top: auto;
    border: 1px solid #b08554;
    position: relative;
}
.pv-hikimas .pouch-window::after {
    content: '🐟';
    position: absolute;
    font-size: 0.65rem;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

/* 8. Kopee Greens */
.pv-kopee .leaf-bundle {
    width: 70px;
    height: 70px;
    position: relative;
}
.pv-kopee .leaf {
    width: 38px;
    height: 60px;
    background: linear-gradient(135deg, #10ac84, #01906a);
    border-radius: 0 70% 30% 70%;
    position: absolute;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.pv-kopee .l1 { transform: rotate(-15deg); left: 8px; }
.pv-kopee .l2 { transform: rotate(15deg); left: 22px; }
.pv-kopee .bundle-rope {
    width: 44px;
    height: 5px;
    background: #ccae8f;
    position: absolute;
    bottom: 10px;
    left: 12px;
    border-radius: 3px;
    z-index: 3;
}

/* 9. Lime Slice */
.pv-lime .lime-slice {
    width: 65px;
    height: 65px;
    background: #2ecc71;
    border-radius: 50%;
    border: 4px solid #27ae60;
    position: relative;
    box-shadow: 0 8px 16px rgba(0,0,0,0.1);
}
.pv-lime .lime-segments {
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, transparent 35%, #2ecc71 35%),
                repeating-conic-gradient(from 0deg, transparent 0deg, transparent 40deg, #27ae60 40deg, #27ae60 45deg);
    border-radius: 50%;
}

/* 10. Crackers Pouch */
.pv-crackers .cracker-pack {
    width: 70px;
    height: 75px;
    background: linear-gradient(135deg, #2980b9, #1f4068);
    border-radius: 6px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.15);
    border: 1px solid rgba(255,255,255,0.2);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 6px;
    color: var(--qk-card);
}
.pv-crackers .pack-brand {
    font-size: 0.6rem;
    font-weight: 900;
    color: #f1c40f;
    letter-spacing: 0.5px;
}
.pv-crackers .pack-title {
    font-size: 0.45rem;
    font-weight: 700;
    opacity: 0.85;
    margin-top: 2px;
    text-transform: uppercase;
}

/* 11. Tea Box */
.pv-tea .tea-box {
    width: 60px;
    height: 80px;
    background: linear-gradient(135deg, #e74c3c, #962d22);
    border-radius: 8px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.15);
    color: var(--qk-card);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 6px;
    border: 1px solid rgba(255,255,255,0.15);
}
.pv-tea .tea-label {
    font-size: 0.55rem;
    font-weight: 900;
    letter-spacing: 0.5px;
    border-bottom: 2px solid #f1c40f;
    padding-bottom: 2px;
    margin-bottom: 4px;
}
.pv-tea .tea-cup {
    font-size: 1.3rem;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.2));
}

/* 12. Milk Carton */
.pv-milk .milk-top {
    width: 44px;
    height: 12px;
    background: #e6f0fa;
    clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
    margin-bottom: -1px;
    position: relative;
    z-index: 2;
}
.pv-milk .milk-box {
    width: 50px;
    height: 70px;
    background: linear-gradient(135deg, #ffffff, #e6f0fa);
    border-radius: 0 0 6px 6px;
    border: 1px solid var(--border-color);
    box-shadow: 0 8px 16px rgba(0,0,0,0.08);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}
.pv-milk .milk-brand {
    font-size: 0.6rem;
    font-weight: 900;
    color: #2980b9;
    letter-spacing: 0.5px;
    z-index: 3;
}
.pv-milk .milk-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 20px;
    background: linear-gradient(135deg, #3498db, #2980b9);
    z-index: 2;
}

/* 13. Eggs Tray */
.pv-eggs .egg-carton {
    width: 75px;
    height: 75px;
    background: #dfd5c6;
    border-radius: var(--radius-md);
    box-shadow: inset 0 0 10px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.08);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px;
}
.pv-eggs .egg {
    width: 16px;
    height: 24px;
    background: radial-gradient(circle at 35% 35%, #ffffff, #f1ece1);
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

/* 14. Mr Coco Cooking Oil */
.pv-oil .oil-bottle {
    width: 38px;
    height: 85px;
    background: linear-gradient(90deg, rgba(241,196,15,0.7), rgba(243,156,18,0.85));
    border-radius: 10px 10px 5px 5px;
    border: 2px solid rgba(255,255,255,0.5);
    box-shadow: 0 8px 16px rgba(0,0,0,0.1);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pv-oil .oil-cap {
    width: 14px;
    height: 8px;
    background: #27ae60;
    border-radius: 2px;
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
}
.pv-oil .oil-label {
    font-size: 0.45rem;
    font-weight: 900;
    color: #7f8c8d;
    background: #ffffff;
    padding: 1px 3px;
    border-radius: 2px;
    text-align: center;
    white-space: nowrap;
}

/* 15. Rice Sack */
.pv-rice .rice-sack {
    width: 60px;
    height: 85px;
    background: linear-gradient(135deg, #e3d2be, #c8b7a2);
    border-radius: 8px 8px 12px 12px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.12);
    border: 1px solid rgba(0,0,0,0.05);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.pv-rice .sack-stitch {
    width: 100%;
    height: 6px;
    background: repeating-linear-gradient(90deg, #962d22, #962d22 3px, transparent 3px, transparent 6px);
    position: absolute;
    top: 5px;
}
.pv-rice .sack-label {
    font-size: 0.55rem;
    font-weight: 900;
    color: #7f8c8d;
    background: #ffffff;
    padding: 2px 5px;
    border-radius: 4px;
    letter-spacing: 0.5px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
}

/* 16. Onion */
.pv-onion .onion-bulb {
    width: 50px;
    height: 50px;
    background: radial-gradient(circle at 35% 35%, #e1b12c, #cd84f1);
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    position: relative;
    box-shadow: 0 6px 12px rgba(0,0,0,0.1);
}
.pv-onion .onion-stem {
    width: 3px;
    height: 10px;
    background: #44bd32;
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 2px;
}

/* 17. Garlic */
.pv-garlic .garlic-bulb {
    width: 48px;
    height: 48px;
    background: radial-gradient(circle at 35% 35%, #ffffff, #eaeaea);
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    position: relative;
    box-shadow: 0 6px 12px rgba(0,0,0,0.08);
    border-bottom: 2px solid #dfd5c6;
}

/* 18. Coke Bottle */
.pv-coke .coke-cap {
    width: 12px;
    height: 7px;
    background: #e74c3c;
    border-radius: 2px 2px 0 0;
    margin-bottom: -1px;
    position: relative;
    z-index: 3;
}
.pv-coke .coke-neck {
    width: 8px;
    height: 20px;
    background: rgba(255,255,255,0.25);
    border-left: 1.5px solid rgba(255,255,255,0.4);
    border-right: 1.5px solid rgba(255,255,255,0.4);
    margin-bottom: -1px;
    position: relative;
    z-index: 2;
}
.pv-coke .coke-bottle-body {
    width: 34px;
    height: 60px;
    background: #1e1e24;
    border: 1.5px solid rgba(255,255,255,0.4);
    border-radius: 10px 10px 5px 5px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 16px rgba(0,0,0,0.15);
    overflow: hidden;
}
.pv-coke .coke-label {
    width: 100%;
    height: 16px;
    background: #e74c3c;
    position: relative;
}
.pv-coke .coke-label::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-10deg);
    width: 20px;
    height: 2px;
    background: #ffffff;
}

/* 19. Potato Chips Packet */
.pv-chips .chips-pouch {
    width: 65px;
    height: 85px;
    background: linear-gradient(135deg, #e74c3c 0%, #f39c12 100%);
    border-radius: 6px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.15);
    border: 1px solid rgba(255,255,255,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    position: relative;
}
.pv-chips .chips-label {
    font-size: 0.5rem;
    font-weight: 900;
    color: #ffffff;
    background: rgba(0,0,0,0.6);
    padding: 1px 3px;
    border-radius: 3px;
    text-align: center;
    text-transform: uppercase;
}

/* 20. Oreo cookies */
.pv-oreo .oreo-pack {
    width: 70px;
    height: 35px;
    background: linear-gradient(90deg, #1e3c72, #2a5298);
    border-radius: 15px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.12);
    border: 1px solid rgba(255,255,255,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--qk-card);
    position: relative;
    overflow: hidden;
}
.pv-oreo .oreo-brand {
    font-size: 0.6rem;
    font-weight: 900;
    color: var(--qk-card);
    z-index: 2;
    letter-spacing: 0.5px;
}
.pv-oreo .oreo-stripe {
    position: absolute;
    width: 8px;
    height: 100%;
    background: #ffffff;
    left: 15px;
    opacity: 0.3;
    transform: skewX(-20deg);
}

/* 21. Vim Bottle */
.pv-vim .vim-cap {
    width: 12px;
    height: 6px;
    background: #e74c3c;
    border-radius: 2px;
    margin-bottom: -1px;
}
.pv-vim .vim-bottle {
    width: 40px;
    height: 75px;
    background: linear-gradient(135deg, #ffeaa7, #fdcb6e);
    border-radius: 6px;
    border: 1px solid var(--border-color);
    box-shadow: 0 8px 16px rgba(0,0,0,0.08);
    display: flex;
    align-items: center;
    justify-content: center;
}
.pv-vim .vim-brand {
    font-size: 0.6rem;
    font-weight: 900;
    color: #27ae60;
    letter-spacing: 0.5px;
}

/* 22. Diaper pack */
.pv-pampers .diaper-pack {
    width: 65px;
    height: 80px;
    background: linear-gradient(135deg, #00cec9, #81ecec);
    border-radius: 8px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.12);
    border: 1px solid rgba(255,255,255,0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
}
.pv-pampers .diaper-brand {
    font-size: 0.6rem;
    font-weight: 900;
    color: #ffffff;
    background: #e84393;
    padding: 1px 5px;
    border-radius: 20px;
}

/* 23. Dettol Liquid */
.pv-dettol .dettol-pump {
    width: 10px;
    height: 12px;
    background: #dfd5c6;
    margin-bottom: -1px;
    border-radius: 2px;
}
.pv-dettol .dettol-bottle {
    width: 40px;
    height: 65px;
    background: linear-gradient(135deg, rgba(46,204,113,0.35), rgba(46,204,113,0.15));
    border: 1.5px solid rgba(46,204,113,0.4);
    backdrop-filter: blur(2px);
    border-radius: 10px 10px 5px 5px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.06);
    display: flex;
    align-items: center;
    justify-content: center;
}
.pv-dettol .dettol-logo {
    font-size: 0.8rem;
    font-weight: 900;
    color: #27ae60;
    background: #ffffff;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* 24. Surf Excel Pack */
.pv-surf .surf-box {
    width: 65px;
    height: 85px;
    background: linear-gradient(135deg, #0984e3, #6c5ce7);
    border-radius: 8px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.15);
    border: 1px solid rgba(255,255,255,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
}
.pv-surf .surf-brand {
    font-size: 0.55rem;
    font-weight: 900;
    color: #ffffff;
    background: #ff7675;
    padding: 2px 4px;
    border-radius: 4px;
    text-align: center;
}

/* Premium Cart Item Responsive Layout Overrides */
@media (max-width: 768px) {
    .cart-item {
        display: grid;
        grid-template-columns: 64px 1fr;
        grid-template-areas: 
            "img info"
            "img actions";
        gap: 12px;
        align-items: start;
        padding: 12px;
    }
    
    .cart-item-img {
        grid-area: img;
        width: 64px;
        height: 64px;
    }
    
    .cart-item-info {
        grid-area: info;
        margin: 0;
    }
    
    .cart-item-actions {
        grid-area: actions;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 4px;
        width: 100%;
        gap: 8px;
    }
    
    .cart-item-actions .qty-control {
        max-width: 90px;
        width: 90px;
        margin: 0;
        padding: 3px 6px;
    }
    
    .cart-item-actions .qty-btn {
        width: 22px;
        height: 22px;
        font-size: 0.95rem;
    }
    
    .cart-item-actions .qty-control span {
        font-size: 0.85rem;
    }
    
    .cart-item-actions .btn-remove {
        padding: 6px;
    }
}

/* Product Details and Sticky Mobile purchase ADD button overrides */
.detail-info .add-btn,
.detail-price-box .add-btn {
    padding: 14px 28px;
    font-size: 0.95rem;
    width: 100%;
    text-align: center;
    display: block;
}

.sticky-mobile-purchase .add-btn {
    padding: 10px 24px;
    font-size: 0.9rem;
    width: 100%;
    text-align: center;
    display: block;
}

/* Sync detail page steppers to be full-sized and gorgeous */
.detail-price-box .qty-control,
.sticky-mobile-purchase .qty-control {
    padding: 6px 12px;
    min-width: 140px;
    justify-content: space-between;
    box-shadow: 0 4px 12px rgba(3, 199, 90, 0.15);
}

.detail-price-box .qty-btn,
.sticky-mobile-purchase .qty-btn {
    width: 26px;
    height: 26px;
    font-size: 1.1rem;
}

.detail-price-box .qty-control span,
.sticky-mobile-purchase .qty-control span {
    font-size: 1rem;
}

/* --- QuickKart Mobile Optimization Pass Overrides --- */

/* 1. Global / Container Overrides */
@media (max-width: 480px) {
    .container {
        padding: 0 12px !important;
    }
}

/* 2. Responsive Glassmorphic Header (Blinkit style) */
@media (max-width: 768px) {
    .header-glass {
        padding: 4px 0;
    }
    .nav-bar {
        display: grid !important;
        grid-template-columns: auto 1fr !important;
        grid-template-rows: auto auto !important;
        height: auto !important;
        padding: 8px 12px !important;
        gap: 8px 0 !important;
    }
    .logo {
        grid-column: 1;
        grid-row: 1;
        font-size: 1.3rem !important;
        align-self: center;
    }
    .nav-location {
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
        padding: 4px 8px !important;
        margin: 0 !important;
        border-radius: var(--radius-sm) !important;
    }
    .nav-location select {
        font-size: 0.8rem !important;
    }
    .nav-location i {
        font-size: 0.9rem !important;
    }
    /* Hide the "Deliver to" label on screens <= 390px to fit logo and select side-by-side */
    @media (max-width: 390px) {
        .nav-location div div {
            display: none !important;
        }
    }
    .nav-search {
        grid-column: 1 / span 2;
        grid-row: 2;
        display: block !important;
        margin: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    .nav-search .search-input {
        height: 40px !important;
        padding: 8px 12px 8px 36px !important;
        font-size: 0.85rem !important;
    }
    .nav-search .search-icon {
        left: 12px !important;
        font-size: 0.95rem !important;
    }
    .nav-actions {
        display: none !important;
    }
}

/* 3. Homepage Hero & Trust Badges */
@media (max-width: 480px) {
    .hero-banner form {
        max-width: 100% !important;
        width: 100% !important;
    }
    .hero-banner form .search-input {
        height: 48px !important;
        font-size: 0.85rem !important;
        padding-left: 40px !important;
        padding-right: 80px !important;
    }
    .hero-banner form i.fa-magnifying-glass {
        left: 14px !important;
        font-size: 0.95rem !important;
    }
    .hero-banner form button[type="submit"] {
        top: 4px !important;
        bottom: 4px !important;
        right: 4px !important;
        padding: 0 16px !important;
        border-radius: 8px !important;
        font-size: 0.8rem !important;
    }
}

@media (max-width: 768px) {
    .trust-badges-grid {
        display: flex !important;
        overflow-x: auto !important;
        gap: 12px !important;
        scrollbar-width: none !important;
        margin-bottom: 30px !important;
        padding-bottom: 8px !important;
    }
    .trust-badges-grid::-webkit-scrollbar {
        display: none !important;
    }
    .trust-badges-grid > div {
        min-width: 250px !important;
        flex-shrink: 0 !important;
        padding: 16px !important;
        gap: 12px !important;
    }
    .trust-badges-grid > div div[style*="font-size: 2.2rem"] {
        width: 48px !important;
        height: 48px !important;
        font-size: 1.5rem !important;
    }
}

/* 4. Product Shelf & Cards */
@media (max-width: 390px) {
    .product-card {
        padding: 8px !important;
    }
    .product-price {
        font-size: 0.95rem !important;
    }
}

/* Stepper Tap Target Enhancements on Mobile Shelf */
@media (max-width: 768px) {
    .product-card .qty-control {
        max-width: 90px !important;
        width: 90px !important;
        height: 32px !important;
        padding: 2px !important;
    }
    .product-card .qty-btn {
        width: 28px !important;
        height: 28px !important;
        font-size: 1.1rem !important;
    }
    .product-card .qty-control span {
        font-size: 0.85rem !important;
    }
}

/* 5. Blinkit-style Floating Bottom Cart Bar */
.mobile-cart-bar {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    bottom: 24px !important;
    width: min(420px, calc(100% - 32px)) !important;
    height: 56px !important;
    border-radius: 999px !important;
    z-index: 900 !important;
    display: none;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px !important;
    background: linear-gradient(135deg, var(--qk-orange) 0%, var(--qk-orange-dark) 100%) !important;
    box-shadow: 0 10px 30px rgba(255, 90, 31, 0.3) !important;
    animation: slideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.cart-bar-info {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    color: var(--qk-card) !important;
}

.cart-bar-count {
    background: rgba(255, 255, 255, 0.2) !important;
    padding: 2px 8px !important;
    border-radius: 12px !important;
    font-size: 0.75rem !important;
    font-weight: 800 !important;
    align-self: center !important;
}

.cart-bar-total {
    font-weight: 900 !important;
    font-size: 1rem !important;
    color: var(--qk-card) !important;
}

.cart-bar-link {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-weight: 900 !important;
    font-size: 0.95rem !important;
    color: var(--qk-card) !important;
}

@media (max-width: 768px) {
    .mobile-cart-bar {
        left: 12px !important;
        right: 12px !important;
        bottom: 82px !important; /* Above bottom nav */
        width: auto !important;
        transform: none !important;
        border-radius: 18px !important;
        padding: 0 16px !important;
    }
}

/* 6. Mobile Bottom Navigation Active Indicators */
.mobile-bottom-nav {
    border-top: 1px solid var(--border-color) !important;
}
.mobile-nav-item.active {
    color: var(--qk-orange) !important;
    position: relative;
}
.mobile-nav-item.active::after {
    content: '';
    position: absolute;
    top: 4px;
    width: 4px;
    height: 4px;
    background: var(--qk-orange);
    border-radius: 50%;
}

/* 7. Sticky Purchase & Checkout Bars Above Tab Bar */
@media (max-width: 768px) {
    .sticky-mobile-purchase {
        bottom: 70px !important; /* Situate above bottom nav */
        height: 70px !important;
        padding: 12px 16px !important;
    }
    .sticky-mobile-purchase .add-btn,
    .sticky-mobile-purchase .qty-control {
        margin: 0 !important;
    }
}

/* 8. Cart Page Sticky Checkout CTA */
.cart-checkout-sticky {
    width: 100%;
}
@media (max-width: 768px) {
    .cart-checkout-sticky {
        position: fixed !important;
        bottom: 70px !important; /* Above bottom nav */
        left: 0 !important;
        right: 0 !important;
        background: var(--qk-card) !important;
        padding: 12px 16px !important;
        border-top: 1px solid var(--border-color) !important;
        box-shadow: 0 -4px 12px rgba(0,0,0,0.05) !important;
        z-index: 950 !important;
        box-sizing: border-box !important;
    }
    .cart-checkout-sticky .btn {
        margin-top: 0 !important;
    }
}

/* 9. Vertical Timeline & Track Lookup Styles */
.timeline {
    position: relative;
    padding-left: 24px;
    margin: 20px 0;
}
.timeline::before {
    content: '';
    position: absolute;
    left: 7px;
    top: 5px;
    bottom: 5px;
    width: 2px;
    background: var(--border-color);
}
.timeline-item {
    position: relative;
    margin-bottom: 24px;
}
.timeline-badge {
    position: absolute;
    left: -24px;
    top: 6px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--qk-card);
    border: 2px solid var(--border-color);
    z-index: 2;
}
.timeline-item.completed .timeline-badge {
    background: var(--qk-green);
    border-color: var(--qk-green);
}
.timeline-item.active .timeline-badge {
    background: var(--qk-green);
    border-color: var(--qk-green);
    box-shadow: 0 0 0 6px rgba(3, 199, 90, 0.2);
}
.timeline-content {
    background: var(--qk-card);
    padding: 14px 16px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
}
.timeline-time {
    font-size: 0.7rem;
    font-weight: 800;
    color: var(--qk-muted);
    text-transform: uppercase;
    display: block;
    margin-bottom: 4px;
    letter-spacing: 0.5px;
}
.timeline-title {
    font-size: 0.95rem;
    font-weight: 800;
    margin-bottom: 4px;
    color: var(--qk-dark);
}
.timeline-content p {
    font-size: 0.8rem !important;
    line-height: 1.4 !important;
}

@media (max-width: 768px) {
    .track-lookup-card {
        padding: 24px 16px !important;
        margin: 20px auto !important;
        box-shadow: none !important;
        border: none !important;
        background: transparent !important;
    }
}

/* 10. Global Form Controls Styling */
.form-control {
    width: 100%;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-md) !important;
    padding: 14px 20px !important;
    font-weight: 500 !important;
    font-size: 0.95rem;
    background: var(--qk-card);
    transition: var(--transition);
    box-sizing: border-box;
}
.form-control:focus {
    border-color: var(--qk-green) !important;
    box-shadow: 0 4px 12px rgba(3, 199, 90, 0.08);
    background: var(--qk-card);
}
.form-group {
    margin-bottom: 18px;
    display: flex;
    flex-direction: column;
}
.form-group label {
    font-weight: 800;
    font-size: 0.85rem;
    color: var(--qk-dark);
    text-transform: uppercase;
    margin-bottom: 6px;
    display: block;
    letter-spacing: 0.5px;
}
.form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}
@media (max-width: 480px) {
    .form-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }
}

/* 11. Auth Forms Responsive Adjustments */
@media (max-width: 768px) {
    .auth-container {
        padding: 24px 16px !important;
        margin: 20px auto !important;
        box-shadow: none !important;
        border: none !important;
        background: transparent !important;
    }
}

/* 11. Admin Mobile Layout & Navigation */
.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.admin-products-layout {
    display: grid !important;
    grid-template-columns: 1.25fr 2fr !important;
    gap: 30px !important;
}

@media (max-width: 768px) {
    .admin-sidebar {
        position: static !important;
        width: 100% !important;
        height: auto !important;
        padding: 20px 16px !important;
        box-sizing: border-box !important;
        flex-direction: column !important;
        gap: 20px !important;
        box-shadow: none !important;
        border-bottom: 1px solid var(--border-color);
    }
    .admin-sidebar .admin-logo {
        padding-bottom: 16px !important;
        justify-content: center !important;
    }
    .admin-main {
        margin-left: 0 !important;
        padding: 24px 16px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .admin-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 16px !important;
        margin-bottom: 24px !important;
    }
    .admin-menu {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    .admin-menu-item {
        flex: 1 1 calc(50% - 8px) !important;
    }
    .admin-menu-item a {
        padding: 10px 12px !important;
        font-size: 0.85rem !important;
        justify-content: center !important;
    }
    .admin-products-layout {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
}

/* ==========================================================================
   12. QuickKart Checkout Simplification Styles & Responsive Audits
   ========================================================================== */

/* Hide WooCommerce native billing fields that are simplified */
#billing_last_name_field,
#billing_company_field,
#billing_country_field,
#billing_address_2_field,
#billing_city_field,
#billing_state_field,
#billing_postcode_field,
#billing_delivery_zone_field {
    display: none !important;
}

/* Ensure no horizontal scroll on the entire html/body viewport */
html, body {
    max-width: 100% !important;
    overflow-x: hidden !important;
}

/* Ensure correct page/container box sizing */
.container,
.nav-bar,
.hero-banner,
.cart-layout,
.product-detail-layout,
.checkout-steps,
.woocommerce-checkout {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Audited mobile widths responsive optimizations (360px, 375px, 390px, 414px) */
@media (max-width: 768px) {
    /* Set container margins and padding on mobile */
    .container {
        padding: 0 16px !important;
    }

    /* Compact Mobile Navigation Bar inside sticky header */
    .header-glass .nav-bar {
        height: 64px !important;
        padding: 0 10px !important;
        gap: 6px !important;
    }
    
    .logo img {
        height: 28px !important;
        width: auto !important;
        max-width: 105px !important;
    }
    
    .nav-location {
        padding: 6px 8px !important;
        border-radius: 8px !important;
        gap: 4px !important;
        max-width: 130px !important;
        white-space: nowrap;
    }
    
    .nav-location i {
        font-size: 0.95rem !important;
    }
    
    .nav-location div > div {
        display: none !important; /* Hides Deliver to label */
    }
    
    .nav-location select {
        font-size: 0.8rem !important;
        font-weight: 800 !important;
        padding-right: 0 !important;
        max-width: 95px !important;
    }
    
    .nav-actions {
        gap: 6px !important;
    }
    
    .nav-actions .btn-outline {
        display: none !important; /* Hide account actions from header on mobile */
    }
    
    .btn-cart {
        padding: 8px 10px !important;
        border-radius: 8px !important;
        gap: 4px !important;
        font-size: 0.8rem !important;
    }
    
    .btn-cart .cart-price {
        display: none !important; /* Hide price to prevent header wrap */
    }
    
    .btn-cart .cart-count-badge {
        padding: 1px 5px !important;
        font-size: 0.7rem !important;
    }

    /* Checkout progress steps adjustments */
    .checkout-steps {
        padding: 0 10px !important;
        margin-bottom: 24px !important;
    }
    
    .step-number {
        width: 38px !important;
        height: 38px !important;
        font-size: 0.9rem !important;
    }
    
    .step-label {
        font-size: 0.7rem !important;
    }
    
    .checkout-steps::before, .step-bar-fill {
        top: 19px !important;
        left: 20px !important;
        right: 20px !important;
    }
    
    /* Ensure no text overflows on product cards */
    .product-title {
        word-break: break-word;
    }
}

/* Style WooCommerce Native Payment Gateways */
#payment {
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
    margin-top: 15px !important;
}

#payment ul.payment_methods {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 20px 0 !important;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

#payment ul.payment_methods li {
    background: var(--qk-card) !important;
    border: 2px solid var(--border-color) !important;
    border-radius: var(--radius-md) !important;
    padding: 16px 20px !important;
    transition: var(--transition) !important;
    cursor: pointer !important;
    position: relative !important;
    font-weight: 500 !important;
}

#payment ul.payment_methods li:hover {
    border-color: var(--qk-blue) !important;
}

#payment ul.payment_methods li input[type="radio"] {
    margin-right: 12px !important;
    accent-color: var(--qk-orange) !important;
    transform: scale(1.1) !important;
}

#payment ul.payment_methods li label {
    font-weight: 800 !important;
    font-size: 1rem !important;
    color: var(--qk-dark) !important;
    cursor: pointer !important;
}

#payment ul.payment_methods li div.payment_box {
    margin-top: 10px !important;
    padding: 12px !important;
    background: var(--qk-bg) !important;
    border-radius: var(--radius-sm) !important;
    font-size: 0.85rem !important;
    color: var(--qk-muted) !important;
    line-height: 1.45 !important;
    border: none !important;
    box-shadow: none !important;
}

#payment ul.payment_methods li div.payment_box::before {
    display: none !important; /* Hide WooCommerce triangle speech bubble */
}

/* Style the active selected payment method card */
#payment ul.payment_methods li.payment_method_active {
    border-color: var(--qk-orange) !important;
    background: rgba(255, 90, 31, 0.02) !important;
}

/* Style place order button wrapper */
#payment div.form-row.place-order {
    padding: 0 !important;
    margin: 20px 0 0 0 !important;
    background: transparent !important;
    float: none !important;
}

#payment #place_order {
    background: linear-gradient(135deg, var(--qk-orange) 0%, var(--qk-orange-dark) 100%) !important;
    color: var(--qk-card) !important;
    box-shadow: 0 6px 20px -4px rgba(255, 90, 31, 0.35) !important;
    padding: 16px 28px !important;
    border-radius: var(--radius-md) !important;
    font-weight: 800 !important;
    font-size: 1.05rem !important;
    width: 100% !important;
    cursor: pointer !important;
    transition: var(--transition) !important;
    border: none !important;
    float: none !important;
    display: block !important;
    text-align: center !important;
    line-height: 1.2 !important;
}

#payment #place_order:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 24px -3px rgba(255, 90, 31, 0.5) !important;
}

#payment #place_order:active {
    transform: translateY(0) !important;
}

/* Style direct bank transfer instructions table for Maldives */
.woocommerce-thankyou-order-details {
    list-style: none !important;
    padding: 16px !important;
    background: var(--qk-blue-soft) !important;
    border: 1px solid rgba(13, 71, 201, 0.15) !important;
    border-radius: var(--radius-md) !important;
    margin-bottom: 24px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
}

.woocommerce-thankyou-order-details li {
    flex: 1 1 120px !important;
    font-size: 0.85rem !important;
    color: var(--qk-muted) !important;
}

.woocommerce-thankyou-order-details li strong {
    display: block !important;
    color: var(--qk-blue) !important;
    font-size: 1rem !important;
    margin-top: 4px !important;
}

.woocommerce-order-details, .woocommerce-customer-details {
    background: var(--qk-card) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-lg) !important;
    padding: 24px !important;
    margin-bottom: 30px !important;
    box-shadow: var(--shadow-sm) !important;
}

.woocommerce-order-details h2, .woocommerce-customer-details h2 {
    font-size: 1.25rem !important;
    margin-bottom: 16px !important;
    border-bottom: 2px solid var(--qk-bg) !important;
    padding-bottom: 10px !important;
}

/* ==========================================================================
   13. WooCommerce My Account Custom Login/Register & Notices Overrides
   ========================================================================== */

/* Centered single-column login/register card container */
.auth-wrapper {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    min-height: 70vh !important;
    padding: 40px 16px !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

.auth-container {
    max-width: 500px !important;
    width: 100% !important;
    margin: 0 auto !important;
    background: var(--qk-card) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-lg) !important;
    padding: 48px !important;
    box-shadow: var(--shadow-lg) !important;
    box-sizing: border-box !important;
}

.auth-brand-logo {
    display: block !important;
    margin: 0 auto 18px !important;
}

/* WooCommerce Notices Overhaul (Success, Error, Info alerts) */
.woocommerce-error, .woocommerce-message, .woocommerce-info {
    padding: 16px 20px !important;
    border-radius: var(--radius-md) !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    margin: 0 auto 24px auto !important;
    list-style: none !important;
    position: relative !important;
    border: 1px solid transparent !important;
    max-width: 550px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    font-family: var(--font) !important;
}

.woocommerce-error {
    background: rgba(244, 63, 94, 0.05) !important;
    border-color: rgba(244, 63, 94, 0.15) !important;
    color: var(--qk-coral) !important;
}

.woocommerce-message {
    background: rgba(16, 185, 129, 0.05) !important;
    border-color: rgba(16, 185, 129, 0.15) !important;
    color: var(--qk-green) !important;
}

.woocommerce-info {
    background: rgba(13, 71, 201, 0.05) !important;
    border-color: rgba(13, 71, 201, 0.15) !important;
    color: var(--qk-blue) !important;
}

.woocommerce-error::before {
    content: '⚠️ ' !important;
}

.woocommerce-message::before {
    content: '✅ ' !important;
}

.woocommerce-info::before {
    content: 'ℹ️ ' !important;
}

@media (max-width: 768px) {
    .auth-wrapper {
        padding: 20px 8px !important;
    }
    .auth-container {
        padding: 30px 20px !important;
        border: none !important;
        box-shadow: none !important;
        background: transparent !important;
    }
    .woocommerce-error, .woocommerce-message, .woocommerce-info {
        max-width: 100% !important;
        border-radius: var(--radius-sm) !important;
    }
}

/* Ensure WooCommerce notice list items do not display bullets */
.woocommerce-error li,
.woocommerce-message li,
.woocommerce-info li {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* High-specificity overrides for WooCommerce primary auth buttons */
.woocommerce-form-login__submit,
.woocommerce-form-register__submit {
    background: linear-gradient(135deg, var(--qk-orange) 0%, var(--qk-orange-dark) 100%) !important;
    color: var(--qk-card) !important;
    border: none !important;
    cursor: pointer !important;
    transition: var(--transition) !important;
}

.woocommerce-form-login__submit:hover,
.woocommerce-form-register__submit:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 24px -3px rgba(255, 90, 31, 0.5) !important;
    color: var(--qk-card) !important;
}

/* Auth input focus states to match premium QuickKart search input */
.auth-container input[type="text"]:focus,
.auth-container input[type="email"]:focus,
.auth-container input[type="password"]:focus,
.auth-container input[type="tel"]:focus,
.auth-container select:focus,
.auth-container textarea:focus {
    border-color: var(--qk-orange) !important;
    background-color: var(--qk-card) !important;
    box-shadow: 0 0 0 4px rgba(255, 90, 31, 0.1) !important;
    outline: none !important;
}

/* Responsive grid stacking for authentication form fields on mobile */
@media (max-width: 576px) {
    .auth-container .form-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
}

/* ==========================================================================
   14. WooCommerce Logged-in My Account Dashboard Styles
   ========================================================================== */

/* Main My Account layout structure */
.woocommerce-account .woocommerce {
    display: flex !important;
    flex-direction: row !important;
    gap: 32px !important;
    align-items: flex-start !important;
    margin-top: 30px !important;
}

/* My Account Navigation card */
.woocommerce-MyAccount-navigation {
    flex: 0 0 280px !important;
    background: var(--qk-card) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-lg) !important;
    padding: 24px 16px !important;
    box-shadow: var(--shadow-sm) !important;
    box-sizing: border-box !important;
}

.woocommerce-MyAccount-navigation ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.woocommerce-MyAccount-navigation li {
    margin-bottom: 8px !important;
}

.woocommerce-MyAccount-navigation li:last-child {
    margin-bottom: 0 !important;
}

.woocommerce-MyAccount-navigation li a {
    display: flex !important;
    align-items: center !important;
    padding: 12px 18px !important;
    border-radius: var(--radius-md) !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    color: var(--qk-dark) !important;
    transition: var(--transition) !important;
    position: relative !important;
    text-decoration: none !important;
}

.woocommerce-MyAccount-navigation li a:hover {
    background: var(--qk-blue-soft) !important;
    color: var(--qk-blue) !important;
}

/* Active navigation item highlight matching QuickKart brand colors */
.woocommerce-MyAccount-navigation li.is-active a {
    background: var(--qk-orange-soft) !important;
    color: var(--qk-orange) !important;
}

.woocommerce-MyAccount-navigation li.is-active a::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 4px !important;
    height: 20px !important;
    background: var(--qk-orange) !important;
    border-radius: 0 4px 4px 0 !important;
}

/* Dashboard content wrapper card */
.woocommerce-MyAccount-content {
    flex: 1 !important;
    background: var(--qk-card) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-lg) !important;
    padding: 40px !important;
    box-shadow: var(--shadow-sm) !important;
    box-sizing: border-box !important;
    min-height: 400px !important;
}

/* Responsive alignment for My Account dashboard grid */
@media (max-width: 991px) {
    .woocommerce-account .woocommerce {
        flex-direction: column !important;
        gap: 24px !important;
    }
    .woocommerce-MyAccount-navigation {
        width: 100% !important;
        flex: none !important;
    }
    .woocommerce-MyAccount-navigation ul {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    .woocommerce-MyAccount-navigation li {
        margin-bottom: 0 !important;
        flex: 1 1 auto !important;
    }
    .woocommerce-MyAccount-navigation li a {
        justify-content: center !important;
        padding: 10px 14px !important;
        font-size: 0.85rem !important;
    }
    .woocommerce-MyAccount-navigation li.is-active a::before {
        display: none !important;
    }
    .woocommerce-MyAccount-content {
        width: 100% !important;
        padding: 24px !important;
    }
}

/* Style dashboard tables (e.g. Orders list) */
.woocommerce-MyAccount-content table.shop_table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-md) !important;
    width: 100% !important;
    margin-bottom: 24px !important;
    overflow: hidden !important;
}

.woocommerce-MyAccount-content table.shop_table th {
    background: var(--qk-bg) !important;
    color: var(--qk-dark) !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    font-size: 0.8rem !important;
    letter-spacing: 0.5px !important;
    padding: 14px 18px !important;
    border-bottom: 1px solid var(--border-color) !important;
}

.woocommerce-MyAccount-content table.shop_table td {
    padding: 16px 18px !important;
    border-bottom: 1px solid var(--border-color) !important;
    font-size: 0.9rem !important;
}

.woocommerce-MyAccount-content table.shop_table tr:last-child td {
    border-bottom: none !important;
}

/* Edit Address columns in My Account */
.woocommerce-Addresses {
    display: flex !important;
    gap: 20px !important;
    margin-top: 20px !important;
}

.woocommerce-Address {
    flex: 1 !important;
    background: var(--qk-bg) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-md) !important;
    padding: 20px !important;
    box-sizing: border-box !important;
}

.woocommerce-Address-title {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 12px !important;
    border-bottom: 1px dashed var(--border-color) !important;
    padding-bottom: 8px !important;
}

.woocommerce-Address-title h3 {
    font-size: 1.1rem !important;
    margin: 0 !important;
    font-weight: 800 !important;
    color: var(--qk-dark) !important;
}

.woocommerce-Address-title a.edit {
    color: var(--qk-blue) !important;
    font-weight: 700 !important;
    font-size: 0.85rem !important;
    text-decoration: none !important;
}

@media (max-width: 768px) {
    .woocommerce-Addresses {
        flex-direction: column !important;
    }
}

/* Dashboard Forms, Fields and Labels overrides */
.woocommerce-MyAccount-content label {
    font-weight: 800 !important;
    font-size: 0.8rem !important;
    color: var(--qk-dark) !important;
    text-transform: uppercase !important;
    margin-bottom: 6px !important;
    display: block !important;
    letter-spacing: 0.5px !important;
}

.woocommerce-MyAccount-content input.input-text,
.woocommerce-MyAccount-content select,
.woocommerce-MyAccount-content textarea {
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-md) !important;
    padding: 12px 18px !important;
    font-weight: 500 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    background-color: var(--qk-bg) !important;
    transition: var(--transition) !important;
}

.woocommerce-MyAccount-content input.input-text:focus,
.woocommerce-MyAccount-content select:focus,
.woocommerce-MyAccount-content textarea:focus {
    border-color: var(--qk-orange) !important;
    background-color: var(--qk-card) !important;
    box-shadow: 0 0 0 4px rgba(255, 90, 31, 0.1) !important;
    outline: none !important;
}

.woocommerce-MyAccount-content button.button {
    padding: 12px 24px !important;
    font-size: 0.95rem !important;
    border-radius: var(--radius-md) !important;
    background: linear-gradient(135deg, var(--qk-orange) 0%, var(--qk-orange-dark) 100%) !important;
    color: var(--qk-card) !important;
    border: none !important;
    font-weight: 800 !important;
    cursor: pointer !important;
    transition: var(--transition) !important;
}

.woocommerce-MyAccount-content button.button:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px -4px rgba(255, 90, 31, 0.4) !important;
}

/* WooCommerce Lost Password Form Styles */
.woocommerce-ResetPassword {
    max-width: 480px !important;
    width: 100% !important;
    margin: 40px auto !important;
    background: var(--qk-card) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-lg) !important;
    padding: 48px !important;
    box-shadow: var(--shadow-lg) !important;
    box-sizing: border-box !important;
}

.woocommerce-ResetPassword p {
    font-size: 0.95rem !important;
    color: var(--qk-muted) !important;
    margin-bottom: 20px !important;
    line-height: 1.5 !important;
    text-align: center !important;
}

.woocommerce-ResetPassword input[type="text"] {
    width: 100% !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-md) !important;
    padding: 14px 20px !important;
    font-weight: 500 !important;
    margin-bottom: 20px !important;
    box-sizing: border-box !important;
}

.woocommerce-ResetPassword button[type="submit"] {
    width: 100% !important;
    padding: 14px !important;
    font-size: 1rem !important;
    border-radius: var(--radius-md) !important;
    background: linear-gradient(135deg, var(--qk-orange) 0%, var(--qk-orange-dark) 100%) !important;
    color: var(--qk-card) !important;
    box-shadow: 0 4px 12px rgba(255, 90, 31, 0.2) !important;
    border: none !important;
    font-weight: 800 !important;
    text-align: center !important;
    cursor: pointer !important;
    transition: var(--transition) !important;
}

.woocommerce-ResetPassword button[type="submit"]:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 24px -3px rgba(255, 90, 31, 0.5) !important;
}

@media (max-width: 768px) {
    .woocommerce-ResetPassword {
        padding: 30px 20px !important;
        border: none !important;
        box-shadow: none !important;
        background: transparent !important;
    }
}

/* ==========================================================================
   15. AJAX Live Search Suggestions Dropdown & Visual Cleanup
   ========================================================================== */

/* Live Search Suggestions Dropdown */
.search-suggestions-container {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    background: var(--qk-card) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-lg) !important;
    z-index: 9999 !important;
    margin-top: 8px !important;
    max-height: 400px !important;
    overflow-y: auto !important;
    display: none;
    box-sizing: border-box !important;
}

.search-suggestions-container.active {
    display: block !important;
}

.search-suggestion-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px 16px !important;
    border-bottom: 1px solid var(--border-color) !important;
    cursor: pointer !important;
    transition: var(--transition) !important;
    text-decoration: none !important;
    text-align: left !important;
}

.search-suggestion-item:last-child {
    border-bottom: none !important;
}

.search-suggestion-item:hover {
    background-color: var(--qk-blue-soft) !important;
}

.search-suggestion-thumb {
    width: 44px !important;
    height: 44px !important;
    object-fit: cover !important;
    border-radius: var(--radius-sm) !important;
    background: var(--qk-bg) !important;
    border: 1px solid var(--border-color) !important;
    flex-shrink: 0 !important;
}

.search-suggestion-info {
    flex-grow: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    overflow: hidden !important;
}

.search-suggestion-name {
    font-weight: 700 !important;
    color: var(--qk-dark) !important;
    font-size: 0.95rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.search-suggestion-meta {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
}

.search-suggestion-price {
    font-weight: 800 !important;
    color: var(--qk-orange) !important;
    font-size: 0.85rem !important;
}

.search-suggestion-stock {
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    padding: 2px 8px !important;
    border-radius: 20px !important;
    text-transform: uppercase !important;
}

.search-suggestion-stock.instock {
    background-color: rgba(16, 185, 129, 0.1) !important;
    color: var(--qk-green) !important;
}

.search-suggestion-stock.outofstock {
    background-color: rgba(244, 63, 94, 0.1) !important;
    color: var(--qk-coral) !important;
}

/* Loading & Empty status styles inside search suggestions */
.search-suggestion-status {
    padding: 20px !important;
    text-align: center !important;
    font-family: var(--font) !important;
    font-weight: 600 !important;
    color: var(--qk-muted) !important;
    font-size: 0.9rem !important;
}

.search-suggestion-spinner {
    display: inline-block !important;
    width: 16px !important;
    height: 16px !important;
    border: 3px solid rgba(255, 90, 31, 0.1) !important;
    border-radius: 50% !important;
    border-top-color: var(--qk-orange) !important;
    animation: qk-spin 0.8s linear infinite !important;
    margin-right: 8px !important;
    vertical-align: middle !important;
}

@keyframes qk-spin {
    to { transform: rotate(360deg); }
}

/* Custom visual helper styling to ensure consistent thumbnail layouts */
.qk-product-img {
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    transition: var(--transition) !important;
}

.product-card:hover .qk-product-img {
    transform: scale(1.06) translateY(-2px) !important;
}

/* Responsive adjustments for My Account overview dashboard */
@media (max-width: 768px) {
    /* Full-width suggestions drawer on mobile */
    .search-suggestions-container {
        position: fixed !important;
        top: 64px !important;
        left: 0 !important;
        right: 0 !important;
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
        max-height: calc(100vh - 144px) !important;
        margin-top: 0 !important;
    }
    
    .qk-dashboard-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    
    .qk-dashboard-actions {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
}

/* ==========================================================================
   QuickKart Premium Mobile UX Rebuild
   ========================================================================== */

:root {
    --qk-mobile-nav-height: 72px;
    --qk-mobile-cart-height: 66px;
    --qk-card-radius: 14px;
}

.mobile-header-actions {
    display: none;
}

.qk-page-kicker {
    display: inline-flex;
    align-items: center;
    margin-bottom: 6px;
    color: var(--qk-blue);
    font-size: 0.75rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.qk-product-search-form {
    position: relative;
    width: 100%;
}

.qk-product-search-form > .fa-magnifying-glass {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--qk-muted);
    z-index: 2;
}

.qk-product-search-form .search-input {
    height: 52px;
    padding: 0 92px 0 44px;
    border: 1px solid var(--border-color);
    background: var(--qk-card);
    box-shadow: var(--shadow-sm);
}

.qk-search-submit,
.qk-search-clear {
    position: absolute;
    right: 6px;
    top: 6px;
    bottom: 6px;
    min-width: 76px;
    border-radius: 10px;
    background: var(--qk-orange);
    color: #fff;
    font-size: 0.82rem;
    font-weight: 900;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.qk-search-clear {
    min-width: 40px;
    background: var(--qk-bg);
    color: var(--qk-muted);
}

.qk-archive-header,
.qk-cart-heading {
    margin-bottom: 18px;
}

.qk-archive-title,
.qk-cart-heading h1,
.qk-search-hero h1 {
    font-size: clamp(1.65rem, 4vw, 2.4rem);
    line-height: 1.08;
    letter-spacing: -0.02em;
    overflow-wrap: anywhere;
}

.qk-cart-heading h1 i {
    color: var(--qk-orange);
}

.qk-products-search-panel,
.qk-search-hero {
    background: var(--qk-card);
    border: 1px solid var(--border-color);
    border-radius: var(--qk-card-radius);
    padding: 16px;
    margin-bottom: 16px;
    box-shadow: var(--shadow-sm);
}

.qk-popular-searches {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}

.qk-popular-searches > span:first-child {
    color: var(--qk-muted);
    font-size: 0.78rem;
    font-weight: 900;
    text-transform: uppercase;
}

.qk-category-chips {
    position: sticky;
    top: 92px;
    z-index: 50;
    background: var(--qk-bg);
    margin: 0 -2px 18px;
    padding: 8px 2px 12px;
}

.qk-category-chips .category-chip,
.qk-popular-searches .search-chip {
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--border-color);
    color: var(--qk-dark);
    box-shadow: none;
}

.qk-category-chips .category-chip.active,
.qk-popular-searches .search-chip:hover {
    background: var(--qk-orange);
    border-color: var(--qk-orange);
    color: #fff;
}

.qk-empty-state {
    background: var(--qk-card);
    border: 1px dashed var(--border-color);
    border-radius: var(--qk-card-radius);
    padding: 42px 20px;
    text-align: center;
}

.qk-empty-icon {
    width: 62px;
    height: 62px;
    margin: 0 auto 14px;
    border-radius: 18px;
    background: var(--qk-orange-soft);
    color: var(--qk-orange);
    display: grid;
    place-items: center;
    font-size: 1.55rem;
}

.qk-search-page {
    max-width: 1200px;
    margin: 0 auto;
}

.qk-search-results-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin: 22px 0 14px;
}

.qk-search-results-head h2,
.qk-search-categories h2 {
    font-size: 1.25rem;
}

.qk-search-results-head span {
    color: var(--qk-muted);
    font-size: 0.85rem;
    font-weight: 800;
}

.qk-card-title {
    font-size: 1.15rem;
    font-weight: 900;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 14px;
    margin-bottom: 12px;
}

.cart-item-unit {
    font-size: 0.78rem;
    color: var(--qk-muted);
    font-weight: 700;
    margin-bottom: 3px;
}

.cart-item-price {
    color: var(--qk-dark);
    font-weight: 900;
}

.qk-replacement-card {
    margin-top: 22px;
    border-top: 1px solid var(--border-color);
    padding-top: 18px;
}

.qk-replacement-card h4 {
    font-size: 1rem;
    font-weight: 900;
}

.qk-replacement-card h4 i {
    color: var(--qk-orange);
}

.summary-card .summary-row.total {
    border-top: 1px solid var(--border-color);
    margin-top: 12px;
    padding-top: 14px;
}

@media (min-width: 769px) {
    .qk-product-grid {
        grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    }
}

@media (max-width: 768px) {
    html,
    body {
        width: 100%;
        overflow-x: hidden;
    }

    body {
        padding-bottom: calc(var(--qk-mobile-nav-height) + 28px) !important;
        background: #f8fafc;
    }

    body:not(.woocommerce-cart):not(.woocommerce-checkout).has-mobile-cart,
    body:not(.woocommerce-cart):not(.woocommerce-checkout) {
        padding-bottom: calc(var(--qk-mobile-nav-height) + var(--qk-mobile-cart-height) + 24px) !important;
    }

    .admin-bar .header-glass {
        top: 46px;
    }

    .admin-bar .qk-category-chips {
        top: 132px;
    }

    .container {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    body > .container[style] {
        margin-top: 14px !important;
        min-height: 70vh;
    }

    .header-glass {
        top: 0;
        background: rgba(255, 255, 255, 0.96);
    }

    .header-glass .nav-bar {
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr) auto !important;
        grid-template-rows: auto auto !important;
        align-items: center !important;
        height: auto !important;
        min-height: 62px;
        padding: 8px 12px !important;
        column-gap: 8px !important;
        row-gap: 8px !important;
    }

    .logo {
        grid-column: 1;
        grid-row: 1;
        min-width: 0;
    }

    .logo img {
        height: 30px !important;
        max-width: 108px !important;
    }

    .nav-location {
        grid-column: 2;
        grid-row: 1;
        justify-self: stretch;
        min-width: 0;
        max-width: none !important;
        padding: 6px 8px !important;
        border-radius: 10px !important;
        overflow: hidden;
    }

    .nav-location select {
        width: 100%;
        max-width: none !important;
        font-size: 0.78rem !important;
        text-overflow: ellipsis;
    }

    .mobile-header-actions {
        grid-column: 3;
        grid-row: 1;
        display: flex;
        gap: 6px;
    }

    .mobile-header-icon {
        width: 34px;
        height: 34px;
        border-radius: 10px;
        background: var(--qk-blue-soft);
        color: var(--qk-blue);
        display: grid;
        place-items: center;
        position: relative;
        font-size: 0.9rem;
    }

    .mobile-header-cart {
        background: var(--qk-orange-soft);
        color: var(--qk-orange);
    }

    .mobile-header-cart .cart-count-badge {
        position: absolute;
        top: -5px;
        right: -5px;
        min-width: 17px;
        height: 17px;
        padding: 0 4px;
        border-radius: 999px;
        background: var(--qk-orange);
        color: #fff;
        font-size: 0.65rem;
        display: grid;
        place-items: center;
    }

    .nav-actions {
        display: none !important;
    }

    .nav-search {
        grid-column: 1 / -1;
        grid-row: 2;
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
    }

    .home .nav-search,
    .search .nav-search {
        display: none !important;
    }

    .nav-search form {
        width: 100%;
    }

    .nav-search .search-input {
        height: 42px !important;
        border-radius: 12px !important;
        padding-right: 76px !important;
    }

    .nav-search .btn-search-submit {
        width: 68px !important;
        padding: 0 !important;
        font-size: 0.75rem !important;
        border-radius: 9px !important;
    }

    .hero-banner {
        display: block !important;
        padding: 22px 16px 24px !important;
        margin: 8px 0 22px !important;
        border-radius: 18px !important;
        text-align: left !important;
        overflow: visible !important;
    }

    .hero-text {
        max-width: none !important;
    }

    .hero-delivery-promise {
        font-size: 0.68rem !important;
        padding: 6px 10px !important;
        margin-bottom: 12px !important;
    }

    .hero-text h1 {
        font-size: 2rem !important;
        line-height: 1.08 !important;
        margin-bottom: 10px !important;
        letter-spacing: -0.02em !important;
    }

    .hero-text p {
        font-size: 0.92rem !important;
        margin-bottom: 14px !important;
    }

    .hero-zone-chips {
        justify-content: flex-start !important;
        flex-wrap: nowrap !important;
        overflow-x: auto;
        padding-bottom: 2px;
        margin-bottom: 14px !important;
    }

    .hero-zone-chip {
        white-space: nowrap;
        flex: 0 0 auto;
    }

    .hero-banner form {
        max-width: none !important;
        width: 100% !important;
    }

    .hero-banner form .search-input {
        height: 50px !important;
        padding-right: 84px !important;
        border-radius: 14px !important;
    }

    .hero-banner form button[type="submit"] {
        width: 74px !important;
        padding: 0 !important;
    }

    .search-chips-container {
        justify-content: flex-start !important;
        flex-wrap: nowrap !important;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .search-chips-container::-webkit-scrollbar {
        display: none;
    }

    .category-grid {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 10px !important;
        overflow: visible !important;
    }

    .category-card {
        min-width: 0 !important;
        padding: 12px 6px !important;
        border-radius: 14px !important;
        gap: 8px !important;
    }

    .category-card:nth-child(n + 9) {
        display: none;
    }

    .category-icon {
        width: 42px !important;
        height: 42px !important;
        font-size: 1.55rem !important;
    }

    .category-card span {
        font-size: 0.72rem !important;
        line-height: 1.15;
        min-height: 1.7em;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .section-title {
        margin: 24px 0 14px !important;
        gap: 12px;
    }

    .section-title h2 {
        font-size: 1.2rem !important;
        padding-left: 0 !important;
    }

    .section-title h2::before {
        display: none;
    }

    .product-shelf,
    .qk-product-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
        margin-bottom: 26px !important;
    }

    .product-card {
        min-height: 0 !important;
        padding: 9px !important;
        border-radius: 14px !important;
        box-shadow: none !important;
        border-color: #edf0f3 !important;
    }

    .product-image-container {
        height: auto !important;
        aspect-ratio: 1 / 0.82;
        margin-bottom: 8px !important;
        border-radius: 12px !important;
    }

    .product-visual-wrapper {
        padding: 8px !important;
    }

    .qk-product-img,
    .product-visual-wrapper img {
        max-width: 92% !important;
        max-height: 92% !important;
        margin: auto !important;
    }

    .product-badge {
        top: 8px !important;
        left: 8px !important;
        padding: 3px 7px !important;
        font-size: 0.6rem !important;
        background: var(--qk-orange) !important;
    }

    .product-title {
        height: 35px !important;
        font-size: 0.82rem !important;
        line-height: 1.28 !important;
        margin-bottom: 5px !important;
        letter-spacing: 0 !important;
    }

    .product-meta {
        display: flex !important;
        align-items: center;
        gap: 6px;
        min-height: 18px;
        margin-bottom: 8px !important;
        font-size: 0.68rem !important;
    }

    .product-unit {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .product-stock {
        margin-left: auto;
        white-space: nowrap;
        color: var(--qk-muted);
        font-weight: 800;
    }

    .product-stock.in {
        display: none;
    }

    .product-stock.low,
    .product-stock.out {
        color: var(--qk-coral);
    }

    .product-action {
        align-items: center !important;
        gap: 8px;
    }

    .product-price {
        font-size: 0.92rem !important;
        line-height: 1.1;
        min-width: 0;
    }

    .product-price del,
    .product-price ins {
        display: block;
    }

    .product-card .add-btn {
        width: 58px;
        height: 32px;
        padding: 0 !important;
        border-radius: 9px !important;
        background: var(--qk-orange) !important;
        border-color: var(--qk-orange) !important;
        color: #fff !important;
        box-shadow: none !important;
    }

    .qty-control,
    .product-card .qty-control {
        background: var(--qk-orange) !important;
        box-shadow: none !important;
        border-radius: 9px !important;
    }

    .product-card .qty-control {
        width: 76px !important;
        height: 32px !important;
        padding: 2px !important;
    }

    .product-card .qty-btn {
        width: 26px !important;
        height: 28px !important;
    }

    .products-layout-wrapper {
        display: block !important;
        margin-top: 0 !important;
    }

    .products-content-area {
        width: 100%;
    }

    .category-sidebar-rail {
        display: none !important;
    }

    .qk-products-search-panel,
    .qk-search-hero {
        margin-left: -2px;
        margin-right: -2px;
        padding: 14px;
    }

    .qk-category-chips {
        display: flex !important;
        top: 72px;
    }

    .qk-search-hero {
        margin-top: 4px;
    }

    .qk-search-page-form .search-input,
    .qk-products-search-panel .search-input {
        height: 50px !important;
        padding-right: 82px !important;
    }

    .cart-layout {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    .cart-card,
    .summary-card {
        border-radius: 16px !important;
        padding: 14px !important;
        box-shadow: none !important;
    }

    .cart-item {
        grid-template-columns: 68px minmax(0, 1fr) !important;
        gap: 10px !important;
        padding: 10px !important;
        border-radius: 14px !important;
        box-shadow: none !important;
    }

    .cart-item-img {
        width: 68px !important;
        height: 68px !important;
        border-radius: 12px !important;
    }

    .cart-item-img .product-visual-wrapper {
        padding: 4px !important;
    }

    .cart-item-name {
        font-size: 0.88rem !important;
        line-height: 1.25 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .cart-item-actions {
        justify-content: flex-start !important;
    }

    .cart-item-actions .qty-control {
        width: 88px !important;
        max-width: 88px !important;
        background: var(--qk-orange) !important;
    }

    .btn-remove {
        width: 34px;
        height: 34px;
        border-radius: 10px;
        background: var(--qk-bg);
        margin-left: auto !important;
    }

    .preference-card-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .preference-select-card {
        display: block !important;
        text-align: center !important;
        padding: 10px 6px !important;
        border-radius: 12px !important;
    }

    .preference-icon {
        display: none;
    }

    .preference-title {
        font-size: 0.72rem !important;
    }

    .summary-row {
        font-size: 0.9rem;
    }

    .cart-checkout-sticky {
        bottom: var(--qk-mobile-nav-height) !important;
        padding: 10px 14px !important;
    }

    .mobile-cart-bar {
        bottom: calc(var(--qk-mobile-nav-height) + 10px) !important;
        height: 54px !important;
        border-radius: 16px !important;
    }

    .woocommerce-cart .mobile-cart-bar,
    .woocommerce-checkout .mobile-cart-bar {
        display: none !important;
    }

    .mobile-bottom-nav {
        display: block !important;
        height: var(--qk-mobile-nav-height) !important;
        z-index: 980 !important;
        padding-bottom: env(safe-area-inset-bottom);
    }

    .mobile-nav-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    }

    .mobile-nav-item {
        min-width: 0;
        font-size: 0.66rem !important;
        gap: 3px !important;
    }

    .mobile-nav-item i {
        font-size: 1.12rem !important;
    }

    .qk-site-footer {
        margin-top: 34px !important;
        padding: 22px 0 94px !important;
    }

    .qk-site-footer p {
        display: none;
    }

    .qk-footer-logo {
        margin-bottom: 12px !important;
        padding: 6px 14px !important;
    }

    .qk-footer-links {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px !important;
        margin-bottom: 12px !important;
        font-size: 0.78rem !important;
    }

    .woocommerce-account .woocommerce {
        margin-top: 8px !important;
        gap: 12px !important;
    }

    .woocommerce-MyAccount-navigation {
        padding: 10px !important;
        border-radius: 14px !important;
        box-shadow: none !important;
    }

    .woocommerce-MyAccount-navigation ul {
        flex-wrap: nowrap !important;
        overflow-x: auto;
    }

    .woocommerce-MyAccount-navigation li {
        flex: 0 0 auto !important;
    }

    .woocommerce-MyAccount-navigation li a {
        white-space: nowrap;
        border-radius: 999px !important;
    }

    .woocommerce-MyAccount-content {
        padding: 14px !important;
        border-radius: 16px !important;
        box-shadow: none !important;
    }

    .qk-dashboard-welcome-card,
    .qk-dashboard-info-box {
        padding: 16px !important;
        border-radius: 14px !important;
    }

    .qk-dashboard-welcome-card h2 {
        font-size: 1.35rem !important;
    }

    .qk-dashboard-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .checkout-steps {
        margin-top: 4px !important;
    }

    .sticky-mobile-purchase {
        bottom: var(--qk-mobile-nav-height) !important;
        z-index: 970 !important;
    }
}

@media (max-width: 390px) {
    .logo img {
        max-width: 96px !important;
    }

    .nav-location {
        padding-left: 6px !important;
        padding-right: 6px !important;
    }

    .mobile-header-icon {
        width: 32px;
        height: 32px;
    }

    .product-shelf,
    .qk-product-grid {
        gap: 8px !important;
    }

    .product-card {
        padding: 8px !important;
    }

    .product-price {
        font-size: 0.84rem !important;
    }

    .product-card .add-btn {
        width: 54px;
    }

    .qk-product-search-form .search-input {
        font-size: 0.82rem !important;
    }
}