/* Homepage Inline Styles - Optimized */
.homepage-body{background:#f9fafb;margin:0;padding:0}@media (max-width:768px){.best-selling-item,.recent-added-item,.seller-card-item{-webkit-tap-highlight-color:rgba(102,126,234,.1);touch-action:manipulation}.regular-section .product-card{-webkit-tap-highlight-color:rgba(102,126,234,.1);touch-action:manipulation}}.hp-banner-container{margin:0!important;padding:0!important;line-height:0!important;overflow:hidden;max-height:380px;margin-bottom:0!important}@media (max-width:768px){.hp-banner-container{max-height:280px;margin-bottom:0!important}#recent-added{margin-top:0!important;padding-top:0!important}section{padding-top:8px!important}}@media (max-width:480px){.hp-banner-container{max-height:200px;margin-bottom:0!important}#recent-added{margin-top:0!important;padding-top:0!important}section{padding-top:6px!important}}.hp-banner-display{margin:0;padding:0;display:block;line-height:0;position:relative;overflow:hidden;width:100%}.hp-banner-main{width:100%;display:block;margin:0;padding:0;object-position:center center;background-color:#f3f4f6}.hp-mosaic{position:absolute;top:0;left:0;overflow:hidden;pointer-events:none;z-index:1}.hp-mosaic .tile{position:absolute;will-change:transform,opacity;backface-visibility:hidden;transform-style:preserve-3d}.section-header{text-align:center;margin-bottom:24px}.section-header h2{font-size:1.75rem;font-weight:700;color:#1f2937;margin-bottom:6px}.section-header p{font-size:.9375rem;color:#6b7280}.featured-section{background:#fff;padding:36px 0;border-bottom:1px solid #e5e7eb}.featured-section .section-header h2{color:#1f2937}.regular-section{background:linear-gradient(180deg,#f9fafb 0%,#fff 100%);padding:40px 0}.products-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px;max-width:1400px;margin:0 auto;padding:0 20px}@media (min-width:640px){.products-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:22px}}@media (min-width:1024px){.products-grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:24px}}.regular-section .product-card{background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.08);transition:all .3s cubic-bezier(.4,0,.2,1);border:1px solid #e5e7eb}.regular-section .product-card:hover{transform:translateY(-8px);box-shadow:0 12px 32px rgba(0,0,0,.15);border-color:#667eea}

/* Fixed Bottom Logo Section Styles - REMOVED */
/* Logo moved back to header - no longer needed here */.regular-section .product-card a{display:block;text-decoration:none}.regular-section .product-card .card-media{position:relative;overflow:hidden}.regular-section .product-card .card-media img{transition:transform .5s ease}.regular-section .product-card:hover .card-media img{transform:scale(1.1)}.regular-section .product-card .p-4{padding:20px}.regular-section .product-card .service-badge{display:inline-block;padding:6px 12px;border-radius:20px;font-size:.75rem;font-weight:600;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;margin-bottom:12px}.regular-section .product-card .card-title{font-size:1.125rem;font-weight:700;color:#1f2937;margin-bottom:8px;line-height:1.4}.regular-section .product-card .card-desc{font-size:.875rem;color:#6b7280;line-height:1.6;margin-bottom:16px}.regular-section .product-card .pc-view{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:10px 20px;border-radius:10px;font-weight:600;transition:all .3s ease;display:inline-flex;align-items:center;gap:8px}.regular-section .product-card .pc-view:hover{background:linear-gradient(135deg,#764ba2,#667eea);transform:translateX(4px);box-shadow:0 4px 12px rgba(102,126,234,.4)}.featured-badge{position:absolute;top:10px;right:10px;background:#f59e0b;color:#fff;padding:4px 10px;border-radius:12px;font-size:.7rem;font-weight:600;z-index:10;display:flex;align-items:center;gap:4px}.featured-badge i{font-size:.65rem}.product-card-wrapper{position:relative}.home-products .product-card{transition:transform .2s ease,box-shadow .2s ease}.home-products .product-card:hover{transform:translateY(-4px);box-shadow:0 8px 20px rgba(0,0,0,.1)}.featured-section .product-card{background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 4px 16px rgba(0,0,0,.1);transition:all .3s ease;border:2px solid rgba(255,255,255,.5)}.featured-section .product-card:hover{transform:translateY(-6px);box-shadow:0 12px 32px rgba(0,0,0,.2)}.empty-state{text-align:center;padding:60px 20px}.empty-state-icon{width:80px;height:80px;margin:0 auto 20px;background:#f3f4f6;border-radius:50%;display:flex;align-items:center;justify-content:center}.empty-state-icon i{font-size:2.5rem;color:#9ca3af}.empty-state h3{font-size:1.25rem;font-weight:600;color:#374151;margin-bottom:8px}.empty-state p{font-size:.9375rem;color:#6b7280}.section-content{max-width:1400px;margin:0 auto;padding:0 20px}.recent-added-section,.best-selling-section,.featured-section,.official-seller-section{margin-top:0}@media (max-width:768px){.recent-added-section,.best-selling-section,.featured-section{margin-top:0;margin-bottom:0}.official-seller-section{margin-top:0}}.best-selling-section{background:#fff;padding:24px 0;margin-top:0;border-bottom:1px solid #e5e7eb}.best-selling-card{background:#fff;border-radius:16px;box-shadow:0 4px 20px rgba(0,0,0,.08);border:1px solid #e5e7eb;overflow:hidden;transition:all .3s ease}.best-selling-card:hover{box-shadow:0 8px 30px rgba(0,0,0,.12)}.best-selling-header{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);padding:14px 20px;border-bottom:none}.best-selling-title{color:#fff;font-size:1.1rem;font-weight:700;text-transform:uppercase;margin:0;display:flex;align-items:center;letter-spacing:.5px}.best-selling-body{padding:14px}.best-selling-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px}.best-selling-item{display:flex;align-items:center;gap:12px;padding:10px;border-radius:10px;background:#f9fafb;border:1px solid #e5e7eb;text-decoration:none;transition:all .3s ease;cursor:pointer}.best-selling-item:hover{background:#fff;border-color:#667eea;transform:translateY(-2px);box-shadow:0 4px 12px rgba(102,126,234,.15);text-decoration:none}.best-selling-item:active{transform:translateY(0)}.best-selling-image{width:80px;height:55px;object-fit:cover;border-radius:8px;flex-shrink:0;border:1px solid #e5e7eb}.best-selling-info{flex:1;min-width:0}.best-selling-name{color:#374151;font-size:.875rem;font-weight:600;margin:0 0 8px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.best-selling-badges{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.recent-added-section{background:#fff;padding:24px 0;margin-top:0;border-bottom:1px solid #e5e7eb}.recent-added-card{background:#fff;border-radius:16px;box-shadow:0 4px 20px rgba(0,0,0,.08);border:1px solid #e5e7eb;overflow:hidden;transition:all .3s ease}.recent-added-card:hover{box-shadow:0 8px 30px rgba(0,0,0,.12)}.recent-added-header{background:linear-gradient(135deg,#10b981 0%,#059669 100%);padding:14px 20px;border-bottom:none}.recent-added-title{color:#fff;font-size:1.1rem;font-weight:700;text-transform:uppercase;margin:0;display:flex;align-items:center;letter-spacing:.5px}.recent-added-body{padding:14px}.recent-added-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px}.recent-added-item{display:flex;align-items:center;gap:12px;padding:10px;border-radius:10px;background:#f9fafb;border:1px solid #e5e7eb;text-decoration:none;transition:all .3s ease;cursor:pointer}.recent-added-item:hover{background:#fff;border-color:#10b981;transform:translateY(-2px);box-shadow:0 4px 12px rgba(16,185,129,.15);text-decoration:none}.recent-added-item:active{transform:translateY(0)}.recent-added-image{width:80px;height:55px;object-fit:cover;border-radius:8px;flex-shrink:0;border:1px solid #e5e7eb}.recent-added-info{flex:1;min-width:0}.recent-added-name{color:#374151;font-size:.875rem;font-weight:600;margin:0 0 8px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.recent-added-badges{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.official-seller-section{background:linear-gradient(180deg,#f9fafb 0%,#fff 100%);padding:40px 0;border-bottom:1px solid #e5e7eb}.official-seller-card{background:#fff;border-radius:16px;box-shadow:0 4px 20px rgba(0,0,0,.08);border:1px solid #e5e7eb;overflow:hidden;transition:all .3s ease}.official-seller-card:hover{box-shadow:0 8px 30px rgba(0,0,0,.12)}.official-seller-header{background:linear-gradient(135deg,#f59e0b 0%,#d97706 100%);padding:16px 20px;border-bottom:none}.official-seller-title{color:#fff;font-size:1.1rem;font-weight:700;text-transform:uppercase;margin:0;display:flex;align-items:center;letter-spacing:.5px}.official-seller-body{padding:20px}.seller-carousel{overflow-x:auto;overflow-y:hidden;position:relative;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none}.seller-carousel::-webkit-scrollbar{display:none}.seller-slider{display:flex;gap:16px;animation:scroll 30s linear infinite;will-change:transform}@keyframes scroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}.seller-slider:hover{animation-play-state:paused}@media (max-width:768px){.seller-slider{animation-duration:25s}}@media (max-width:480px){.seller-slider{animation-duration:20s}}.seller-card-item{position:relative;flex-shrink:0;width:140px;height:100px;border-radius:10px;overflow:hidden;background:#f9fafb;border:1px solid #e5e7eb;transition:all .3s ease;cursor:pointer}.seller-card-item:hover{transform:translateY(-4px);box-shadow:0 8px 20px rgba(0,0,0,.15);border-color:#f59e0b}.seller-card-item:active{transform:translateY(-2px)}.seller-card-image{width:100%;height:100%;object-fit:cover}.seller-card-overlay{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(to top,rgba(0,0,0,.8),transparent);padding:8px;transform:translateY(100%);transition:transform .3s ease}.seller-card-item:hover .seller-card-overlay{transform:translateY(0)}.seller-card-name{color:#fff;font-size:.75rem;font-weight:600;text-align:center;display:block}.badge-price{background:linear-gradient(135deg,#06b6d4,#0ea5e9);color:#fff;padding:4px 10px;border-radius:6px;font-size:.75rem;font-weight:700;white-space:nowrap}.badge-time{background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff;padding:4px 10px;border-radius:6px;font-size:.75rem;font-weight:600;white-space:nowrap}@media (max-width:1024px){.best-selling-grid,.recent-added-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}.seller-card-item{width:130px;height:90px}.section-content{padding:0 18px}}@media (max-width:900px) and (min-width:769px){.best-selling-grid,.recent-added-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}.products-grid{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}}@media (max-width:768px){.best-selling-section,.recent-added-section,.official-seller-section{padding:16px 0}.section-content{padding:0 14px}.best-selling-card,.recent-added-card,.official-seller-card{border-radius:12px}.best-selling-header,.recent-added-header,.official-seller-header{padding:12px 14px}.best-selling-title,.recent-added-title,.official-seller-title{font-size:.9rem}.best-selling-title i,.recent-added-title i,.official-seller-title i{font-size:.85rem;margin-right:6px!important}.best-selling-body,.recent-added-body{padding:12px}.best-selling-grid,.recent-added-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}.best-selling-item,.recent-added-item{padding:12px;gap:12px;border-radius:10px;min-height:75px}.best-selling-image,.recent-added-image{width:70px;height:52px;border-radius:8px}.best-selling-name,.recent-added-name{font-size:.8rem;margin-bottom:8px;line-height:1.4}.badge-price,.badge-time{font-size:.7rem;padding:4px 9px;border-radius:6px}.official-seller-body{padding:12px}.seller-card-item{width:120px;height:85px;border-radius:10px}.seller-card-name{font-size:.7rem}.featured-section{padding:24px 0}.section-header{margin-bottom:18px;padding:0 4px}.section-header h2{font-size:1.4rem}.section-header p{font-size:.875rem}.products-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;padding:0 14px}.regular-section .product-card{border-radius:12px}.regular-section .product-card .p-4{padding:16px}.regular-section .product-card .card-title{font-size:1rem}.regular-section .product-card .card-desc{font-size:.8125rem}.regular-section .product-card .pc-view{padding:8px 16px;font-size:.875rem}}@media (max-width:480px){.best-selling-section,.recent-added-section,.official-seller-section{padding:12px 0}.section-content{padding:0 12px}.best-selling-card,.recent-added-card,.official-seller-card{border-radius:10px}.best-selling-header,.recent-added-header,.official-seller-header{padding:10px 12px}.best-selling-title,.recent-added-title,.official-seller-title{font-size:.85rem}.best-selling-title i,.recent-added-title i,.official-seller-title i{font-size:.75rem;margin-right:6px!important}.best-selling-body,.recent-added-body{padding:10px}.best-selling-grid,.recent-added-grid{grid-template-columns:1fr;gap:10px}.best-selling-item,.recent-added-item{padding:12px;gap:12px;flex-direction:row;align-items:center;min-height:75px;border-radius:8px}.best-selling-image,.recent-added-image{width:70px;height:52px;flex-shrink:0;border-radius:8px}.best-selling-info,.recent-added-info{flex:1;min-width:0}.best-selling-name,.recent-added-name{font-size:.8rem;margin-bottom:8px;-webkit-line-clamp:2;line-height:1.4}.best-selling-badges,.recent-added-badges{gap:6px;flex-wrap:wrap}.badge-price,.badge-time{font-size:.7rem;padding:4px 9px;border-radius:5px}.official-seller-body{padding:10px}.seller-carousel{margin:0 -12px;padding:0 12px}.seller-slider{gap:10px}.seller-card-item{width:110px;height:75px;border-radius:8px}.seller-card-overlay{padding:6px}.seller-card-name{font-size:.65rem}.featured-section{padding:20px 0}.section-header{margin-bottom:16px;padding:0 2px}.section-header h2{font-size:1.25rem}.section-header p{font-size:.8125rem}.products-grid{grid-template-columns:1fr;gap:14px;padding:0 12px}.regular-section{padding:24px 0}.regular-section .product-card{border-radius:10px}.regular-section .product-card .p-4{padding:14px}.regular-section .product-card .card-title{font-size:.95rem;margin-bottom:6px}.regular-section .product-card .card-desc{font-size:.8rem;margin-bottom:12px;line-height:1.5}.regular-section .product-card .card-media img{width:100%;height:auto}.regular-section .product-card .service-badge{font-size:.7rem;padding:5px 10px;margin-bottom:10px}.regular-section .product-card .pc-view{padding:8px 14px;font-size:.8125rem;width:100%;justify-content:center;min-height:40px}.regular-section .product-card .pc-actions{margin-top:12px}.featured-badge{top:8px;right:8px;padding:3px 8px;font-size:.65rem}}@media (max-width:360px){.best-selling-section,.recent-added-section,.official-seller-section{padding:10px 0}.section-content{padding:0 10px}.best-selling-card,.recent-added-card,.official-seller-card{border-radius:8px}.best-selling-header,.recent-added-header,.official-seller-header{padding:9px 10px}.best-selling-title,.recent-added-title,.official-seller-title{font-size:.8rem}.best-selling-title i,.recent-added-title i,.official-seller-title i{font-size:.7rem;margin-right:5px!important}.best-selling-body,.recent-added-body{padding:8px}.best-selling-item,.recent-added-item{padding:10px;gap:10px;min-height:70px;border-radius:6px}.best-selling-image,.recent-added-image{width:60px;height:45px;border-radius:6px}.best-selling-name,.recent-added-name{font-size:.75rem;margin-bottom:6px;line-height:1.3}.badge-price,.badge-time{font-size:.65rem;padding:3px 8px;border-radius:4px}.official-seller-body{padding:8px}.seller-carousel{margin:0 -10px;padding:0 10px}.seller-card-item{width:100px;height:70px;border-radius:6px}.seller-card-name{font-size:.6rem}.section-header h2{font-size:1.15rem}.section-header p{font-size:.75rem}.products-grid{padding:0 10px;gap:12px}.regular-section .product-card .p-4{padding:12px}.regular-section .product-card .card-title{font-size:.9rem}.regular-section .product-card .card-desc{font-size:.75rem}}

/* ============================================================================
   MOBILE PROFESSIONAL OVERHAUL
   Comprehensive mobile-first overrides for a clean, tight, modern homepage.
   Appended below existing styles to override without conflicting.
   ============================================================================ */

/* --------------------------------------------------------------------------
   1. GLOBAL MOBILE RESETS - Tighter spacing, smaller type, better flow
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    /* Reduce all section vertical spacing for tighter flow */
    .homepage-body section {
        padding-top: 10px !important;
        padding-bottom: 6px !important;
    }

    /* First section after banner = ZERO gap */
    .homepage-body #recent-added {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }

    /* Tighter container side padding */
    .homepage-body .container {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    /* Global font tightening */
    .homepage-body {
        font-size: 14px;
        line-height: 1.4;
    }

    /* Section gradient headers - smaller, tighter */
    .homepage-body section .rounded-t-2xl {
        padding: 8px 12px !important;
        border-radius: 10px 10px 0 0 !important;
    }

    .homepage-body section .rounded-t-2xl h2 {
        font-size: 0.75rem !important;
        gap: 6px !important;
        letter-spacing: 0.3px !important;
    }

    .homepage-body section .rounded-t-2xl h2 i {
        font-size: 0.65rem !important;
    }

    .homepage-body section .rounded-t-2xl span {
        font-size: 8px !important;
        padding: 2px 6px !important;
    }

    /* Section body containers - tighter */
    .homepage-body section .rounded-b-2xl {
        padding: 10px !important;
        border-radius: 0 0 10px 10px !important;
    }
}

@media (max-width: 480px) {
    .homepage-body section {
        padding-top: 6px !important;
        padding-bottom: 4px !important;
    }

    .homepage-body #recent-added {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }

    .homepage-body .container {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .homepage-body section .rounded-t-2xl {
        padding: 7px 10px !important;
        border-radius: 8px 8px 0 0 !important;
    }

    .homepage-body section .rounded-t-2xl h2 {
        font-size: 0.7rem !important;
    }

    .homepage-body section .rounded-b-2xl {
        padding: 8px !important;
        border-radius: 0 0 8px 8px !important;
    }
}

/* --------------------------------------------------------------------------
   2. RECENT ADDED SECTION - Compact single-column cards
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    /* Force single column with tighter gap */
    #recent-added .grid {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    /* Hide the 3D depth layer on mobile for cleaner look */
    #recent-added .group > .absolute.inset-0 {
        display: none !important;
    }

    /* Tighter card padding and sizing */
    #recent-added .group .relative.z-10 {
        padding: 8px 10px !important;
        gap: 10px !important;
        border-radius: 10px !important;
    }

    /* Smaller icon container */
    #recent-added .group .relative.z-10 > div:first-child {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        border-radius: 8px !important;
    }

    #recent-added .group .relative.z-10 > div:first-child i {
        font-size: 0.875rem !important;
    }

    /* Product title - tighter */
    #recent-added .group h3 {
        font-size: 10px !important;
        margin-bottom: 2px !important;
        line-height: 1.3 !important;
    }

    /* Price and delivery row */
    #recent-added .group .flex.items-center.gap-2 {
        gap: 6px !important;
    }

    #recent-added .group .flex.items-center.gap-2 span {
        font-size: 11px !important;
    }

    /* Delivery time text */
    #recent-added .group .flex.items-center.gap-1 span {
        font-size: 8px !important;
    }

    #recent-added .group .flex.items-center.gap-1 i {
        font-size: 7px !important;
    }

    /* Divider line */
    #recent-added .group .h-3.w-px {
        height: 10px;
    }

    /* Section top spacing */
    #recent-added {
        padding-top: 8px !important;
        padding-bottom: 4px !important;
    }
}

