/* ============================================================
   UNISHOP — PREMIUM MOBILE HOMEPAGE REDESIGN
   All rules are scoped inside @media (max-width: 991.98px)
   so the desktop layout is NEVER affected.
   ============================================================ */

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

@media (max-width: 991.98px) {

    /* ── Base ───────────────────────────────────────────────── */
    body {
        font-family: 'Inter', sans-serif !important;
        background: #f5f6fa !important;
        overflow-x: hidden !important;
    }

    .container {
        padding-left: 12px !important;
        padding-right: 12px !important;
        max-width: 100% !important;
    }

    /* ── Hero Section ───────────────────────────────────────── */
    .hero-section {
        padding: 0 !important;
        background: #fff !important;
    }

    .hero-section .container {
        padding: 0 !important;
    }

    .hero-section .category-row {
        display: block !important;
    }

    /* Hide desktop category sidebar */
    .category-sidebar {
        display: none !important;
    }

    /* Main slider compact */
    .main-slider {
        width: 100% !important;
        min-height: 180px !important;
        max-height: 200px !important;
        overflow: hidden !important;
        position: relative !important;
        border-radius: 0 !important;
        background: #eaf4f6 !important;
    }

    .main-slider .slide {
        display: none !important;
        height: 180px !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 16px 20px !important;
        background: linear-gradient(135deg, #e8f8f5 0%, #d5eaf5 100%) !important;
        flex-direction: row-reverse !important;
    }

    .main-slider .slide.active {
        display: flex !important;
    }

    .main-slider .slide img {
        width: 120px !important;
        height: 140px !important;
        object-fit: contain !important;
        flex-shrink: 0 !important;
    }

    .main-slider .slide-content {
        flex: 1 !important;
        text-align: left !important;
        padding-right: 8px !important;
    }

    .main-slider .slide-content h1 {
        font-size: 16px !important;
        font-weight: 800 !important;
        color: #0f172a !important;
        line-height: 1.3 !important;
        margin-bottom: 6px !important;
    }

    .main-slider .slide-content p {
        font-size: 11px !important;
        color: #475569 !important;
        margin-bottom: 10px !important;
        line-height: 1.4 !important;
    }

    .main-slider .slide-content button {
        padding: 8px 16px !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        border-radius: 8px !important;
        background: #0a4455 !important;
        color: #fff !important;
        border: none !important;
        cursor: pointer !important;
    }

    .main-slider .slider-btn {
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: 28px !important;
        height: 28px !important;
        border-radius: 50% !important;
        background: rgba(255, 255, 255, 0.85) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 11px !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
        z-index: 10 !important;
    }

    .main-slider .slider-btn.prev {
        left: 6px !important;
    }

    .main-slider .slider-btn.next {
        right: 6px !important;
    }

    /* ── Mobile Category Scroll Strip ──────────────────────── */
    .mobile-category-scroll-wrapper {
        background: #fff !important;
        padding: 12px 0 8px !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
        -webkit-overflow-scrolling: touch !important;
        scroll-snap-type: x mandatory !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
        border-bottom: 1px solid #f1f5f9 !important;
        margin-bottom: 0 !important;
    }

    .mobile-category-scroll-wrapper::-webkit-scrollbar {
        display: none !important;
    }

    .mobile-category-scroll-container {
        display: inline-flex !important;
        gap: 14px !important;
        padding: 0 16px !important;
        align-items: flex-start !important;
    }

    .mobile-category-circle-item {
        display: inline-flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 5px !important;
        cursor: pointer !important;
        flex-shrink: 0 !important;
        scroll-snap-align: start !important;
        transition: transform 0.15s !important;
        width: 68px !important;
    }

    .mobile-category-circle-item:active {
        transform: scale(0.9) !important;
    }

    .mobile-category-circle-item .img-wrap {
        width: 56px !important;
        height: 56px !important;
        border-radius: 50% !important;
        background: #f1f9fb !important;
        border: 2px solid #e2f0f5 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important;
        box-shadow: 0 4px 12px rgba(10, 68, 85, 0.08) !important;
    }

    .mobile-category-circle-item img {
        width: 36px !important;
        height: 36px !important;
        object-fit: contain !important;
    }

    .mobile-category-circle-item span {
        font-size: 10px !important;
        font-weight: 600 !important;
        color: #334155 !important;
        text-align: center !important;
        white-space: normal !important;
        line-height: 1.2 !important;
        word-break: break-word !important;
    }

    /* ── Section wrappers ───────────────────────────────────── */
    .arrivals-wrapper,
    .flash-wrapper,
    .Best-sellings-section,
    .official-section,
    .newsletter-section,
    .ad-area {
        background: transparent !important;
        padding: 0 !important;
        margin-bottom: 0 !important;
    }

    .arrivals-wrapper .section-padding,
    .flash-wrapper .flash-back {
        background: #fff !important;
        padding: 16px 12px !important;
        margin-bottom: 8px !important;
        border-radius: 0 !important;
    }

    /* ── Section headers (Title + View All row) ─────────────── */
    .featured-top,
    .flash-top,
    .top-heading,
    .heading {
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-end !important;
        justify-content: space-between !important;
        margin-bottom: 14px !important;
        border-bottom: none !important;
        padding-bottom: 0 !important;
        flex-wrap: nowrap !important;
        padding: 0 4px !important;
    }

    /* Force any inner block elements back into the flex row */
    .featured-top>*,
    .flash-top>*,
    .top-heading>*,
    .heading>* {
        flex-shrink: 0 !important;
    }

    .featured-top>h2,
    .flash-top>h2,
    .top-heading>h2,
    .heading>h2 {
        flex: 1 1 auto !important;
        flex-shrink: 1 !important;
    }

    .featured-top h2,
    .flash-top h2,
    .top-heading h2,
    .heading h2 {
        font-size: 16px !important;
        font-weight: 800 !important;
        color: #0f172a !important;
        margin: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 2px !important;
    }

    /* Dynamic Subtitles */
    .featured-top h2::after {
        content: "Best products for you";
        font-size: 10px !important;
        font-weight: 500 !important;
        color: #64748b !important;
    }

    .flash-top h2::after {
        content: "Limited time deals — grab them fast!";
        font-size: 10px !important;
        font-weight: 500 !important;
        color: #64748b !important;
    }

    .heading h2::after {
        content: "Handpicked for your style";
        font-size: 10px !important;
        font-weight: 500 !important;
        color: #64748b !important;
    }

    .featured-top h2 img,
    .flash-top h2 img,
    .heading h2 img {
        height: 18px !important;
        width: auto !important;
        flex-shrink: 0 !important;
        margin-bottom: 2px !important;
    }

    .featured-top a,
    .flash-top a,
    .heading a,
    .top-heading a {
        font-size: 11px !important;
        font-weight: 700 !important;
        color: #2563eb !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 3px !important;
        text-decoration: none !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        background: #eff6ff !important;
        border: 1px solid #dbeafe !important;
        border-radius: 20px !important;
        padding: 4px 10px !important;
        transition: all 0.15s ease !important;
    }

    .featured-top a:active,
    .flash-top a:active,
    .heading a:active {
        background: #dbeafe !important;
    }

    /* ── Keep OWL carousels intact on mobile (DO NOT destroy) ──── */
    .featured-slider.owl-carousel,
    .flash-slider.owl-carousel,
    .mobile-carousel.owl-carousel {
        display: block !important;
    }

    /* Premium Pill-shaped dots indicator */
    .featured-slider .owl-dots,
    .flash-slider .owl-dots,
    .mobile-carousel .owl-dots {
        display: flex !important;
        justify-content: center !important;
        gap: 6px !important;
        margin-top: 14px !important;
        margin-bottom: 4px !important;
    }

    .featured-slider .owl-dots .owl-dot,
    .flash-slider .owl-dots .owl-dot,
    .mobile-carousel .owl-dots .owl-dot {
        width: 6px !important;
        height: 6px !important;
        border-radius: 50% !important;
        background: #cbd5e1 !important;
        border: none !important;
        padding: 0 !important;
        transition: all 0.2s ease !important;
    }

    .featured-slider .owl-dots .owl-dot.active,
    .flash-slider .owl-dots .owl-dot.active,
    .mobile-carousel .owl-dots .owl-dot.active {
        width: 16px !important;
        border-radius: 3px !important;
        background: #0a4455 !important;
    }

    /* Hide slider arrows on mobile for clean touch interface */
    .featured-slider-area .arrow,
    .product-slider-area .arrow {
        display: none !important;
    }

    /* ── Individual product card (Mobile Redesign) ───────────── */
    .product-card {
        display: flex !important;
        flex-direction: column !important;
        background: #ffffff !important;
        border: 1px solid #edf2f7 !important;
        border-radius: 12px !important;
        padding: 6px !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04) !important;
        height: 245px !important;
        /* Compact, strict equal heights */
        width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        cursor: pointer !important;
        position: relative !important;
        justify-content: space-between !important;
        transition: box-shadow 0.2s, transform 0.15s !important;
    }

    .product-card:active {
        box-shadow: 0 4px 20px rgba(10, 68, 85, 0.12) !important;
        transform: scale(0.98) !important;
    }

    /* Product image - compact */
    .product-image {
        width: 100% !important;
        height: 130px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: #f8fafc !important;
        border-radius: 8px !important;
        overflow: hidden !important;
        position: relative !important;
        margin-bottom: 4px !important;
        flex-shrink: 0 !important;
    }

    .product-image a {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        height: 100% !important;
    }

    .product-image img {
        max-height: 100% !important;
        max-width: 100% !important;
        width: auto !important;
        height: auto !important;
        object-fit: contain !important;
        display: block !important;
    }

    .product-image .overlay {
        display: none !important;
    }

    .product-image .hover-icons {
        display: none !important;
        /* Hidden on mobile */
    }

    /* Mobile wishlist button */
    .mobile-wishlist-btn {
        position: absolute !important;
        top: 6px !important;
        right: 6px !important;
        z-index: 10 !important;
        border: none !important;
        background: rgba(255, 255, 255, 0.9) !important;
        width: 28px !important;
        height: 28px !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1) !important;
        padding: 0 !important;
        outline: none !important;
        cursor: pointer !important;
        transition: transform 0.15s ease !important;
    }

    .mobile-wishlist-btn:active {
        transform: scale(0.9) !important;
    }

    .mobile-wishlist-btn i {
        font-size: 13px !important;
        color: #64748b !important;
        transition: color 0.2s ease !important;
        display: inline-block !important;
    }

    .mobile-wishlist-btn i.fa-solid.fa-heart.text-danger {
        color: #ef4444 !important;
    }

    /* Discount badge on image */
    .pc-discount-badge {
        position: absolute !important;
        top: 6px !important;
        left: 6px !important;
        background: #f97316 !important;
        color: #fff !important;
        font-size: 9px !important;
        font-weight: 800 !important;
        padding: 2px 5px !important;
        border-radius: 4px !important;
        z-index: 2 !important;
        letter-spacing: 0.2px !important;
    }

    /* Product info — TIGHT padding, no extra space */
    .product-info {
        display: flex !important;
        flex-direction: column !important;
        flex-grow: 1 !important;
        padding: 5px 4px 4px !important;
    }

    .product-info h4 {
        font-size: 11px !important;
        font-weight: 600 !important;
        color: #1e293b !important;
        margin: 0 0 1px 0 !important;
        line-height: 1.3 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        height: auto !important;
        max-height: 30px !important;
    }

    .product-info h4 a {
        color: inherit !important;
        text-decoration: none !important;
    }

    /* Price block — compact */
    .pc-price-block {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: baseline !important;
        gap: 2px !important;
        margin-top: 2px !important;
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    .pc-final-price {
        font-size: 14px !important;
        font-weight: 800 !important;
        color: #0a4455 !important;
        display: block !important;
        width: 100% !important;
    }

    .pc-mrp-price {
        font-size: 10px !important;
        color: #94a3b8 !important;
        text-decoration: line-through !important;
    }

    .pc-discount-pct {
        font-size: 9px !important;
        font-weight: 700 !important;
        color: #f97316 !important;
        background: #fff3e8 !important;
        padding: 1px 4px !important;
        border-radius: 3px !important;
    }

    /* Mobile card action buttons */
    .mobile-card-actions {
        display: flex !important;
        gap: 5px !important;
        margin-top: auto !important;
        padding-top: 4px !important;
    }

    .mobile-card-btn {
        flex: 1 !important;
        height: 34px !important;
        border-radius: 7px !important;
        border: none !important;
        font-size: 10px !important;
        font-weight: 700 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        gap: 3px !important;
        letter-spacing: 0.1px !important;
        transition: transform 0.1s !important;
    }

    .mobile-card-btn:active {
        transform: scale(0.95) !important;
    }

    .mobile-card-btn.btn-quick {
        background: #f1f5f9 !important;
        color: #475569 !important;
    }

    .mobile-card-btn.btn-cart {
        background: #0a4455 !important;
        color: #fff !important;
    }

    /* ── Featured card (special-offers/new-arrivals inline) ─── */
    .featured-card {
        display: flex !important;
        flex-direction: column !important;
        background: #fff !important;
        border: 1px solid #edf2f7 !important;
        border-radius: 12px !important;
        padding: 6px !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04) !important;
        height: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        cursor: pointer !important;
        position: relative !important;
    }

    .featured-card:active {
        transform: scale(0.98) !important;
    }

    .featured-img {
        width: 100% !important;
        height: 110px !important;
        background: #f8fafc !important;
        border-radius: 8px !important;
        overflow: hidden !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin-bottom: 6px !important;
        position: relative !important;
    }

    .featured-img img {
        max-height: 95px !important;
        max-width: 100% !important;
        width: auto !important;
        height: auto !important;
        object-fit: contain !important;
    }

    .featured-img .hover-icons {
        display: none !important;
    }

    .featured-info {
        display: flex !important;
        flex-direction: column !important;
        flex-grow: 1 !important;
        padding: 5px 4px 4px !important;
    }

    .featured-info h4 {
        font-size: 11px !important;
        font-weight: 600 !important;
        color: #1e293b !important;
        margin: 0 0 1px 0 !important;
        line-height: 1.3 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        height: auto !important;
        max-height: 30px !important;
    }

    /* Compact price block inside featured-info */
    .featured-info .pc-price-block {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: baseline !important;
        gap: 2px !important;
        margin-top: 2px !important;
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    .featured-info .pc-final-price {
        font-size: 14px !important;
        font-weight: 800 !important;
        color: #0a4455 !important;
        display: block !important;
        width: 100% !important;
    }

    .featured-info .pc-mrp-price {
        font-size: 10px !important;
        color: #94a3b8 !important;
        text-decoration: line-through !important;
        display: inline !important;
    }

    .featured-info .pc-discount-pct {
        font-size: 9px !important;
        font-weight: 700 !important;
        color: #f97316 !important;
        background: #fff3e8 !important;
        padding: 1px 4px !important;
        border-radius: 3px !important;
        display: inline !important;
    }

    /* ── Best Sellings / Top Rated section ──────────────────── */
    .Best-sellings-section {
        background: #fff !important;
        padding: 16px 12px 8px !important;
        margin-bottom: 8px !important;
    }

    .Best-sellings-section .wrapper.d-lg-none {
        display: block !important;
    }

    .Best-sellings-section .product-section {
        width: 100% !important;
        margin-bottom: 24px !important;
    }

    .Best-sellings-section .product-section:last-child {
        margin-bottom: 0 !important;
    }

    .Best-sellings-section .products {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
        padding: 0 !important;
        background: transparent !important;
    }

    .Best-sellings-section .top-heading {
        margin-bottom: 12px !important;
    }

    /* ── Flash Deal section mobile ──────────────────────────── */
    .flash-wrapper .flash-p {
        display: none !important;
    }

    .flash-wrapper .flash-container .row {
        display: block !important;
    }

    .flash-wrapper .flash-container .col-xl-4,
    .flash-wrapper .flash-container .col-xl-8,
    .flash-wrapper .flash-container .col-md-6 {
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
        padding: 0 !important;
    }

    .flash-wrapper .countdown {
        display: flex !important;
        justify-content: center !important;
        gap: 8px !important;
        margin-bottom: 14px !important;
    }

    .flash-wrapper .count-box {
        background: #0a4455 !important;
        color: #fff !important;
        border-radius: 8px !important;
        padding: 6px 10px !important;
        text-align: center !important;
        min-width: 50px !important;
    }

    .flash-wrapper .count-box h3 {
        font-size: 18px !important;
        font-weight: 800 !important;
        margin: 0 !important;
        color: #fff !important;
    }

    .flash-wrapper .count-box span {
        font-size: 9px !important;
        font-weight: 600 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        color: #a5d8e8 !important;
    }

    .flash-wrapper .flash-slider {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    .flash-wrapper .product-slider-area {
        padding: 0 !important;
    }

    .flash-wrapper .product-slider-area .arrow {
        display: none !important;
    }

    .flash-wrapper .flash-slider.owl-carousel .owl-stage-outer,
    .flash-wrapper .flash-slider.owl-carousel .owl-stage {
        display: contents !important;
    }

    .flash-wrapper .flash-slider.owl-carousel .owl-item {
        float: none !important;
        width: auto !important;
    }

    .flash-wrapper .flash-slider.owl-carousel .owl-item.cloned {
        display: none !important;
    }

    .flash-wrapper .flash-slider.owl-carousel .owl-nav,
    .flash-wrapper .flash-slider.owl-carousel .owl-dots {
        display: none !important;
    }

    .flash-wrapper .box {
        height: 100% !important;
    }

    .flash-wrapper .box .item {
        height: 100% !important;
    }

    /* ── Ad banners horizontal scroll ──────────────────────── */
    .ad-area {
        padding: 12px 0 !important;
        background: #fff !important;
        margin-bottom: 8px !important;
    }

    .ad-img {
        padding: 0 4px !important;
    }

    .ad-img img {
        border-radius: 10px !important;
        width: 100% !important;
        height: auto !important;
    }

    /* ── Brands ─────────────────────────────────────────────── */
    .featured-brand-slider.owl-carousel {
        display: flex !important;
        overflow-x: auto !important;
        gap: 10px !important;
        padding: 8px 4px !important;
        scrollbar-width: none !important;
    }

    .featured-brand-slider.owl-carousel::-webkit-scrollbar {
        display: none !important;
    }

    .featured-brand-slider.owl-carousel .owl-stage-outer,
    .featured-brand-slider.owl-carousel .owl-stage {
        display: contents !important;
    }

    .featured-brand-slider.owl-carousel .owl-item {
        float: none !important;
        width: auto !important;
        flex-shrink: 0 !important;
    }

    .featured-brand-slider.owl-carousel .owl-item.cloned {
        display: none !important;
    }

    .featured-brand-slider .item {
        width: 80px !important;
    }

    .brand-img {
        height: 50px !important;
        border-radius: 8px !important;
        border: 1px solid #e2e8f0 !important;
        background: #fff !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important;
        padding: 6px !important;
    }

    .brand-img img {
        max-height: 36px !important;
        object-fit: contain !important;
    }

    /* ── Official / Trust Indicator Cards ───────────────────── */
    .official-section {
        background: #fff !important;
        padding: 16px 12px 20px !important;
        margin-bottom: 8px !important;
    }

    .official-section .background {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
    }

    /* Reset Bootstrap row/col to CSS grid */
    .official-section .row {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
        margin: 0 !important;
    }

    .official-section .row>[class*='col'] {
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
        padding: 0 !important;
    }

    /* Each trust card */
    .official-item {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        background: #f0f9ff !important;
        border: 1.5px solid #bfdbfe !important;
        border-radius: 14px !important;
        padding: 16px 10px 14px !important;
        gap: 10px !important;
        height: 100% !important;
    }

    /* Icon circle */
    .official-item .off-icon {
        width: 52px !important;
        height: 52px !important;
        border-radius: 50% !important;
        background: #dbeafe !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
    }

    .official-item .off-icon img {
        width: 28px !important;
        height: 28px !important;
        object-fit: contain !important;
    }

    /* Text */
    .official-item .off-para {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
    }

    .official-item .off-para p {
        font-size: 11.5px !important;
        font-weight: 700 !important;
        color: #1e3a5f !important;
        margin: 0 !important;
        line-height: 1.45 !important;
    }

    /* ── Newsletter ─────────────────────────────────────────── */
    .newsletter-section {
        background: linear-gradient(135deg, #0a4455 0%, #0f6b8a 100%) !important;
        padding: 24px 16px !important;
        margin-bottom: 0 !important;
        border-radius: 0 !important;
    }

    .newsletter-section .news-title {
        color: #fff !important;
        font-size: 16px !important;
        font-weight: 800 !important;
        margin-bottom: 4px !important;
        text-align: center !important;
    }

    .newsletter-section p {
        color: rgba(255, 255, 255, 0.75) !important;
        font-size: 12px !important;
        text-align: center !important;
        margin-bottom: 16px !important;
    }

    .newsletter-section .news-form,
    .newsletter-section form {
        display: flex !important;
        gap: 8px !important;
        max-width: 100% !important;
    }

    .newsletter-section input[type='email'],
    .newsletter-section input[type='text'] {
        flex: 1 !important;
        height: 44px !important;
        border-radius: 10px !important;
        border: none !important;
        padding: 0 14px !important;
        font-size: 13px !important;
        background: rgba(255, 255, 255, 0.15) !important;
        color: #fff !important;
        backdrop-filter: blur(4px) !important;
        outline: none !important;
    }

    .newsletter-section input::placeholder {
        color: rgba(255, 255, 255, 0.55) !important;
    }

    .newsletter-section button[type='submit'],
    .newsletter-section .subscribe-btn {
        height: 44px !important;
        padding: 0 18px !important;
        border-radius: 10px !important;
        background: #f59e0b !important;
        color: #fff !important;
        border: none !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        cursor: pointer !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }

    /* ── Utility: hide OWL nav/controls on mobile ───────────── */
    .owl-nav,
    .owl-dots {
        display: none !important;
    }

    /* ===== MOBILE DROPDOWNS & OVERLAYS Z-INDEX FIXES ===== */
    .main-header-section {
        z-index: 100002 !important;
    }

    .header-icons {
        position: relative !important;
        z-index: 100001 !important;
    }

    .cart-wrapper {
        position: relative !important;
        z-index: 100000 !important;
    }

    .cart-dropdown {
        display: none;
        position: fixed !important;
        top: 60px !important;
        left: 12px !important;
        right: 12px !important;
        margin: 0 auto !important;
        width: auto !important;
        max-width: 340px !important;
        background: #fff !important;
        border-radius: 12px !important;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15) !important;
        padding: 16px !important;
        box-sizing: border-box !important;
        z-index: 2147483647 !important;
        opacity: 0;
        visibility: hidden;
        transform: translateY(15px);
        transition: .3s;
    }

    .cart-dropdown.active {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(0) !important;
    }

    #authModalOverlay {
        z-index: 2147483647 !important;
    }

    .mobile-sidebar {
        z-index: 100005 !important;
    }

    .menu-overlay {
        z-index: 100004 !important;
    }

    /* ===== WISHLIST GRID & CARDS 3/4 COLUMNS ON MOBILE ===== */
    .wishlist-grid {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 8px !important;
    }

    .wishlist-item-card {
        border: 1px solid #e2e8f0 !important;
        border-radius: 8px !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        background: #fff !important;
        position: relative !important;
    }

    .wishlist-image-container {
        position: relative !important;
        padding-top: 100% !important;
        background: #f8fafc !important;
    }

    .wishlist-image-container img {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    .wishlist-remove-btn {
        position: absolute !important;
        top: 4px !important;
        right: 4px !important;
        border: none !important;
        background: rgba(255, 255, 255, 0.9) !important;
        width: 24px !important;
        height: 24px !important;
        border-radius: 50% !important;
        color: #ef4444 !important;
        font-size: 10px !important;
        cursor: pointer !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1) !important;
        z-index: 2 !important;
    }

    .wishlist-card-body {
        padding: 6px !important;
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        gap: 4px !important;
    }

    .wishlist-card-title {
        font-size: 10px !important;
        font-weight: 600 !important;
        color: #1e293b !important;
        margin: 0 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        min-height: 24px !important;
        line-height: 1.25 !important;
    }

    .wishlist-price-status {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        margin-top: 2px !important;
        gap: 2px !important;
    }

    .wishlist-current-price {
        font-weight: 700 !important;
        color: #2563eb !important;
        font-size: 11px !important;
    }

    .wishlist-old-price {
        font-size: 9px !important;
        text-decoration: line-through !important;
        color: #94a3b8 !important;
        margin-top: 1px !important;
    }

    .wishlist-discount-badge {
        position: absolute !important;
        top: 4px !important;
        left: 4px !important;
        background: #ef4444 !important;
        color: white !important;
        padding: 1px 4px !important;
        border-radius: 4px !important;
        font-size: 8px !important;
        font-weight: 700 !important;
        z-index: 2 !important;
    }

    .wishlist-stock-container .badge {
        font-size: 8px !important;
        padding: 1px 4px !important;
        border-radius: 4px !important;
    }

    .wishlist-cart-btn {
        margin-top: 2px !important;
        padding: 4px 6px !important;
        font-size: 9px !important;
        width: 100% !important;
        border-radius: 6px !important;
        justify-content: center !important;
        display: flex !important;
        align-items: center !important;
        gap: 4px !important;
    }

    .wishlist-cart-btn span {
        display: none !important;
    }

    @media (max-width: 480px) {
        .wishlist-grid {
            grid-template-columns: repeat(3, 1fr) !important;
            gap: 6px !important;
        }
    }

    /* ═══════════════════════════════════════════════════════════════
   HOMEPAGE PREMIUM UPGRADES — Flipkart / Ajio inspired
   ═══════════════════════════════════════════════════════════════ */

    /* ── Richer body background ─────────────────────────────── */
    body {
        background: #f0f0f0 !important;
    }

    /* ── White section cards with subtle top accent ─────────── */
    .arrivals-wrapper .section-padding,
    .flash-wrapper .flash-back,
    .Best-sellings-section {
        border-top: 3px solid #0a4455 !important;
        border-radius: 0 !important;
        box-shadow: 0 1px 6px rgba(0, 0, 0, 0.04) !important;
        margin-bottom: 10px !important;
    }

    /* ── Section header upgrade ─────────────────────────────── */
    .featured-top h2,
    .flash-top h2,
    .top-heading h2,
    .heading h2 {
        font-size: 14px !important;
        letter-spacing: -0.2px !important;
    }

    .featured-top a,
    .flash-top a,
    .heading a,
    .top-heading a {
        background: #f0f9ff !important;
        color: #0a4455 !important;
        padding: 4px 10px !important;
        border-radius: 20px !important;
        border: 1px solid #bae6fd !important;
        font-size: 11px !important;
        font-weight: 700 !important;
    }

    /* ── Category circles — wider with gradient ring ────────── */
    .mobile-category-circle-item .img-wrap {
        width: 60px !important;
        height: 60px !important;
        background: linear-gradient(135deg, #e8f8f5, #dbeafe) !important;
        border: 2.5px solid #0a4455 !important;
        box-shadow: 0 3px 10px rgba(10, 68, 85, 0.12) !important;
    }

    .mobile-category-circle-item:hover .img-wrap,
    .mobile-category-circle-item:active .img-wrap {
        border-color: #f97316 !important;
    }

    /* ── Product cards — sharper shadows, no border ─────────── */
    .product-card {
        border: none !important;
        box-shadow: 0 2px 14px rgba(0, 0, 0, 0.07) !important;
        border-radius: 10px !important;
    }

    .product-image {
        border-radius: 10px 10px 0 0 !important;
        background: #f8f9fb !important;
        height: 115px !important;
    }

    /* ── Price upgrade — larger, bolder, brand color ────────── */
    .pc-final-price {
        font-size: 15px !important;
        font-weight: 800 !important;
        color: #0a4455 !important;
    }

    .pc-discount-pct {
        color: #16a34a !important;
        background: none !important;
        padding: 0 !important;
        font-size: 10px !important;
        font-weight: 700 !important;
    }

    /* ── Flash deal section richer countdown ────────────────── */
    .flash-wrapper .count-box {
        background: linear-gradient(135deg, #0a4455, #0f6b8a) !important;
        border-radius: 10px !important;
        padding: 7px 12px !important;
        min-width: 54px !important;
        box-shadow: 0 3px 10px rgba(10, 68, 85, 0.2) !important;
    }

    .flash-wrapper .count-box h3 {
        font-size: 20px !important;
    }

    /* ── Official/trust section upgrade ─────────────────────── */
    .official-item {
        background: linear-gradient(135deg, #f0f9ff, #fff) !important;
        border: 1.5px solid #bae6fd !important;
        border-radius: 16px !important;
        box-shadow: 0 3px 12px rgba(10, 68, 85, 0.06) !important;
    }

    .official-item .off-icon {
        background: linear-gradient(135deg, #0a4455, #0f6b8a) !important;
    }

    .official-item .off-icon img {
        filter: brightness(10);
    }

    /* ── Newsletter — richer gradient ───────────────────────── */
    .newsletter-section {
        background: linear-gradient(135deg, #0a4455 0%, #0d7a9e 60%, #f97316 200%) !important;
    }

    /* ── Brands section card ────────────────────────────────── */
    .brand-img {
        border-radius: 12px !important;
        height: 54px !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07) !important;
        border: 1px solid #e8ecef !important;
    }

    /* ── Mobile-only Integrated Cart footer styles ─────────── */
    .pc-mob-footer {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        margin-top: auto !important;
        padding-top: 4px !important;
    }

    .pc-mob-stock-status {
        margin-bottom: 4px !important;
        display: block !important;
    }

    .pc-mob-buttons {
        width: 100% !important;
        display: flex !important;
        gap: 5px !important;
    }

    .pc-mob-btn {
        height: 32px !important;
        border-radius: 6px !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        border: none !important;
        padding: 0 !important;
        transition: all 0.15s ease !important;
    }

    .pc-mob-quickview-btn {
        flex: 1 !important;
        background: #f1f5f9 !important;
        color: #334155 !important;
        border: 1px solid #cbd5e1 !important;
    }

    .pc-mob-quickview-btn:active {
        background: #e2e8f0 !important;
    }

    .pc-mob-cart-btn {
        flex: 1 !important;
        height: 32px !important;
        border-radius: 6px !important;
        background: #0a4455 !important;
        border-color: #0a4455 !important;
        color: #fff !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        box-shadow: 0 2px 5px rgba(10, 68, 85, 0.12) !important;
        padding: 0 !important;
    }

    .pc-mob-cart-btn:active {
        background: #062f3d !important;
        border-color: #062f3d !important;
    }

    /* Show owl-dots for ad-slider on mobile */
    .ad-section .owl-dots button {
        display: inline-block !important;
    }

    /* Restore container padding inside footer sections on mobile */
    .site-footer .container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}

/* end @media (max-width: 991.98px) */