@media (max-width: 480px) {
    #recent-added .grid {
        gap: 6px !important;
    }

    #recent-added .group .relative.z-10 {
        padding: 7px 8px !important;
        gap: 8px !important;
        border-radius: 8px !important;
    }

    #recent-added .group .relative.z-10 > div:first-child {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        border-radius: 6px !important;
    }

    #recent-added .group .relative.z-10 > div:first-child i {
        font-size: 0.75rem !important;
    }

    #recent-added .group h3 {
        font-size: 9px !important;
    }

    #recent-added .group .flex.items-center.gap-2 span {
        font-size: 10px !important;
    }

    #recent-added {
        padding-top: 6px !important;
        padding-bottom: 2px !important;
    }
}

/* --------------------------------------------------------------------------
   3. BEST SELLING SECTION - Compact 2-col grid with smaller images
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    /* Keep 2-col but tighter gap */
    #best-selling .grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    /* Hide the 3D base layer on mobile */
    #best-selling .group > .absolute.inset-0 {
        display: none !important;
    }

    /* Smaller image aspect ratio */
    #best-selling .aspect-\[16\/11\] {
        aspect-ratio: 16 / 10 !important;
    }

    /* Tighter card body padding */
    #best-selling .group .p-2,
    #best-selling .group .sm\:p-3 {
        padding: 6px 8px !important;
    }

    /* Card border radius */
    #best-selling .group .relative.z-10 {
        border-radius: 10px !important;
    }

    /* Product title - smaller, tighter */
    #best-selling .group h3 {
        font-size: 10px !important;
        line-height: 1.25 !important;
        margin-bottom: 2px !important;
        height: 26px !important;
    }

    /* Stars row - tighter */
    #best-selling .group .flex.items-center.gap-0\.5 {
        margin-bottom: 4px !important;
    }

    #best-selling .group .flex.items-center.gap-0\.5 i {
        font-size: 6px !important;
    }

    /* Price row - tighter */
    #best-selling .group .border-t {
        padding-top: 4px !important;
    }

    /* Price text */
    #best-selling .group .text-rose-600 {
        font-size: 11px !important;
    }

    /* HOT badge - smaller */
    #best-selling .group .absolute.top-2.right-2 div {
        font-size: 7px !important;
        padding: 1px 4px !important;
    }

    /* Delivery time badge */
    #best-selling .group .flex.items-center.gap-1 {
        padding: 1px 4px !important;
    }

    #best-selling .group .flex.items-center.gap-1 span {
        font-size: 7px !important;
        max-width: 38px !important;
    }

    #best-selling .group .flex.items-center.gap-1 i {
        font-size: 6px !important;
    }

    /* Section spacing */
    #best-selling {
        padding-top: 4px !important;
        padding-bottom: 4px !important;
    }
}

@media (max-width: 480px) {
    #best-selling .grid {
        gap: 6px !important;
    }

    #best-selling .aspect-\[16\/11\] {
        aspect-ratio: 16 / 9 !important;
    }

    #best-selling .group .p-2,
    #best-selling .group .sm\:p-3 {
        padding: 5px 6px !important;
    }

    #best-selling .group .relative.z-10 {
        border-radius: 8px !important;
    }

    #best-selling .group h3 {
        font-size: 9px !important;
        height: 22px !important;
    }

    #best-selling .group .text-rose-600 {
        font-size: 10px !important;
    }

    #best-selling {
        padding-top: 2px !important;
        padding-bottom: 2px !important;
    }
}

@media (max-width: 360px) {
    #best-selling .group h3 {
        font-size: 8.5px !important;
        height: 20px !important;
    }

    #best-selling .group .text-rose-600 {
        font-size: 9px !important;
    }

    #best-selling .group .flex.items-center.gap-1 span {
        font-size: 6px !important;
        max-width: 32px !important;
    }
}

/* --------------------------------------------------------------------------
   4. FEATURED PRODUCTS SECTION - Tighter spacing refinements
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .featured-section {
        padding: 14px 0 !important;
    }

    .featured-section .section-header {
        margin-bottom: 12px !important;
    }

    .featured-section .section-header h2 {
        font-size: 1.15rem !important;
    }

    .featured-section .section-header p {
        font-size: 0.8rem !important;
        margin-top: 2px !important;
    }

    .featured-section .products-grid {
        gap: 10px !important;
        padding: 0 10px !important;
    }

    .featured-section .product-card {
        border-radius: 10px !important;
    }

    .featured-section .product-card .p-4,
    .featured-section .regular-section .product-card .p-4 {
        padding: 12px !important;
    }

    .featured-badge {
        top: 6px !important;
        right: 6px !important;
        padding: 2px 7px !important;
        font-size: 0.6rem !important;
        border-radius: 8px !important;
    }
}

@media (max-width: 480px) {
    .featured-section {
        padding: 10px 0 !important;
    }

    .featured-section .section-header {
        margin-bottom: 10px !important;
    }

    .featured-section .section-header h2 {
        font-size: 1.05rem !important;
    }

    .featured-section .products-grid {
        gap: 10px !important;
        padding: 0 8px !important;
    }
}

/* --------------------------------------------------------------------------
   5. OFFICIAL SELLER MARQUEE - Smaller cards, tighter padding
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    /* Section wrapper */
    .homepage-body section:has(.seller-marquee-container) {
        padding-top: 8px !important;
        padding-bottom: 4px !important;
    }

    /* Outer rounded card */
    .homepage-body .rounded-lg.overflow-hidden.shadow-lg:has(.seller-marquee-container) {
        border-radius: 10px !important;
    }

    /* Header bar */
    .homepage-body .gradient-primary:has(+ .bg-card .seller-marquee-container),
    .homepage-body div[style*="linear-gradient"]:has(+ .bg-card .seller-marquee-container) {
        padding: 6px 10px !important;
    }

    .homepage-body div[style*="linear-gradient"]:has(+ .bg-card .seller-marquee-container) h2 {
        font-size: 0.75rem !important;
    }

    .homepage-body div[style*="linear-gradient"]:has(+ .bg-card .seller-marquee-container) svg {
        width: 14px !important;
        height: 14px !important;
    }

    /* Body padding */
    .seller-marquee-container {
        padding: 0 !important;
    }

    .bg-card:has(.seller-marquee-container) {
        padding: 6px !important;
    }

    /* Smaller seller cards */
    .seller-track .flex-shrink-0 {
        width: 80px !important;
        margin-left: 4px !important;
        margin-right: 4px !important;
    }

    .seller-track .flex-shrink-0 > div {
        padding: 4px !important;
        border-radius: 8px !important;
    }

    .seller-track .flex-shrink-0 .aspect-square {
        border-radius: 6px !important;
    }

    .seller-track .flex-shrink-0 .aspect-square img {
        padding: 2px !important;
    }

    /* Seller name text */
    .seller-track .flex-shrink-0 p {
        font-size: 8px !important;
        margin-top: 3px !important;
    }

    /* Seller track gap */
    .seller-track {
        gap: 4px !important;
    }

    /* Edge fade gradients - narrower */
    .seller-marquee-container .absolute.left-0,
    .seller-marquee-container .absolute.right-0 {
        width: 16px !important;
    }

    /* Fallback for containers wrapping the marquee */
    .bg-card .absolute[class*="bg-gradient-to-r"],
    .bg-card .absolute[class*="bg-gradient-to-l"] {
        width: 16px !important;
    }
}

@media (max-width: 480px) {
    .seller-track .flex-shrink-0 {
        width: 68px !important;
        margin-left: 2px !important;
        margin-right: 2px !important;
    }

    .seller-track .flex-shrink-0 > div {
        padding: 3px !important;
        border-radius: 6px !important;
    }

    .seller-track .flex-shrink-0 p {
        font-size: 7px !important;
        margin-top: 2px !important;
    }

    .seller-track {
        gap: 2px !important;
    }
}

/* --------------------------------------------------------------------------
   6. WHY CHOOSE US SECTION - Tighter 2-col grid
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    /* Section vertical spacing */
    .homepage-body section:last-of-type {
        padding: 8px 0 10px !important;
    }

    /* Section title */
    .homepage-body section:last-of-type .text-center.mb-4 {
        margin-bottom: 8px !important;
    }

    .homepage-body section:last-of-type .text-center.mb-4 h2 {
        font-size: 0.8rem !important;
    }

    /* Tighter grid gap */
    .homepage-body section:last-of-type .grid.grid-cols-2 {
        gap: 6px !important;
    }

    /* Smaller feature cards */
    .homepage-body section:last-of-type .grid.grid-cols-2 > div {
        padding: 8px 6px !important;
        border-radius: 8px !important;
    }

    /* Smaller icon circle */
    .homepage-body section:last-of-type .grid.grid-cols-2 > div > div:first-child {
        width: 24px !important;
        height: 24px !important;
        margin-bottom: 4px !important;
    }

    .homepage-body section:last-of-type .grid.grid-cols-2 > div > div:first-child i {
        font-size: 10px !important;
    }

    /* Feature title */
    .homepage-body section:last-of-type .grid.grid-cols-2 > div h3 {
        font-size: 9px !important;
        line-height: 1.2 !important;
    }

    /* Feature description */
    .homepage-body section:last-of-type .grid.grid-cols-2 > div p {
        font-size: 7px !important;
        margin-top: 1px !important;
    }
}

@media (max-width: 480px) {
    .homepage-body section:last-of-type .grid.grid-cols-2 {
        gap: 5px !important;
    }

    .homepage-body section:last-of-type .grid.grid-cols-2 > div {
        padding: 6px 5px !important;
        border-radius: 6px !important;
    }

    .homepage-body section:last-of-type .grid.grid-cols-2 > div > div:first-child {
        width: 22px !important;
        height: 22px !important;
        margin-bottom: 3px !important;
    }

    .homepage-body section:last-of-type .grid.grid-cols-2 > div h3 {
        font-size: 8.5px !important;
    }
}

/* --------------------------------------------------------------------------
   7. MOBILE NAV BUTTON — Now inside mobile-top-header, old FAB styles removed
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   8. MOBILE TYPOGRAPHY & LINE-HEIGHT TIGHTENING
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    /* All headings tighter */
    .homepage-body h2 {
        line-height: 1.2 !important;
    }

    .homepage-body h3 {
        line-height: 1.25 !important;
    }

    .homepage-body p {
        line-height: 1.35 !important;
    }

    /* Badge text universal tightening */
    .homepage-body .badge-price,
    .homepage-body .badge-time {
        font-size: 0.65rem !important;
        padding: 2px 7px !important;
        border-radius: 4px !important;
    }

    /* Remove hover transforms on mobile (performance + no hover on touch) */
    .homepage-body .group:hover {
        transform: none !important;
    }

    /* Smoother tap feedback instead of hover transforms */
    .homepage-body .group:active {
        transform: scale(0.98) !important;
        transition: transform 0.1s ease !important;
    }
}

@media (max-width: 480px) {
    .homepage-body .badge-price,
    .homepage-body .badge-time {
        font-size: 0.6rem !important;
        padding: 2px 6px !important;
    }
}

/* --------------------------------------------------------------------------
   9. BANNER → CONTENT ZERO GAP FIX (ALL screens — PC + Mobile)
   Kill ALL empty space between banner bottom and first content section.
   -------------------------------------------------------------------------- */

/* ── Global: works on every screen size ── */

/* Banner wrappers: collapse all extra space */
.hp-banner-container,
.hp-banner-display {
    margin: 0 !important;
    padding: 0 !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    line-height: 0 !important;
}

/* Homepage body: ensure strict vertical flow with NO gaps */
.homepage-body {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* #recent-added — kill the Tailwind pt-4 / sm:pt-6 and background gap */
#recent-added {
    margin-top: -1px !important; /* Slight pull-up to overlap and kill any sub-pixel gap */
    padding-top: 0 !important;
    background: transparent !important;
    position: relative;
    z-index: 2;
}

/* Any section right after banner container = zero gap */
.hp-banner-container + section,
.hp-banner-container + div + section,
.homepage-body > .hp-banner-container ~ section:first-of-type {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* All sibling sections: no top margin between them */
.homepage-body > section + section,
.homepage-body > div + section,
.homepage-body > section + div {
    margin-top: 0 !important;
}

/* ── Mobile tighter (768px) ── */
@media (max-width: 768px) {
    .hp-banner-container {
        border-radius: 0 !important;
    }

    #recent-added {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }

    #recent-added > .container {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    /* Shadow reduction on mobile for cleaner look */
    .homepage-body .shadow-xl {
        box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06) !important;
    }
    .homepage-body .shadow-lg {
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05) !important;
    }
}

/* ── Extra tight (480px) ── */
@media (max-width: 480px) {
    #recent-added {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }
}