/* ==========================================================================
   NATURA PRO — ajustements d'habillage
   1. Barre superieure : filet blanc + icones de reseaux sociaux
   2. Menu et banniere : largeur 90 % de la page (au lieu de la gouttiere
      Bootstrap par defaut), en pleine largeur sur mobile
   ========================================================================== */

/* ------------------------------------------------- 1. barre superieure */

#header-middle {
    border-bottom: 1px solid #fff;
    position: relative;
    z-index: 5;
}

/* Les icones sociales etaient dans le menu principal, elles remontent ici. */
.top-social,
.social-links {
    display: flex;
    align-items: center;
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
}

.top-social {
    padding-left: 14px;
}

.social-links {
    justify-content: flex-end;
}

.top-social__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(13, 47, 122, .07);
    color: #0d2f7a;
    text-decoration: none;
    transition: background .2s ease, color .2s ease, transform .2s ease;
}

.top-social__link:hover {
    background: #0d2f7a;
    color: #fff;
    transform: translateY(-1px);
}

.top-social__link svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

.top-social__link .material-symbols-outlined {
    font-size: 18px;
    line-height: 1;
}

/* Teintes propres a chaque reseau, pour les reconnaitre d'un coup d'oeil. */
.top-social__link--facebook:hover { background: #1877f2; }
.top-social__link--instagram:hover { background: #d62976; }
.top-social__link--whatsapp:hover  { background: #25d366; }

/* ------------------------------------------------- 2. icone « Boutique » */

/* Dessinee uniquement en CSS : le lien Boutique ne depend ainsi ni de la
   police Material Symbols (CDN externe) ni d'un fichier image. */
.np-icon-shop {
    display: inline-block;
    position: relative;
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
    margin-right: 7px;
    vertical-align: -4px;
    border: 2px solid currentColor;
    border-top-width: 0;
    border-radius: 1px 1px 2px 2px;
}

/* La devanture du magasin. */
.np-icon-shop::before {
    content: "";
    position: absolute;
    left: -4px;
    top: -6px;
    width: 21px;
    height: 3px;
    background: currentColor;
    border-radius: 1px 1px 0 0;
}

/* L'auvent, plus large que la boutique. */
.np-icon-shop::after {
    content: "";
    position: absolute;
    left: -6px;
    top: -9px;
    width: 25px;
    height: 3px;
    background: currentColor;
    border-radius: 2px 2px 0 0;
}

a:hover > .np-icon-shop,
.np-icon-shop:hover {
    color: var(--theme-color, #0d2f7a);
}

/* ------------------------------------- 3. largeur 90 % (menu + banniere) */

.header-middle > .container-fluid,
.header-bottom > .container-fluid,
.product-tab-section > .container-fluid,
.masonry-product-section > .container-fluid,
.np-banner-wrap,
.np-section > .container,
.np-page-container {
    width: 90% !important;
    max-width: 1600px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

@media (max-width: 767.98px) {
    .header-middle > .container-fluid,
    .header-bottom > .container-fluid,
    .product-tab-section > .container-fluid,
    .masonry-product-section > .container-fluid,
    .np-banner-wrap,
    .np-section > .container,
    .np-page-container {
        width: 100% !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}

/* ==========================================================================
   4. Menu Navigation avec images de catégories réelles
   ========================================================================== */
.np-cat-nav-wrapper {
    position: relative;
}

/* ========================================================
   NATURA PRO - CATEGORIES DROPDOWN (CLEAN, PROPORTIONAL)
   ======================================================== */
.category-list .has-dropdown > a::after,
.sidebar .has-dropdown > a::after {
    display: none !important;
}

.category-list .category-button {
    background: #0d2f7a !important;
    color: #fff !important;
    font-weight: 700 !important;
    border-radius: 10px 10px 0 0 !important;
    padding: 11px 18px !important;
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    width: 100%;
    transition: background .2s ease;
    border: none !important;
}

.category-list .category-button:hover {
    background: #00AEEF !important;
}

.np-category-dropdown {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 0 0 14px 14px !important;
    box-shadow: 0 16px 36px rgba(13, 47, 122, 0.1) !important;
    padding: 6px 0 !important;
    min-width: 275px !important;
    max-width: 310px !important;
    z-index: 1050 !important;
}

.np-menu-cat-item > a {
    padding: 6px 14px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #334155 !important;
    display: flex !important;
    align-items: center !important;
    transition: all .2s ease !important;
    border-left: 3px solid transparent;
}

.np-menu-cat-item > a:hover {
    background: #f0f7ff !important;
    color: #00AEEF !important;
    border-left-color: #00AEEF !important;
    padding-left: 17px !important;
}

/* Category icon badge */
.np-menu-cat-icon-badge {
    width: 28px;
    height: 28px;
    min-width: 28px;
    border-radius: 8px;
    background: #f1f5f9;
    color: #0284c7;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    flex-shrink: 0;
    transition: all .2s ease;
}

.np-menu-cat-item > a:hover .np-menu-cat-icon-badge {
    background: #00AEEF;
    color: #ffffff;
}

.np-menu-cat-icon-badge .np-css-icon {
    width: 16px;
    height: 16px;
}

.np-menu-cat-name {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 12.8px;
}

.np-menu-cat-arrow {
    width: 13px;
    height: 13px;
    color: #94a3b8;
    margin-left: auto;
    transition: transform .2s ease;
    flex-shrink: 0;
}

.np-menu-cat-item:hover > a .np-menu-cat-arrow {
    color: #00AEEF;
    transform: translateX(3px);
}

/* Subcategory dropdown */
.np-menu-subcat-dropdown {
    border-radius: 12px !important;
    box-shadow: 0 12px 32px rgba(13, 47, 122, 0.12) !important;
    border: 1px solid #e2e8f0 !important;
    padding: 6px 0 !important;
    min-width: 230px !important;
    background: #ffffff !important;
    top: -6px !important;
}

.np-menu-subcat-dropdown li a {
    padding: 7px 16px !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    color: #475569 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    transition: all .2s ease !important;
}

.np-menu-subcat-dropdown li a:hover {
    background: #f0f7ff !important;
    color: #00AEEF !important;
    padding-left: 20px !important;
}

.np-subcat-bullet {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #cbd5e1;
    transition: all .2s ease;
    flex-shrink: 0;
}

.np-menu-subcat-dropdown li a:hover .np-subcat-bullet {
    background: #00AEEF;
    transform: scale(1.3);
}

.np-menu-cat-footer {
    padding: 8px 12px 4px !important;
    border-top: 1px solid #f1f5f9;
}

.np-menu-cat-footer a {
    border-radius: 8px !important;
    background: #f8fafc !important;
    color: #0d2f7a !important;
    border: 1px solid #e2e8f0 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    padding: 7px 10px !important;
    transition: all .2s ease !important;
}

.np-menu-cat-footer a:hover {
    background: #00AEEF !important;
    color: #ffffff !important;
    border-color: #00AEEF !important;
}

/* ========================================================
   NATURA PRO - BEAUTIFIED MAIN TOP NAVIGATION MENU
   ======================================================== */
.main-menu {
    display: flex;
    align-items: center;
}

.main-menu ul {
    display: flex;
    align-items: center;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
    flex-wrap: wrap;
}

.main-menu li {
    position: relative;
    margin: 0;
}

.main-menu li > a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 8px 13px !important;
    border-radius: 8px !important;
    color: #334155 !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    background: transparent;
    line-height: 1.4 !important;
}

.main-menu li > a:hover {
    background: #f1f5f9 !important;
    color: #00AEEF !important;
    text-decoration: none !important;
}

.main-menu li.active > a {
    color: #00AEEF !important;
    background: #f0f7ff !important;
    font-weight: 700 !important;
}

.np-nav-item-icon {
    width: 15px;
    height: 15px;
    color: #64748b;
    transition: color 0.2s ease, transform 0.2s ease;
    flex-shrink: 0;
}

.main-menu li > a:hover .np-nav-item-icon,
.main-menu li.active > a .np-nav-item-icon {
    color: #00AEEF;
    transform: scale(1.15);
}

.np-nav-item-text {
    white-space: nowrap;
}

/* Top Right Cart & Icons */
.cart__menu {
    position: relative;
    display: inline-flex !important;
    align-items: center;
}

.cart__menu .np-css-icon {
    width: 22px;
    height: 22px;
    color: #0d2f7a;
    transition: color 0.2s ease;
}

.cart__menu:hover .np-css-icon {
    color: #00AEEF;
}

.cart__menu .cart_qty {
    background: #00AEEF !important;
    color: #ffffff !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    padding: 1px 5px !important;
    border-radius: 10px !important;
    position: absolute;
    top: -6px;
    left: 12px;
    line-height: 14px;
    border: 2px solid #ffffff;
}

.cart__menu .total {
    font-size: 12.5px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    margin-left: 8px;
}

.cart__menu.fixed .total {
    font-size: 12.5px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    margin-left: 8px;
    background-color: transparent !important;
}

.offset-menu-wrapper .cart__menu .total {
    background-color: #0d2f7a !important;
    color: #ffffff !important;
    border-radius: 20px !important;
    padding: 3px 12px !important;
}

.np-menu-subcat-icon {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    object-fit: contain;
    background: #f1f5f9;
    margin-right: 10px;
    flex-shrink: 0;
    padding: 2px;
}

.np-menu-cat-footer {
    padding: 8px 14px 2px !important;
    border-top: 1px solid #f1f5f9;
    margin-top: 6px;
}

/* ==========================================================================
   5. Hero Banner 16:9 Ultra-Premium
   ========================================================================== */
.np-hero-16x9-slider,
.np-hero-slider {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    background: transparent;
    box-shadow: 0 8px 30px rgba(13, 47, 122, 0.08);
}

.np-16x9-box,
.np-hero-box,
.single-carousel-item {
    position: relative;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: hidden;
    background: transparent;
}

.np-hero-img:not(.np-rev-bg-img),
.single-carousel-item img:not(.np-rev-bg-img) {
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
    display: block !important;
    transition: none !important;
}

.np-rev-hero-slider,
.np-rev-slider-container {
    background: transparent !important;
}

.np-rev-hero-slider .np-rev-bg-img,
.np-rev-slide img.np-rev-bg-img,
.np-rev-bg-layer picture img,
.np-rev-bg-layer img {
    width: 100% !important;
    height: 100% !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    inset: 0 !important;
    object-fit: var(--np-bg-fit, cover) !important;
    object-position: var(--np-bg-pos, center center) !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

.np-rev-bg-layer picture {
    width: 100% !important;
    height: 100% !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    inset: 0 !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

.carousel-item.active .np-hero-img:not(.np-rev-bg-img) {
    transform: none !important;
}

.np-hero-overlay {
    display: none !important;
}

.np-slide-link {
    display: block;
    position: relative;
    text-decoration: none;
    color: inherit;
}

.np-slide-caption-box {
    position: absolute;
    left: 4%;
    bottom: 12%;
    max-width: 580px;
    z-index: 4;
    padding: 24px 30px;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 14px 38px rgba(0, 0, 0, 0.16);
    animation: npFadeInUp 0.8s ease-out both;
}

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

.np-slide-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #0d2f7a;
    background: rgba(13, 47, 122, 0.08);
    padding: 4px 10px;
    border-radius: 20px;
    margin-bottom: 10px;
}

.np-slide-tag i {
    font-size: 15px;
    color: #00AEEF;
}

.np-slide-title {
    font-size: 1.65rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.25;
    margin: 0 0 8px;
}

.np-slide-desc {
    font-size: 13.5px;
    color: #475569;
    line-height: 1.45;
    margin: 0 0 14px;
}

.np-slide-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 20px;
    border-radius: 25px;
    background: #0d2f7a;
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    transition: all .25s ease;
}

.np-slide-link:hover .np-slide-btn {
    background: #00AEEF;
    transform: translateX(4px);
}

.np-slide-btn i {
    font-size: 16px;
    transition: transform .25s ease;
}

.np-slide-link:hover .np-slide-btn i {
    transform: translateX(3px);
}

/* Indicators */
.np-slider-indicators {
    bottom: 20px;
    margin-bottom: 0;
    gap: 8px;
}

.np-slider-indicators li {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.6);
    border: none;
    transition: all 0.3s ease;
    cursor: pointer;
}

.np-slider-indicators li.active {
    width: 32px;
    border-radius: 10px;
    background-color: #00AEEF;
}

/* Nav Buttons */
.np-slider-btn {
    width: 70px;
    opacity: 0;
    transition: opacity .3s ease;
}

.np-hero-16x9-slider:hover .np-slider-btn {
    opacity: 1;
}

.np-nav-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    color: #0d2f7a;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(8px);
    transition: all .2s ease;
}

.np-nav-circle:hover {
    background: #0d2f7a;
    color: #ffffff;
    transform: scale(1.08);
}

@media (max-width: 767.98px) {
    .np-slide-caption-box {
        left: 15px;
        right: 15px;
        bottom: 15px;
        padding: 16px;
        max-width: none;
    }
    .np-slide-title {
        font-size: 1.2rem;
        margin-bottom: 10px;
    }
    .np-slider-btn {
        display: none;
    }
}

/* ==========================================================================
   6. Bandeau de Réassurance NATURA PRO
   ========================================================================== */
.np-reassurance-strip {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 18px 24px;
    box-shadow: 0 4px 20px rgba(13, 47, 122, 0.05);
}

.np-reassurance-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 8px 12px;
    border-radius: 12px;
    transition: background .2s ease;
}

.np-reassurance-item:hover {
    background: #f8fafc;
}

.np-reassurance-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(13, 47, 122, 0.07);
    color: #0d2f7a;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.np-reassurance-icon i {
    font-size: 24px;
    color: #00AEEF;
}

.np-reassurance-info {
    display: flex;
    flex-direction: column;
}

.np-reassurance-title {
    font-size: 13.5px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.2;
}

.np-reassurance-sub {
    font-size: 11.5px;
    color: #64748b;
    margin-top: 2px;
}

@media (max-width: 575.98px) {
    .np-reassurance-strip {
        padding: 12px;
    }
    .np-reassurance-item {
        gap: 8px;
        padding: 6px;
    }
    .np-reassurance-icon {
        width: 36px;
        height: 36px;
    }
    .np-reassurance-icon i {
        font-size: 18px;
    }
    .np-reassurance-title {
        font-size: 12px;
    }
    .np-reassurance-sub {
        font-size: 10px;
    }
}

/* ==========================================================================
   7. Section Catégories (Cartes, Slider & Grille)
   ========================================================================== */
.np-category-section {
    background: transparent;
    width: 100% !important;
    overflow: hidden !important;
    position: relative !important;
}

.np-category-section > .container-fluid,
.np-category-section .np-banner-wrap {
    width: 90% !important;
    max-width: 1600px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.np-category-section .category-slider-wrapper {
    width: 100% !important;
    overflow: hidden !important; /* CRITICAL: Never bleed outside the page width */
    position: relative !important;
    padding: 10px 2px 20px 2px !important;
}

.np-cat-header-left .np-eyebrow {
    color: #00AEEF;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.1em;
}

.np-cat-header-left .np-title {
    font-size: 1.85rem;
    font-weight: 800;
    color: #0f172a;
}

.np-view-toggle .np-toggle-btn {
    background: #f1f5f9 !important; /* Solid color */
    border: 1px solid #e2e8f0 !important;
    color: #475569 !important;
    font-weight: 600;
    font-size: 12.5px;
    padding: 6px 14px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all .2s ease;
    border-radius: 8px !important;
}

.np-view-toggle .np-toggle-btn:hover {
    background: #e2e8f0 !important; /* Solid color */
    color: #0d2f7a !important;
}

.np-view-toggle .np-toggle-btn.active {
    background: #0d2f7a !important; /* Solid color, NO gradient */
    color: #ffffff !important;
    border-color: #0d2f7a !important;
}

.np-cat-nav-arrows {
    gap: 8px;
}

.np-cat-btn-prev,
.np-cat-btn-next {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    color: #0d2f7a;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transition: all .2s ease;
}

.np-cat-btn-prev:hover,
.np-cat-btn-next:hover {
    background: #0d2f7a;
    color: #ffffff;
    border-color: #0d2f7a;
    transform: scale(1.08);
}

.np-view-all-link {
    background: rgba(13, 47, 122, 0.08);
    color: #0d2f7a;
    font-weight: 700;
    font-size: 13px;
    border-radius: 20px;
    padding: 7px 16px;
    transition: all .2s ease;
}

.np-view-all-link:hover {
    background: #0d2f7a;
    color: #ffffff;
}

/* Category Card */
.np-cat-card {
    background: #ffffff;
    border-radius: 20px;
    border: 1px solid #eef2f6;
    padding: 16px 16px 18px 16px;
    text-align: center;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.np-cat-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(13, 47, 122, 0.12);
    border-color: rgba(0, 174, 239, 0.4);
}

.np-cat-img-box {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 16px;
    overflow: hidden;
    background: #f8fafc;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.np-cat-card-img {
    position: relative;
    z-index: 2;
    max-width: 82% !important;
    max-height: 82% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    padding: 6px !important;
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
    display: block;
    margin: auto;
}

.np-cat-ground-shadow {
    position: absolute;
    bottom: 8%;
    left: 50%;
    transform: translateX(-50%);
    width: 65%;
    height: 18px;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(15, 23, 42, 0.32) 0%, rgba(15, 23, 42, 0.12) 45%, rgba(15, 23, 42, 0) 72%);
    z-index: 1;
    pointer-events: none;
    transition: transform 0.45s ease, opacity 0.45s ease;
}

.np-cat-card:hover .np-cat-card-img {
    transform: translateY(-4px) scale(1.06);
}

.np-cat-card:hover .np-cat-ground-shadow {
    transform: translateX(-50%) scale(0.92);
    opacity: 0.85;
}

.np-cat-hover-badge {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background: rgba(13, 47, 122, 0.92);
    backdrop-filter: blur(8px);
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 20px;
    opacity: 0;
    transition: all 0.3s ease;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    z-index: 3;
}

.np-cat-card:hover .np-cat-hover-badge {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.np-cat-card-body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    justify-content: space-between;
    text-align: center;
}

.np-cat-card-title {
    font-size: 15px;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.35;
    margin: 8px 0 6px;
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: color .2s ease;
}

.np-cat-card:hover .np-cat-card-title {
    color: #0d2f7a;
}

.np-cat-card-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-size: 13px;
    font-weight: 600;
    color: #00AEEF;
    transition: all .2s ease;
}

.np-cat-card:hover .np-cat-card-action {
    color: #0d2f7a;
}

.np-cat-card-action i {
    font-size: 15px;
    transition: transform .2s ease;
}

.np-cat-card:hover .np-cat-card-action i {
    transform: translateX(4px);
}

/* ==========================================================================
   NO-IMAGE DESIGN-ONLY LUXURY CATEGORY CARDS
   ========================================================================== */
.np-cat-design-card {
    position: relative;
    background: #ffffff;
    border: 1.5px solid #eef2f6;
    border-radius: 20px;
    padding: 22px 18px 18px;
    height: 100%;
    min-height: 200px;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04);
    overflow: hidden;
    z-index: 1;
    display: flex;
    flex-direction: column;
}

.np-cat-design-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--cat-accent, #00AEEF), #0d2f7a);
    opacity: 0.85;
    transition: height 0.3s ease;
}

.np-cat-design-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top right, var(--cat-bg, #f0f9ff) 0%, transparent 65%);
    opacity: 0.6;
    z-index: -1;
    transition: opacity 0.35s ease;
}

.np-cat-design-card:hover {
    transform: translateY(-7px);
    border-color: var(--cat-border, #bae6fd);
    box-shadow: 0 20px 40px rgba(13, 47, 122, 0.12);
}

.np-cat-design-card:hover::before {
    height: 6px;
}

.np-cat-design-card:hover::after {
    opacity: 1;
}

.np-cat-design-icon-wrap {
    width: 50px;
    height: 50px;
    border-radius: 14px;
    background: var(--cat-bg, #f0f9ff);
    border: 1px solid var(--cat-border, #bae6fd);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--cat-accent, #00AEEF);
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.np-cat-design-icon-wrap i {
    font-size: 26px;
    transition: transform 0.35s ease;
}

.np-cat-design-card:hover .np-cat-design-icon-wrap {
    background: var(--cat-accent, #00AEEF);
    color: #ffffff;
    transform: scale(1.08) rotate(3deg);
    box-shadow: 0 8px 20px rgba(0, 174, 239, 0.3);
}

.np-cat-badge {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 700;
    color: #475569;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    padding: 3px 8px;
    border-radius: 20px;
    letter-spacing: 0.2px;
}

.np-cat-design-title {
    font-size: 16px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.3;
    margin: 10px 0 5px 0;
    transition: color 0.25s ease;
}

.np-cat-design-card:hover .np-cat-design-title {
    color: var(--cat-accent, #00AEEF);
}

.np-cat-design-sub {
    font-size: 12px;
    color: #64748b;
    line-height: 1.45;
    margin: 0;
    opacity: 0.92;
}

.np-cat-design-footer {
    border-top: 1px solid #f1f5f9;
}

.np-cat-design-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 700;
    color: #0f172a;
    transition: all 0.25s ease;
}

.np-cat-design-cta i {
    font-size: 14px;
    transition: transform 0.25s ease;
}

.np-cat-design-card:hover .np-cat-design-cta {
    color: var(--cat-accent, #00AEEF);
}

.np-cat-design-card:hover .np-cat-design-cta i {
    transform: translateX(4px);
}

.np-cat-design-circle-arrow {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #f1f5f9;
    color: #64748b;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.np-cat-design-circle-arrow i {
    font-size: 16px;
    transition: transform 0.3s ease;
}

.np-cat-design-card:hover .np-cat-design-circle-arrow {
    background: var(--cat-accent, #00AEEF);
    color: #ffffff;
    transform: rotate(-45deg);
}

/* 5 columns grid on desktop */
@media (min-width: 992px) {
    .col-lg-2-4 {
        flex: 0 0 20%;
        max-width: 20%;
    }
}

/* ==========================================================================
   8. 2027 Ultra-Modern Product Cards
   ========================================================================== */
.np-2027-product-card {
    background: #ffffff;
    border-radius: 20px;
    border: 1px solid #edf2f7;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 16px;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 18px rgba(13, 47, 122, 0.04);
    position: relative;
}

.np-2027-product-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px -10px rgba(13, 47, 122, 0.14);
    border-color: rgba(13, 47, 122, 0.25);
}

.np-product-img-box {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 16px;
    background: #f8fafc;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px;
}

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

.np-product-thumb {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
    transition: transform 0.45s ease;
    display: block;
    margin: 0 auto;
}

.np-2027-product-card:hover .np-product-thumb {
    transform: scale(1.08);
}

.np-product-badges {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.np-badge-promo {
    background: #ef4444;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 20px;
    letter-spacing: 0.05em;
    box-shadow: 0 4px 10px rgba(239, 68, 68, 0.3);
}

.np-badge-lab {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(8px);
    color: #0d2f7a;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    border: 1px solid rgba(13, 47, 122, 0.1);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.np-badge-lab i {
    font-size: 13px;
    color: #00AEEF;
}

.np-product-floating-actions {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 6px;
    opacity: 0;
    transform: translateX(6px);
    transition: all 0.25s ease;
}

.np-2027-product-card:hover .np-product-floating-actions {
    opacity: 1;
    transform: translateX(0);
}

.np-action-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #64748b;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transition: all 0.2s ease;
}

.np-action-btn:hover {
    background: #0d2f7a;
    color: #ffffff;
    border-color: #0d2f7a;
    transform: scale(1.1);
}

.np-action-btn.active {
    background: #ef4444;
    color: #ffffff;
    border-color: #ef4444;
}

.np-product-card-details {
    padding-top: 14px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.np-product-meta {
    margin-bottom: 4px;
}

.np-product-unit {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #00AEEF;
    text-transform: uppercase;
}

.np-product-card-title {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
    margin: 0 0 8px;
    min-height: 38px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.np-product-card-title a {
    color: #1e293b;
    text-decoration: none;
    transition: color 0.2s ease;
}

.np-product-card-title a:hover {
    color: #0d2f7a;
}

.np-product-rating {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 8px;
}

.np-stars {
    display: flex;
    align-items: center;
    gap: 1px;
}

.np-star {
    font-size: 14px;
    color: #f59e0b;
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.np-review-count {
    font-size: 11px;
    font-weight: 600;
    color: #94a3b8;
}

.np-2027-product-card .np-price-main {
    font-size: 17px !important;
    font-weight: 800 !important;
    color: #0d2f7a !important;
    line-height: 1 !important;
    letter-spacing: -0.01em;
}

.np-price-old {
    font-size: 12.5px;
    color: #94a3b8;
    text-decoration: line-through;
    margin-left: 6px;
}

.np-btn-add-cart {
    background: #0d2f7a !important; /* Solid color */
    color: #ffffff !important;
    font-weight: 700;
    font-size: 13px;
    border-radius: 25px;
    padding: 9px 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: none;
    transition: all 0.25s ease;
    text-decoration: none !important;
    box-shadow: 0 4px 12px rgba(13, 47, 122, 0.15);
}

.np-btn-add-cart:hover {
    background: #00AEEF !important; /* Solid color, NO gradient */
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 174, 239, 0.25);
}

.np-btn-add-cart .np-css-icon {
    width: 17px;
    height: 17px;
    color: #ffffff;
}

/* Sur mobile : uniquement l'icône chariot sans texte */
@media (max-width: 768px) {
    .np-btn-add-cart .np-btn-label {
        display: none !important;
    }

    .np-btn-add-cart {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        border-radius: 50% !important;
        padding: 0 !important;
        margin: 0 auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .np-btn-add-cart .np-css-icon {
        width: 18px !important;
        height: 18px !important;
        margin: 0 !important;
    }

    .np-product-card-footer {
        display: flex !important;
        justify-content: center !important;
    }
}

.np-btn-out-stock {
    background: #f1f5f9;
    color: #94a3b8;
    font-size: 12px;
    font-weight: 600;
    border-radius: 25px;
    padding: 8px 14px;
    border: none;
}

/* ==========================================================================
   Sections Produits & Sliders : Même largeur que la page (pas de débordement)
   ========================================================================== */
.product-tab-section,
.np-product-section {
    width: 100% !important;
    position: relative !important;
    overflow: hidden !important;
}

.product-tab-section > .container-fluid,
.np-product-section > .container-fluid {
    width: 90% !important;
    max-width: 1600px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.product-slider-wrapper {
    width: 100% !important;
    overflow: hidden !important; /* Empeche les cartes de deborder sur les bords de l'ecran */
    position: relative !important;
    padding: 10px 2px 20px 2px !important;
}

.product-slider-wrapper .swiper-wrapper {
    display: flex !important;
    box-sizing: border-box !important;
}

.product-slider-wrapper .swiper-slide {
    height: auto !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
}

.np-slider-arrow {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    color: #0d2f7a;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    transition: all 0.2s ease;
    margin-left: 8px;
}

.np-slider-arrow:hover {
    background: #0d2f7a;
    color: #ffffff;
    border-color: #0d2f7a;
    transform: scale(1.08);
}

/* ==========================================================================
   9. Official Instagram Feed Gallery & Campaigns (2027 Design)
   ========================================================================== */
.np-instagram-section {
    background: #fafafa;
    border-top: 1px solid #eaeaea;
    border-bottom: 1px solid #eaeaea;
    position: relative;
    z-index: 2;
}

.np-insta-header {
    background: #ffffff;
    border: 1px solid #efefef;
    border-radius: 20px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.03);
}

.np-insta-avatar-ring {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    padding: 3px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.np-insta-avatar-ring.sm {
    padding: 2px;
}

.np-insta-avatar-inner {
    background: #ffffff;
    padding: 3px;
    border-radius: 50%;
    width: 68px;
    height: 68px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.np-insta-avatar-inner.sm {
    width: 38px;
    height: 38px;
    padding: 2px;
}

.np-insta-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.np-insta-username {
    font-size: 1.25rem;
    font-weight: 700;
    color: #262626;
    letter-spacing: -0.01em;
}

.np-insta-verified {
    color: #0095f6;
    display: inline-flex;
    align-items: center;
}

.np-insta-verified i {
    font-size: 18px;
    font-variation-settings: 'FILL' 1;
}

.np-insta-follow-btn {
    background: #0095f6 !important;
    color: #ffffff !important;
    font-weight: 600;
    font-size: 13px;
    border-radius: 8px;
    padding: 5px 16px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: none;
    transition: background 0.2s ease;
    text-decoration: none;
}

.np-insta-follow-btn:hover {
    background: #1877f2 !important;
    color: #ffffff !important;
}

.np-insta-bio {
    font-size: 13.5px;
    color: #4a4a4a;
    line-height: 1.4;
}

.np-insta-stats {
    font-size: 13px;
}

.np-insta-view-btn.active {
    background: #262626 !important;
    color: #ffffff !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

/* Instagram Highlights (Filter Tabs) */
.np-insta-highlights {
    scrollbar-width: none;
}
.np-insta-highlights::-webkit-scrollbar {
    display: none;
}

.np-highlight-item {
    background: transparent;
    border: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    padding: 4px;
    transition: transform 0.2s ease;
}

.np-highlight-item:hover {
    transform: translateY(-2px);
}

.np-highlight-circle {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #f1f5f9;
    border: 2px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #475569;
    transition: all 0.25s ease;
}

.np-highlight-circle i {
    font-size: 24px;
}

.np-highlight-item.active .np-highlight-circle {
    border-color: transparent;
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(220, 39, 67, 0.3);
}

.np-highlight-label {
    font-size: 12px;
    font-weight: 600;
    color: #262626;
    white-space: nowrap;
}

/* Instagram Post Card */
.np-insta-post-card {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.06);
    background: #ffffff;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.np-insta-post-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.14);
}

.np-insta-img-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 5;
    background: #f1f5f9;
    overflow: hidden;
}

.np-insta-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.45s ease;
}

.np-insta-post-card:hover .np-insta-img {
    transform: scale(1.06);
}

.np-insta-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.42);
    backdrop-filter: blur(2px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    opacity: 0;
    transition: opacity 0.25s ease;
    z-index: 3;
    padding: 16px;
}

.np-insta-post-card:hover .np-insta-overlay {
    opacity: 1;
}

.np-insta-overlay-stats {
    display: flex;
    align-items: center;
    gap: 18px;
    color: #ffffff;
}

.np-insta-stat-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    font-size: 15px;
}

.np-insta-stat-item i {
    font-size: 20px;
    font-variation-settings: 'FILL' 1;
}

.np-insta-overlay-tag {
    position: absolute;
    bottom: 12px;
    left: 12px;
    font-size: 11px;
    font-weight: 700;
    color: #ffffff;
    background: rgba(0, 0, 0, 0.55);
    padding: 3px 10px;
    border-radius: 12px;
    letter-spacing: 0.03em;
}

.np-insta-click-hint {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
}

.np-insta-corner-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    color: #ffffff;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
    z-index: 2;
}

.np-insta-corner-badge i {
    font-size: 18px;
}

/* 5 Column Grid for Large Screens & Row Spacing */
.np-insta-grid-row {
    row-gap: 28px;
}
.np-insta-item-col {
    margin-bottom: 28px !important;
}
@media (min-width: 1200px) {
    .col-xl-2-4 {
        flex: 0 0 20%;
        max-width: 20%;
    }
}

/* Instagram Lightbox Modal */
#npInstaModal .modal-content {
    background: #ffffff;
    border-radius: 20px;
    overflow: hidden;
}

.np-insta-icon-btn {
    cursor: pointer;
    font-size: 22px;
    display: inline-flex;
    align-items: center;
    transition: transform 0.15s ease;
}

.np-insta-icon-btn:hover {
    transform: scale(1.15);
}

/* ==========================================================================
   10. Clickable Official Brands Showcase & Filter (2027 Design)
   ========================================================================== */
.np-brands-showcase-section {
    background: #ffffff;
    border-top: 1px solid #edf2f7;
    border-bottom: 1px solid #edf2f7;
    position: relative;
    z-index: 2;
}

.np-brands-showcase-section > .container-fluid,
.np-brands-showcase-section .np-banner-wrap,
.np-brands-showcase-section > .container {
    width: 90% !important;
    max-width: 1600px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.np-brand-slider-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    position: relative !important;
    padding: 6px 2px 16px 2px !important;
}

.np-brand-swiper {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    position: relative !important;
}

.np-brand-card {
    background: #ffffff;
    border-radius: 20px;
    border: 1px solid #edf2f7;
    padding: 18px 14px 14px;
    box-shadow: 0 4px 16px rgba(13, 47, 122, 0.04);
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    text-decoration: none !important;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.np-brand-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 32px -8px rgba(13, 47, 122, 0.16);
    border-color: rgba(13, 47, 122, 0.3);
}

.np-brand-logo-box {
    width: 100%;
    height: auto;
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border: 1px solid #e9ecef;
    border-radius: 16px;
    padding: 12px;
    overflow: visible;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.np-brand-card:hover .np-brand-logo-box {
    box-shadow: 0 10px 25px rgba(13, 47, 122, 0.12);
    border-color: #00AEEF;
    transform: translateY(-4px);
}

.np-brand-logo-img {
    width: 100% !important;
    height: auto !important;
    max-height: 120px;
    object-fit: contain !important;
    display: block;
    margin: 0 auto;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.np-brand-card:hover .np-brand-logo-img {
    transform: scale(1.04);
}

.np-brand-name {
    font-size: 13.5px;
    font-weight: 800;
    color: #1e293b;
    margin: 8px 0 2px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.np-brand-explore-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 700;
    color: #00AEEF;
    transition: all 0.2s ease;
}

.np-brand-card:hover .np-brand-explore-link {
    gap: 7px;
    color: #0d2f7a;
}

.np-brand-explore-link i {
    font-size: 14px;
}

/* ========================================================
   NATURA PRO - PURE CSS ICONS (NO EXTERNAL HTML FONT REQ)
   ======================================================== */
.np-css-icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: currentColor;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    vertical-align: middle;
    flex-shrink: 0;
}

/* Home */
.np-icon-home {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z'/%3E%3C/svg%3E");
}

/* Shop / Store */
.np-icon-shop {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 4H4v2h16V4zm1 10v-2l-1-5H4l-1 5v2h1v6h10v-6h4v6h2v-6h1zm-9 4H6v-4h6v4z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 4H4v2h16V4zm1 10v-2l-1-5H4l-1 5v2h1v6h10v-6h4v6h2v-6h1zm-9 4H6v-4h6v4z'/%3E%3C/svg%3E");
}

/* Category / Grid */
.np-icon-category {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 11h6V5H4v6zm0 7h6v-5H4v5zm8 0h6v-5h-6v5zm0-13v6h6V5h-6z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 11h6V5H4v6zm0 7h6v-5H4v5zm8 0h6v-5h-6v5zm0-13v6h6V5h-6z'/%3E%3C/svg%3E");
}

/* Cart / Chariot (supermarket trolley with wheels) */
.np-icon-cart {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.08-.14.12-.31.12-.48 0-.55-.45-1-1-1H5.21l-.94-2H1zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.08-.14.12-.31.12-.48 0-.55-.45-1-1-1H5.21l-.94-2H1zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z'/%3E%3C/svg%3E");
}

/* Tooth (Bucco-dentaire) */
.np-icon-tooth {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8.5 2 6 3.5 6 7c0 3 1.2 5.5 1.8 8.5.5 2.5 1.5 6.5 2.5 6.5s1.2-3 1.7-6.5c0-1 .5-2 0-2s0 1 0 2c.5 3.5.7 6.5 1.7 6.5s2-4 2.5-6.5C16.8 12.5 18 10 18 7c0-3.5-2.5-5-6-5z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8.5 2 6 3.5 6 7c0 3 1.2 5.5 1.8 8.5.5 2.5 1.5 6.5 2.5 6.5s1.2-3 1.7-6.5c0-1 .5-2 0-2s0 1 0 2c.5 3.5.7 6.5 1.7 6.5s2-4 2.5-6.5C16.8 12.5 18 10 18 7c0-3.5-2.5-5-6-5z'/%3E%3C/svg%3E");
}

/* Face (Soins du visage) */
.np-icon-face {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 11.75a1.25 1.25 0 1 0 0-2.5 1.25 1.25 0 0 0 0 2.5zm6 0a1.25 1.25 0 1 0 0-2.5 1.25 1.25 0 0 0 0 2.5zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-.29.02-.58.05-.86 2.36-1.05 4.23-2.98 5.21-5.37C11.07 8.33 14.05 10 17.42 10c.78 0 1.53-.09 2.25-.26.21.71.33 1.47.33 2.26 0 4.41-3.59 8-8 8z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 11.75a1.25 1.25 0 1 0 0-2.5 1.25 1.25 0 0 0 0 2.5zm6 0a1.25 1.25 0 1 0 0-2.5 1.25 1.25 0 0 0 0 2.5zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-.29.02-.58.05-.86 2.36-1.05 4.23-2.98 5.21-5.37C11.07 8.33 14.05 10 17.42 10c.78 0 1.53-.09 2.25-.26.21.71.33 1.47.33 2.26 0 4.41-3.59 8-8 8z'/%3E%3C/svg%3E");
}

/* Body (Soins du corps) */
.np-icon-body {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13 3h-2v3h2V3zm4 5h-2.18c-.4-1.16-1.5-2-2.82-2s-2.42.84-2.82 2H7c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-5 10c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13 3h-2v3h2V3zm4 5h-2.18c-.4-1.16-1.5-2-2.82-2s-2.42.84-2.82 2H7c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-5 10c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3z'/%3E%3C/svg%3E");
}

/* Droplet / Hygiene */
.np-icon-droplet {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.69l5.66 5.66a8 8 0 1 1-11.31 0z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.69l5.66 5.66a8 8 0 1 1-11.31 0z'/%3E%3C/svg%3E");
}

/* Spray / Deodorant */
.np-icon-spray {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 2h4v3h-4zm-1 5h6a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H9a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2zm9-3h2v2h-2zm3 3h2v2h-2zm-3 3h2v2h-2z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 2h4v3h-4zm-1 5h6a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H9a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2zm9-3h2v2h-2zm3 3h2v2h-2zm-3 3h2v2h-2z'/%3E%3C/svg%3E");
}

/* Hair / Cheveux */
.np-icon-hair {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3c-4.97 0-9 4.03-9 9 0 2.12.74 4.07 1.97 5.61L4.35 21h3.11l.52-1.57c1.23.37 2.56.57 3.97.57s2.74-.2 3.97-.57l.57 1.57h3.11l-.62-3.39C20.26 16.07 21 14.12 21 12c0-4.97-4.03-9-9-9zm-1 12H9v-2h2v2zm4 0h-2v-2h2v2zm-2-4h-2V7h2v4z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3c-4.97 0-9 4.03-9 9 0 2.12.74 4.07 1.97 5.61L4.35 21h3.11l.52-1.57c1.23.37 2.56.57 3.97.57s2.74-.2 3.97-.57l.57 1.57h3.11l-.62-3.39C20.26 16.07 21 14.12 21 12c0-4.97-4.03-9-9-9zm-1 12H9v-2h2v2zm4 0h-2v-2h2v2zm-2-4h-2V7h2v4z'/%3E%3C/svg%3E");
}

/* Shield (Intime) */
.np-icon-shield {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 10.99h7c-.53 4.12-3.28 7.79-7 8.94V12H5V6.3l7-3.11v8.8z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 10.99h7c-.53 4.12-3.28 7.79-7 8.94V12H5V6.3l7-3.11v8.8z'/%3E%3C/svg%3E");
}

/* Baby / Bebe */
.np-icon-baby {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2zm-3.5 7.5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5S7 11.83 7 11s.67-1.5 1.5-1.5zm7 0c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5-1.5-.67-1.5-1.5.67-1.5 1.5-1.5zm-3.5 8c-2.33 0-4.31-1.46-5.11-3.5h10.22c-.8 2.04-2.78 3.5-5.11 3.5z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2zm-3.5 7.5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5S7 11.83 7 11s.67-1.5 1.5-1.5zm7 0c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5-1.5-.67-1.5-1.5.67-1.5 1.5-1.5zm-3.5 8c-2.33 0-4.31-1.46-5.11-3.5h10.22c-.8 2.04-2.78 3.5-5.11 3.5z'/%3E%3C/svg%3E");
}

/* Perfume / Brumes */
.np-icon-perfume {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 3h4v2h-4zm-2 4h8v2H8zm-1 4h10a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2zm5 3a2 2 0 1 0 0 4 2 2 0 0 0 0-4z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 3h4v2h-4zm-2 4h8v2H8zm-1 4h10a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2zm5 3a2 2 0 1 0 0 4 2 2 0 0 0 0-4z'/%3E%3C/svg%3E");
}

/* Gift / Coffret */
.np-icon-gift {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6h-2.18c.11-.31.18-.65.18-1 0-1.66-1.34-3-3-3-1.05 0-1.96.54-2.5 1.35l-.5.65-.5-.65C10.96 2.54 10.05 2 9 2 7.34 2 6 3.34 6 5c0 .35.07.69.18 1H4c-1.11 0-1.99.89-1.99 2L2 19c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2zm-5-2c.55 0 1 .45 1 1s-.45 1-1 1h-2V5c0-.55.45-1 1-1zM9 4c.55 0 1 .45 1 1v1H8c-.55 0-1-.45-1-1s.45-1 1-1zm11 15H4v-2h16v2zm0-5H4V8h5.08L7 10.83 8.62 12 11 8.76V14h2V8.76L15.38 12 17 10.83 14.92 8H20v6z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6h-2.18c.11-.31.18-.65.18-1 0-1.66-1.34-3-3-3-1.05 0-1.96.54-2.5 1.35l-.5.65-.5-.65C10.96 2.54 10.05 2 9 2 7.34 2 6 3.34 6 5c0 .35.07.69.18 1H4c-1.11 0-1.99.89-1.99 2L2 19c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.1-.89-2-2-2zm-5-2c.55 0 1 .45 1 1s-.45 1-1 1h-2V5c0-.55.45-1 1-1zM9 4c.55 0 1 .45 1 1v1H8c-.55 0-1-.45-1-1s.45-1 1-1zm11 15H4v-2h16v2zm0-5H4V8h5.08L7 10.83 8.62 12 11 8.76V14h2V8.76L15.38 12 17 10.83 14.92 8H20v6z'/%3E%3C/svg%3E");
}

/* Cross / Pharmacy */
.np-icon-cross {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 10.5h-5.5V5h-3v5.5H5v3h5.5V19h3v-5.5H19v-3z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 10.5h-5.5V5h-3v5.5H5v3h5.5V19h3v-5.5H19v-3z'/%3E%3C/svg%3E");
}

/* Heart (Wishlist) */
.np-icon-heart {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E");
}

/* Info */
.np-icon-info {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z'/%3E%3C/svg%3E");
}

/* Chevron Right */
.np-icon-chevron-right {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z'/%3E%3C/svg%3E");
}

/* Briefcase / Pro */
.np-icon-briefcase {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6h-4V4c0-1.11-.89-2-2-2h-4c-1.11 0-2 .89-2 2v2H4c-1.11 0-1.99.89-1.99 2L2 19c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2zm-6 0h-4V4h4v2z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6h-4V4c0-1.11-.89-2-2-2h-4c-1.11 0-2 .89-2 2v2H4c-1.11 0-1.99.89-1.99 2L2 19c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2zm-6 0h-4V4h4v2z'/%3E%3C/svg%3E");
}

/* Pin / Address */
.np-icon-pin {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5a2.5 2.5 0 0 1 0-5 2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5a2.5 2.5 0 0 1 0-5 2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E");
}

/* Phone */
.np-icon-phone {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.01 15.38c-1.23 0-2.42-.2-3.53-.56a.977.977 0 0 0-1.01.24l-1.57 1.97c-2.83-1.35-5.48-3.9-6.89-6.83l1.95-1.66c.27-.28.35-.67.24-1.02-.37-1.11-.56-2.3-.56-3.53 0-.54-.45-.99-.99-.99H4.19C3.65 3 3 3.24 3 3.99 3 13.28 10.73 21 20.01 21c.71 0 .99-.63.99-1.18v-3.45c0-.54-.45-.99-.99-.99z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.01 15.38c-1.23 0-2.42-.2-3.53-.56a.977.977 0 0 0-1.01.24l-1.57 1.97c-2.83-1.35-5.48-3.9-6.89-6.83l1.95-1.66c.27-.28.35-.67.24-1.02-.37-1.11-.56-2.3-.56-3.53 0-.54-.45-.99-.99-.99H4.19C3.65 3 3 3.24 3 3.99 3 13.28 10.73 21 20.01 21c.71 0 .99-.63.99-1.18v-3.45c0-.54-.45-.99-.99-.99z'/%3E%3C/svg%3E");
}

/* Mail */
.np-icon-mail {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E");
}

/* Clock / Schedule */
.np-icon-clock {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z'/%3E%3C/svg%3E");
}

/* User / Account */
.np-icon-user {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z'/%3E%3C/svg%3E");
}

/* Factory */
.np-icon-factory {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 21h20v-2H2v2zm1.5-4h17a.5.5 0 0 0 .5-.5V8.8a.5.5 0 0 0-.74-.44L15 11V8.8a.5.5 0 0 0-.74-.44L9 11V4.5a.5.5 0 0 0-.5-.5h-4a.5.5 0 0 0-.5.5V16.5a.5.5 0 0 0 .5.5zm2.5-11h2v5.7L6 13V6zm0 9h2v-2.3L6 14v1zm4-3.7l3-1.8V15h-3v-3.7zm5-1.2l3-1.8V15h-3v-4.9z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 21h20v-2H2v2zm1.5-4h17a.5.5 0 0 0 .5-.5V8.8a.5.5 0 0 0-.74-.44L15 11V8.8a.5.5 0 0 0-.74-.44L9 11V4.5a.5.5 0 0 0-.5-.5h-4a.5.5 0 0 0-.5.5V16.5a.5.5 0 0 0 .5.5zm2.5-11h2v5.7L6 13V6zm0 9h2v-2.3L6 14v1zm4-3.7l3-1.8V15h-3v-3.7zm5-1.2l3-1.8V15h-3v-4.9z'/%3E%3C/svg%3E");
}

/* Tag / Price */
.np-icon-tag {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21.41 11.58l-9-9C12.05 2.22 11.55 2 11 2H4c-1.1 0-2 .9-2 2v7c0 .55.22 1.05.59 1.42l9 9c.36.36.86.58 1.41.58.55 0 1.05-.22 1.41-.59l7-7c.37-.36.59-.86.59-1.41 0-.55-.23-1.06-.59-1.42zM5.5 7C4.67 7 4 6.33 4 5.5S4.67 4 5.5 4 7 4.67 7 5.5 6.33 7 5.5 7zm6.71 8.29l-1.41-1.41 5.5-5.5 1.41 1.41-5.5 5.5zm-.5-5.09a1.2 1.2 0 1 1 0-2.4 1.2 1.2 0 0 1 0 2.4zm4 4a1.2 1.2 0 1 1 0-2.4 1.2 1.2 0 0 1 0 2.4z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21.41 11.58l-9-9C12.05 2.22 11.55 2 11 2H4c-1.1 0-2 .9-2 2v7c0 .55.22 1.05.59 1.42l9 9c.36.36.86.58 1.41.58.55 0 1.05-.22 1.41-.59l7-7c.37-.36.59-.86.59-1.41 0-.55-.23-1.06-.59-1.42zM5.5 7C4.67 7 4 6.33 4 5.5S4.67 4 5.5 4 7 4.67 7 5.5 6.33 7 5.5 7zm6.71 8.29l-1.41-1.41 5.5-5.5 1.41 1.41-5.5 5.5zm-.5-5.09a1.2 1.2 0 1 1 0-2.4 1.2 1.2 0 0 1 0 2.4zm4 4a1.2 1.2 0 1 1 0-2.4 1.2 1.2 0 0 1 0 2.4z'/%3E%3C/svg%3E");
}

/* WhatsApp */
.np-icon-whatsapp {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.04 2C6.58 2 2.13 6.45 2.13 11.91C2.13 13.66 2.59 15.36 3.45 16.86L2.05 22L7.3 20.62C8.75 21.41 10.38 21.83 12.04 21.83C17.5 21.83 21.95 17.38 21.95 11.92C21.95 9.27 20.92 6.78 19.05 4.91C17.18 3.03 14.69 2 12.04 2M12.05 3.67C14.25 3.67 16.31 4.53 17.87 6.09C19.42 7.65 20.28 9.72 20.28 11.92C20.28 16.46 16.58 20.15 12.04 20.15C10.56 20.15 9.11 19.76 7.85 19L7.55 18.83L4.43 19.65L5.26 16.61L5.06 16.29C4.24 15 3.8 13.47 3.8 11.91C3.81 7.37 7.5 3.67 12.05 3.67Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.04 2C6.58 2 2.13 6.45 2.13 11.91C2.13 13.66 2.59 15.36 3.45 16.86L2.05 22L7.3 20.62C8.75 21.41 10.38 21.83 12.04 21.83C17.5 21.83 21.95 17.38 21.95 11.92C21.95 9.27 20.92 6.78 19.05 4.91C17.18 3.03 14.69 2 12.04 2M12.05 3.67C14.25 3.67 16.31 4.53 17.87 6.09C19.42 7.65 20.28 9.72 20.28 11.92C20.28 16.46 16.58 20.15 12.04 20.15C10.56 20.15 9.11 19.76 7.85 19L7.55 18.83L4.43 19.65L5.26 16.61L5.06 16.29C4.24 15 3.8 13.47 3.8 11.91C3.81 7.37 7.5 3.67 12.05 3.67Z'/%3E%3C/svg%3E");
}

/* ========================================================
   NATURA PRO - PROMO FEATURES AREA (SOLID COLORS ONLY)
   ======================================================== */
.np-promo-section {
    background: #f8fafc;
    border-top: 1px solid #eef2f6;
    border-bottom: 1px solid #eef2f6;
    padding: 34px 0;
    width: 100%;
}

.np-promo-section .promo-box {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 22px 24px;
    transition: all 0.28s ease;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.03);
    height: 100%;
}

.np-promo-section .promo-box:hover {
    transform: translateY(-4px);
    border-color: #00AEEF;
    box-shadow: 0 12px 28px rgba(0, 174, 239, 0.15);
}

.np-promo-section .promo-icon {
    width: 60px;
    height: 60px;
    min-width: 60px;
    border-radius: 15px;
    background: #e0f2fe;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 18px;
    transition: all 0.28s ease;
    color: #00AEEF;
}

.np-promo-section .promo-box:hover .promo-icon {
    background: #00AEEF;
    color: #ffffff;
    transform: scale(1.04);
}

.np-promo-section .promo-icon img {
    max-width: 32px;
    max-height: 32px;
    object-fit: contain;
    transition: all 0.25s ease;
}

.np-promo-section .promo-box:hover .promo-icon img {
    filter: brightness(0) invert(1);
}

.np-promo-section .promo-icon .np-css-icon {
    width: 32px;
    height: 32px;
    transition: transform 0.28s ease;
}

.np-promo-section .promo-box:hover .promo-icon .np-css-icon {
    transform: scale(1.1);
}

.np-promo-section .promo-content h5 {
    font-size: 15px;
    font-weight: 700;
    color: #0d2f7a;
    margin-bottom: 4px;
    line-height: 1.3;
}

.np-promo-section .promo-content span {
    font-size: 13px;
    color: #64748b;
    line-height: 1.45;
    display: block;
}

/* ========================================================
   NATURA PRO - FOOTER MODERN (SOLID COLORS ONLY - FULL WIDTH)
   ======================================================== */
.np-footer-wrapper {
    background: #ffffff;
    color: #334155;
    padding-top: 56px;
    padding-bottom: 28px;
    border-top: 1px solid #e2e8f0;
    font-size: 14px;
    width: 100% !important;
    max-width: 100% !important;
}

.np-footer-wrapper .np-footer-container,
.np-promo-section .np-footer-container {
    width: 95% !important;
    max-width: 1750px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
}

.np-footer-row {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    width: 100% !important;
}

.np-footer-logo-img {
    max-height: 50px;
    width: auto;
    max-width: 200px;
    object-fit: contain;
    display: block;
}

.np-footer-desc p {
    color: #64748b;
    font-size: 13.5px;
    line-height: 1.65;
    margin-bottom: 0;
}

.np-footer-contact-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.np-contact-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.np-contact-item .np-css-icon {
    width: 18px;
    height: 18px;
    color: #00AEEF;
    min-width: 18px;
    margin-top: 3px;
}

.np-contact-item .np-ci-text {
    font-size: 13.5px;
    color: #475569;
    line-height: 1.5;
}

.np-phone-link {
    font-size: 15px;
    font-weight: 700;
    color: #0d2f7a;
    text-decoration: none;
    transition: color 0.2s ease;
}

.np-phone-link:hover {
    color: #00AEEF;
    text-decoration: none;
}

.np-email-link {
    color: #475569;
    text-decoration: none;
    transition: color 0.2s ease;
}

.np-email-link:hover {
    color: #00AEEF;
    text-decoration: none;
}

.np-footer-col-title {
    font-size: 15px;
    font-weight: 700;
    color: #0d2f7a;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 18px;
    position: relative;
    padding-bottom: 10px;
}

.np-footer-col-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 26px;
    height: 3px;
    background: #00AEEF; /* Solid color */
    border-radius: 2px;
}

[dir="rtl"] .np-footer-col-title::after {
    left: auto;
    right: 0;
}

.np-footer-menu {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.np-footer-menu li a {
    color: #64748b;
    font-size: 13.5px;
    text-decoration: none;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
}

.np-footer-menu li a:hover {
    color: #00AEEF;
    transform: translateX(4px);
    text-decoration: none;
}

[dir="rtl"] .np-footer-menu li a:hover {
    transform: translateX(-4px);
}

.np-newsletter-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 22px;
}

.np-newsletter-card .np-footer-col-title {
    margin-bottom: 10px;
    padding-bottom: 0;
}

.np-newsletter-card .np-footer-col-title::after {
    display: none;
}

.np-nl-text {
    font-size: 13px;
    color: #64748b;
    line-height: 1.5;
}

.np-newsletter-input-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.np-nl-input {
    height: 44px;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    padding: 0 14px;
    font-size: 13.5px;
    color: #0f172a;
    transition: all 0.2s ease;
}

.np-nl-input:focus {
    border-color: #00AEEF;
    box-shadow: 0 0 0 3px rgba(0, 174, 239, 0.15);
    background: #ffffff;
}

.np-nl-submit-btn {
    height: 42px;
    background: #00AEEF; /* Solid color - NO gradient */
    color: #ffffff;
    border: none;
    border-radius: 10px;
    font-weight: 600;
    font-size: 13.5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.np-nl-submit-btn:hover {
    background: #0284c7; /* Solid color on hover - NO gradient */
    color: #ffffff;
}

.np-footer-bottom {
    border-top: 1px solid #eef2f6;
}

.np-copyright-text {
    font-size: 13px;
    color: #94a3b8;
}

.np-footer-social-links {
    display: inline-flex;
    gap: 10px;
    align-items: center;
}

.np-footer-social-links a {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #f1f5f9; /* Solid color */
    color: #0d2f7a;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.2s ease;
    font-size: 14px;
    border: 1px solid #e2e8f0;
}

.np-footer-social-links a:hover {
    background: #00AEEF; /* Solid color on hover - NO gradient */
    color: #ffffff;
    border-color: #00AEEF;
    transform: translateY(-2px);
}

/* ========================================================
   NATURA PRO - MOBILE BOTTOM APP BAR (kima app mobile)
   ======================================================== */
.np-mobile-bottom-bar {
    display: none;
}

@media (max-width: 768px) {
    /* Hide footer and promo area on mobile */
    .np-promo-section,
    .np-footer-wrapper {
        display: none !important;
    }

    /* Add space for fixed bottom bar */
    body {
        padding-bottom: 68px !important;
    }

    #whatsapp-btn {
        bottom: 78px !important;
    }

    #scrolltotop {
        bottom: 138px !important;
    }

    /* Fixed Bottom App Navigation */
    .np-mobile-bottom-bar {
        display: flex !important;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 60px;
        background: #ffffff;
        border-top: 1px solid #e2e8f0;
        z-index: 9999;
        align-items: center;
        justify-content: space-around;
        box-shadow: 0 -3px 14px rgba(0, 0, 0, 0.06);
        padding: 4px 6px;
        padding-bottom: max(4px, env(safe-area-inset-bottom));
    }

    .np-mob-nav-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        color: #64748b;
        font-size: 10.5px;
        font-weight: 600;
        gap: 3px;
        position: relative;
        transition: color 0.2s ease;
        padding: 4px 2px;
    }

    .np-mob-nav-item .np-css-icon {
        width: 22px;
        height: 22px;
        color: #64748b;
        transition: color 0.2s ease;
    }

    .np-mob-nav-item:hover,
    .np-mob-nav-item.active {
        color: #00AEEF;
        text-decoration: none;
    }

    .np-mob-nav-item:hover .np-css-icon,
    .np-mob-nav-item.active .np-css-icon {
        color: #00AEEF;
    }

    .np-mob-cart-badge {
        position: absolute;
        top: 0;
        right: calc(50% - 18px);
        background: #ef4444;
        color: #ffffff;
        font-size: 10px;
        font-weight: 700;
        min-width: 17px;
        height: 17px;
        line-height: 17px;
        border-radius: 9px;
        text-align: center;
        padding: 0 4px;
        border: 2px solid #ffffff;
    }
}

/* ========================================================
   NATURA PRO - PURE CSS SVG MASK ICONS & SYSTEM
   ======================================================== */
.np-css-icon {
    display: inline-block;
    width: 18px;
    height: 18px;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    vertical-align: middle;
    flex-shrink: 0;
    transition: color 0.2s ease, transform 0.2s ease;
}

/* 1. Shopping Cart / Chariot (Cariot requested by user) */
.np-icon-cart {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1' fill='%23000'/%3E%3Ccircle cx='18' cy='20' r='1' fill='%23000'/%3E%3Cpath d='M1 2.5h3.5l2.6 11.5a2 2 0 0 0 2 1.5h9.4a2 2 0 0 0 2-1.5l1.8-7.5H6.2'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1' fill='%23000'/%3E%3Ccircle cx='18' cy='20' r='1' fill='%23000'/%3E%3Cpath d='M1 2.5h3.5l2.6 11.5a2 2 0 0 0 2 1.5h9.4a2 2 0 0 0 2-1.5l1.8-7.5H6.2'/%3E%3C/svg%3E");
}

/* 2. Heart / Wishlist */
.np-icon-heart {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z'/%3E%3C/svg%3E");
}

/* 3. Pin / Location */
.np-icon-pin {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 4.99-5.54 10.2-7.4 11.8a1 1 0 0 1-1.2 0C9.54 20.2 4 14.99 4 10a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3' fill='%23000'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 4.99-5.54 10.2-7.4 11.8a1 1 0 0 1-1.2 0C9.54 20.2 4 14.99 4 10a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3' fill='%23000'/%3E%3C/svg%3E");
}

/* 4. Chevron Right */
.np-icon-chevron-right {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E");
}

/* 5. Grid / Apps */
.np-icon-grid {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='7' height='7' x='3' y='3' rx='1.5'/%3E%3Crect width='7' height='7' x='14' y='3' rx='1.5'/%3E%3Crect width='7' height='7' x='14' y='14' rx='1.5'/%3E%3Crect width='7' height='7' x='3' y='14' rx='1.5'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='7' height='7' x='3' y='3' rx='1.5'/%3E%3Crect width='7' height='7' x='14' y='3' rx='1.5'/%3E%3Crect width='7' height='7' x='14' y='14' rx='1.5'/%3E%3Crect width='7' height='7' x='3' y='14' rx='1.5'/%3E%3C/svg%3E");
}

/* 6. Navigation Top Menu Icons */
.np-icon-home {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpolyline points='9 22 9 12 15 12 15 22'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpolyline points='9 22 9 12 15 12 15 22'/%3E%3C/svg%3E");
}
.np-icon-store {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z'/%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z'/%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E");
}
.np-icon-sparkles {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 3-1.9 5.8a2 2 0 0 1-1.3 1.3L3 12l5.8 1.9a2 2 0 0 1 1.3 1.3L12 21l1.9-5.8a2 2 0 0 1 1.3-1.3L21 12l-5.8-1.9a2 2 0 0 1-1.3-1.3L12 3Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 3-1.9 5.8a2 2 0 0 1-1.3 1.3L3 12l5.8 1.9a2 2 0 0 1 1.3 1.3L12 21l1.9-5.8a2 2 0 0 1 1.3-1.3L21 12l-5.8-1.9a2 2 0 0 1-1.3-1.3L12 3Z'/%3E%3C/svg%3E");
}
.np-icon-briefcase {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='14' x='2' y='7' rx='2' ry='2'/%3E%3Cpath d='M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='14' x='2' y='7' rx='2' ry='2'/%3E%3Cpath d='M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16'/%3E%3C/svg%3E");
}
.np-icon-info {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E");
}
.np-icon-phone {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
}
.np-icon-user {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M19 21a7 7 0 0 0-14 0'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M19 21a7 7 0 0 0-14 0'/%3E%3C/svg%3E");
}

/* 7. Category Icons */
.np-icon-tooth {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3c-2.5 0-4 2-4 5 0 4 2 8 3 13 0 0 1 1 2 1s2-2 3-5c1 3 2 5 3 5s2-1 2-1c1-5 3-9 3-13 0-3-1.5-5-4-5-1.5 0-2.5.8-3 2-.5-1.2-1.5-2-3-2z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3c-2.5 0-4 2-4 5 0 4 2 8 3 13 0 0 1 1 2 1s2-2 3-5c1 3 2 5 3 5s2-1 2-1c1-5 3-9 3-13 0-3-1.5-5-4-5-1.5 0-2.5.8-3 2-.5-1.2-1.5-2-3-2z'/%3E%3C/svg%3E");
}
.np-icon-face {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9 10h.01'/%3E%3Cpath d='M15 10h.01'/%3E%3Cpath d='M9.5 15a3.5 3.5 0 0 0 5 0'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9 10h.01'/%3E%3Cpath d='M15 10h.01'/%3E%3Cpath d='M9.5 15a3.5 3.5 0 0 0 5 0'/%3E%3C/svg%3E");
}
.np-icon-body {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='5' r='2'/%3E%3Cpath d='M9 22v-6l-2-2V9a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v5l-2 2v6'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='5' r='2'/%3E%3Cpath d='M9 22v-6l-2-2V9a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v5l-2 2v6'/%3E%3C/svg%3E");
}
.np-icon-droplet {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.69l5.66 5.66a8 8 0 1 1-11.31 0z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.69l5.66 5.66a8 8 0 1 1-11.31 0z'/%3E%3C/svg%3E");
}
.np-icon-spray {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='7' y='8' width='10' height='14' rx='2'/%3E%3Cpath d='M10 8V5a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v3'/%3E%3Cpath d='M7 5h2'/%3E%3Cpath d='M17 4l2-1'/%3E%3Cpath d='M18 7l2 1'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='7' y='8' width='10' height='14' rx='2'/%3E%3Cpath d='M10 8V5a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v3'/%3E%3Cpath d='M7 5h2'/%3E%3Cpath d='M17 4l2-1'/%3E%3Cpath d='M18 7l2 1'/%3E%3C/svg%3E");
}
.np-icon-hair {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3a6 6 0 0 0-6 6v1a5 5 0 0 0 5 5h2a5 5 0 0 0 5-5V9a6 6 0 0 0-6-6z'/%3E%3Cpath d='M8 21v-4'/%3E%3Cpath d='M12 21v-3'/%3E%3Cpath d='M16 21v-4'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3a6 6 0 0 0-6 6v1a5 5 0 0 0 5 5h2a5 5 0 0 0 5-5V9a6 6 0 0 0-6-6z'/%3E%3Cpath d='M8 21v-4'/%3E%3Cpath d='M12 21v-3'/%3E%3Cpath d='M16 21v-4'/%3E%3C/svg%3E");
}
.np-icon-shield {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3C/svg%3E");
}
.np-icon-baby {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Cpath d='M8 14s1.5 2 4 2 4-2 4-2'/%3E%3Cline x1='9' y1='9' x2='9.01' y2='9'/%3E%3Cline x1='15' y1='9' x2='15.01' y2='9'/%3E%3Cpath d='M12 4v-2'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Cpath d='M8 14s1.5 2 4 2 4-2 4-2'/%3E%3Cline x1='9' y1='9' x2='9.01' y2='9'/%3E%3Cline x1='15' y1='9' x2='15.01' y2='9'/%3E%3Cpath d='M12 4v-2'/%3E%3C/svg%3E");
}
.np-icon-perfume {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='9' width='12' height='13' rx='3'/%3E%3Crect x='9' y='5' width='6' height='4' rx='1'/%3E%3Cpath d='M12 5V2'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='9' width='12' height='13' rx='3'/%3E%3Crect x='9' y='5' width='6' height='4' rx='1'/%3E%3Cpath d='M12 5V2'/%3E%3C/svg%3E");
}
.np-icon-gift {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 12 20 22 4 22 4 12'/%3E%3Crect x='2' y='7' width='20' height='5' rx='1'/%3E%3Cline x1='12' y1='22' x2='12' y2='7'/%3E%3Cpath d='M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7z'/%3E%3Cpath d='M12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 12 20 22 4 22 4 12'/%3E%3Crect x='2' y='7' width='20' height='5' rx='1'/%3E%3Cline x1='12' y1='22' x2='12' y2='7'/%3E%3Cpath d='M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7z'/%3E%3Cpath d='M12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z'/%3E%3C/svg%3E");
}
.np-icon-cross {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v16m-8-8h16'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v16m-8-8h16'/%3E%3C/svg%3E");
}

/* ========================================================
   NATURA PRO - CATEGORY MENU & DROPDOWN ENHANCEMENTS
   ======================================================== */

/* Remove legacy double chevron (FontAwesome :after) */
.category-list .has-dropdown > a::after,
.sidebar .has-dropdown > a::after {
    display: none !important;
    content: none !important;
}

/* Category Button (Top bar) */
.category-list .category-button {
    background: #0d2f7a !important; /* Solid color */
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    padding: 12px 18px !important;
    border-radius: 12px 12px 0 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    letter-spacing: 0.01em !important;
    border: none !important;
    box-shadow: none !important;
}

.category-list .category-button:hover {
    background: #00AEEF !important; /* Solid color */
    color: #ffffff !important;
}

.category-list .category-button .np-css-icon {
    width: 17px !important;
    height: 17px !important;
    color: #ffffff !important;
}

/* Category Dropdown Container */
.np-category-dropdown {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-top: none !important;
    border-radius: 0 0 16px 16px !important;
    box-shadow: 0 12px 32px rgba(13, 47, 122, 0.08) !important;
    padding: 6px 0 !important;
    margin: 0 !important;
    min-width: 275px !important;
    z-index: 1050 !important;
}

/* Category Item */
.np-menu-cat-item {
    position: relative !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.np-menu-cat-item > a {
    display: flex !important;
    align-items: center !important;
    padding: 7px 16px !important;
    color: #1e293b !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    background: #ffffff !important;
    position: relative !important;
}

.np-menu-cat-item > a:hover {
    background: #f1f5f9 !important; /* Single solid color, NO gradient */
    color: #00AEEF !important;
    padding-left: 20px !important;
}

/* Category Icon Badge */
.np-menu-cat-icon-badge {
    width: 28px !important;
    height: 28px !important;
    border-radius: 8px !important;
    background: #f1f5f9 !important; /* Solid color */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-right: 12px !important;
    flex-shrink: 0 !important;
    color: #0d2f7a !important;
    transition: all 0.2s ease !important;
}

.np-menu-cat-icon-badge .np-css-icon {
    width: 15px !important;
    height: 15px !important;
}

.np-menu-cat-item > a:hover .np-menu-cat-icon-badge {
    background: #00AEEF !important; /* Solid hover */
    color: #ffffff !important;
}

/* Category Name */
.np-menu-cat-name {
    flex: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: inherit !important;
}

/* Arrow Right (Single Arrow) */
.np-menu-cat-arrow {
    width: 13px !important;
    height: 13px !important;
    color: #94a3b8 !important;
    margin-left: auto !important;
    flex-shrink: 0 !important;
    transition: transform 0.2s ease, color 0.2s ease !important;
}

.np-menu-cat-item > a:hover .np-menu-cat-arrow {
    color: #00AEEF !important;
    transform: translateX(3px) !important;
}

/* Subcategory Flyout Dropdown */
.np-menu-subcat-dropdown {
    position: absolute !important;
    left: 100% !important;
    top: 0 !important;
    min-width: 240px !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    box-shadow: 0 12px 30px rgba(13, 47, 122, 0.09) !important;
    padding: 8px 6px !important;
    margin-left: 4px !important;
    z-index: 1060 !important;
    list-style: none !important;
    display: none;
}

.np-menu-cat-item:hover > .np-menu-subcat-dropdown {
    display: block !important;
}

.np-menu-subcat-dropdown li {
    list-style: none !important;
    margin: 2px 0 !important;
}

.np-menu-subcat-dropdown li a {
    display: flex !important;
    align-items: center !important;
    padding: 6px 12px !important;
    border-radius: 8px !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    color: #475569 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    background: transparent !important;
}

.np-subcat-bullet {
    width: 5px !important;
    height: 5px !important;
    border-radius: 50% !important;
    background: #94a3b8 !important;
    margin-right: 10px !important;
    flex-shrink: 0 !important;
    transition: background 0.2s ease, transform 0.2s ease !important;
}

.np-menu-subcat-dropdown li a:hover {
    background: #f1f5f9 !important; /* Solid color */
    color: #00AEEF !important;
    padding-left: 15px !important;
}

.np-menu-subcat-dropdown li a:hover .np-subcat-bullet {
    background: #00AEEF !important;
    transform: scale(1.3) !important;
}

/* 3rd-level Nested Flyout */
.np-menu-subcat-dropdown li.has-nested-dropdown {
    position: relative !important;
}

.np-menu-subsubcat-dropdown {
    position: absolute !important;
    left: 100% !important;
    top: -4px !important;
    min-width: 230px !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    box-shadow: 0 12px 30px rgba(13, 47, 122, 0.12) !important;
    padding: 8px 6px !important;
    margin-left: 6px !important;
    z-index: 1070 !important;
    list-style: none !important;
    display: none;
}

.np-menu-subcat-dropdown li.has-nested-dropdown:hover > .np-menu-subsubcat-dropdown {
    display: block !important;
}

.np-menu-subsubcat-dropdown li {
    list-style: none !important;
    margin: 2px 0 !important;
}

.np-menu-subsubcat-dropdown li a {
    display: flex !important;
    align-items: center !important;
    padding: 6px 12px !important;
    border-radius: 8px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: #475569 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

.np-menu-subsubcat-dropdown li a:hover {
    background: #f1f5f9 !important;
    color: #00AEEF !important;
    padding-left: 14px !important;
}

/* Category Footer Button */
.np-menu-cat-footer {
    padding: 8px 12px 4px 12px !important;
    border-top: 1px solid #f1f5f9 !important;
    margin-top: 4px !important;
}

.np-menu-cat-footer .button.style3 {
    width: 100% !important;
    padding: 8px 14px !important;
    border-radius: 8px !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    background: #f8fafc !important; /* Solid color */
    color: #0d2f7a !important;
    border: 1px solid #e2e8f0 !important;
    transition: all 0.2s ease !important;
}

.np-menu-cat-footer .button.style3:hover {
    background: #0d2f7a !important; /* Solid color */
    color: #ffffff !important;
    border-color: #0d2f7a !important;
}

/* ========================================================
   NATURA PRO - TOP NAVIGATION MENU BEAUTIFICATION
   ======================================================== */
.main-menu nav > ul {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.main-menu nav > ul > li {
    position: relative !important;
    list-style: none !important;
}

.main-menu nav > ul > li > a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    padding: 7px 14px !important;
    border-radius: 20px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    background: transparent !important;
}

.main-menu nav > ul > li > a:hover {
    background: #f1f5f9 !important; /* Single solid color, NO gradient */
    color: #00AEEF !important;
}

.main-menu nav > ul > li.active > a {
    background: #0d2f7a !important; /* Solid color */
    color: #ffffff !important;
}

.np-nav-item-icon {
    width: 15px !important;
    height: 15px !important;
    color: #0d2f7a !important;
    transition: color 0.2s ease !important;
}

.main-menu nav > ul > li > a:hover .np-nav-item-icon {
    color: #00AEEF !important;
}

.main-menu nav > ul > li.active > a .np-nav-item-icon {
    color: #ffffff !important;
}

/* Top Menu Dropdown (User/Submenu) */
.user-dropdown-menu {
    border-radius: 12px !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 10px 25px rgba(13, 47, 122, 0.08) !important;
    padding: 6px !important;
    background: #ffffff !important;
}

.user-dropdown-menu li a {
    padding: 7px 12px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #334155 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    transition: all 0.2s ease !important;
}

.user-dropdown-menu li a:hover {
    background: #f1f5f9 !important; /* Solid color */
    color: #00AEEF !important;
}

/* Header Action Icons (Cart, Wishlist, Track) */
.cart__menu {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    cursor: pointer !important;
}

.cart__menu .np-icon-cart {
    width: 22px !important;
    height: 22px !important;
    color: #0d2f7a !important;
    transition: color 0.2s ease, transform 0.2s ease !important;
}

.cart__menu:hover .np-icon-cart {
    color: #00AEEF !important;
    transform: scale(1.08) !important;
}

.wishlist__menu a .np-icon-heart {
    width: 20px !important;
    height: 20px !important;
    color: #0d2f7a !important;
    transition: color 0.2s ease, transform 0.2s ease !important;
}

.wishlist__menu:hover a .np-icon-heart {
    color: #ef4444 !important;
    transform: scale(1.1) !important;
}

.header-action-list li a .np-icon-pin {
    width: 19px !important;
    height: 19px !important;
    color: #0d2f7a !important;
    transition: color 0.2s ease !important;
}

.header-action-list li a:hover .np-icon-pin {
    color: #00AEEF !important;
}

/* --- Alerts & Notifications System Fix --- */
.alert:not(.alert-custom) {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    z-index: auto !important;
}

.alert.alert-custom {
    position: fixed !important;
    bottom: 30px !important;
    left: 30px !important;
    z-index: 999999 !important;
    min-width: 280px !important;
    max-width: 420px !important;
    padding: 14px 20px !important;
    border-radius: 12px !important;
    border: none !important;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.22) !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.alert.alert-custom .message {
    flex: 1;
    text-align: left;
    padding-right: 12px;
}

.alert.alert-custom .close {
    opacity: 0.8 !important;
    color: #ffffff !important;
    text-shadow: none !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    cursor: pointer !important;
    transition: opacity 0.2s ease !important;
}

.alert.alert-custom .close:hover {
    opacity: 1 !important;
}

.alert.alert-custom.alert-danger {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
}

.alert.alert-custom.alert-success {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
}

.alert.alert-custom.alert-warning {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
}

/* ========================================================
   NATURA PRO — GLOBAL MOBILE RESPONSIVENESS (FLUTTER STYLE)
   ======================================================== */
@media (max-width: 991.98px) {
    /* 1. Header & Menu desktop cachés sur mobile/tablette */
    .header-bottom,
    #main-menu,
    .main-header-inner {
        display: none !important;
    }

    /* 2. Bouton panier flottant de bureau caché sur mobile/tablette */
    .cart__menu.fixed {
        display: none !important;
    }

    /* 3. Pleine largeur pour le contenu quand la sidebar est en offcanvas */
    .np-shop-page-wrapper .col-lg-9.col-md-8 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }
}

@media (max-width: 767.98px) {
    /* 1. Cacher la newsletter sur mobile dans toutes les pages */
    .np-global-newsletter-section,
    .np-newsletter-banner,
    .np-footer-newsletter-col,
    .newsletter.np-newsletter-card,
    #newsletter {
        display: none !important;
    }

    /* 2. Boutons d'action produit : icône seule sans texte (nahi texte ajouter au panier) */
    .np-btn-pill-action span {
        display: none !important;
    }
    .np-btn-pill-action {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        max-width: 42px !important;
        border-radius: 50% !important;
        padding: 0 !important;
        margin: 0 auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: #ffffff !important;
        border: 1.5px solid #0d2f7a !important;
        box-shadow: 0 2px 8px rgba(13, 47, 122, 0.12) !important;
    }
    .np-btn-pill-action i {
        margin: 0 !important;
        font-size: 20px !important;
        color: #0d2f7a !important;
    }
    .np-btn-pill-action:hover,
    .np-btn-pill-action:active {
        background: #0d2f7a !important;
    }
    .np-btn-pill-action:hover i,
    .np-btn-pill-action:active i {
        color: #ffffff !important;
    }

    /* 3. Cartes produit en grille mobile (2 colonnes style Flutter) */
    .np-shop-prod-col {
        padding-left: 6px !important;
        padding-right: 6px !important;
        margin-bottom: 12px !important;
    }
    .np-modern-product-card {
        padding: 10px !important;
        border-radius: 18px !important;
        box-shadow: 0 2px 10px rgba(0,0,0,0.04) !important;
    }
    .np-modern-product-card .np-card-img-box {
        height: 140px !important;
        padding: 8px !important;
        border-radius: 14px !important;
    }
    .np-modern-product-card .np-card-img {
        max-height: 115px !important;
        max-width: 88% !important;
    }
    .np-card-title {
        font-size: 0.82rem !important;
        line-height: 1.25 !important;
        min-height: 2.5em !important;
        margin-bottom: 2px !important;
    }
    .np-card-rating {
        font-size: 0.70rem !important;
        padding: 1px 4px !important;
    }
    .np-card-rating .star-icon {
        font-size: 13px !important;
    }
    .np-card-price-main {
        font-size: 0.95rem !important;
    }
    .np-card-price-old {
        font-size: 0.72rem !important;
    }
    .np-card-tags-row {
        min-height: 20px !important;
        margin-bottom: 8px !important;
    }
    .np-card-tag-pill {
        font-size: 0.65rem !important;
        padding: 1px 6px !important;
    }

    /* 4. Boutons flottants au-dessus de la barre mobile de navigation */
    #whatsapp-btn,
    .whatsapp-btn,
    a[href*="wa.me"],
    .float-wa {
        bottom: 74px !important;
        z-index: 1040 !important;
    }
    #scrolltotop {
        bottom: 130px !important;
        z-index: 1040 !important;
    }

    /* 5. Carrousel des catégories en haut de la boutique */
    .np-shop-top-categories .card {
        padding: 14px !important;
        border-radius: 16px !important;
    }
    .np-top-cat-scroll {
        display: flex !important;
        gap: 10px !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
    }
    .np-top-cat-scroll::-webkit-scrollbar {
        display: none !important;
    }
    .np-top-cat-card {
        width: 105px !important;
        padding: 6px !important;
    }
    .np-top-cat-img-wrap {
        width: 80px !important;
        height: 70px !important;
        padding: 6px !important;
    }
    .np-top-cat-img-wrap img {
        max-height: 56px !important;
    }
    .np-top-cat-name {
        font-size: 0.75rem !important;
    }
}

/* ========================================================
   NATURA PRO — MOBILE LEFT SIDEBAR DRAWER (FLUTTER APP STYLE)
   ======================================================== */
.hamburger {
    display: none !important;
}

.np-mobile-drawer-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 10500;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.np-mobile-drawer-backdrop.show {
    opacity: 1;
    visibility: visible;
}

.np-mobile-drawer {
    position: fixed;
    top: 0;
    left: 0;
    width: 320px;
    max-width: 86vw;
    height: 100vh;
    height: 100dvh;
    background: #ffffff;
    z-index: 10600;
    transform: translateX(-105%);
    transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.np-mobile-drawer.open {
    transform: translateX(0);
}

body.np-drawer-open {
    overflow: hidden !important;
}

/* Header */
.np-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #f1f5f9;
    background: #ffffff;
}

.np-drawer-brand img {
    max-height: 34px;
    width: auto;
}

.np-drawer-close-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #f1f5f9;
    border: none;
    color: #475569;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.np-drawer-close-btn:hover,
.np-drawer-close-btn:active {
    background: #0d2f7a;
    color: #ffffff;
}

/* User banner */
.np-drawer-user-banner {
    padding: 14px 20px;
    background: #f8fafc;
    border-bottom: 1px solid #edf2f7;
}

/* Tabs: Menu / Catégories */
.np-drawer-tabs {
    display: flex;
    background: #f1f5f9;
    padding: 4px;
    margin: 12px 16px 8px;
    border-radius: 12px;
}

.np-drawer-tab-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 12px;
    border: none;
    background: transparent;
    color: #64748b;
    font-size: 13px;
    font-weight: 700;
    border-radius: 9px;
    transition: all 0.2s ease;
    cursor: pointer;
}

.np-drawer-tab-btn span.material-symbols-outlined {
    font-size: 18px;
}

.np-drawer-tab-btn.active {
    background: #ffffff;
    color: #0d2f7a;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* Body */
.np-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 8px 16px 20px;
    -webkit-overflow-scrolling: touch;
}

.np-drawer-tab-pane {
    display: none;
}

.np-drawer-tab-pane.active {
    display: block;
    animation: npFadeIn 0.2s ease;
}

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

/* Nav list */
.np-drawer-nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.np-drawer-nav-list li {
    margin-bottom: 4px;
}

.np-drawer-nav-list li a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    border-radius: 12px;
    color: #334155;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.15s ease;
}

.np-drawer-nav-list li a:hover,
.np-drawer-nav-list li a.active {
    background: #eff6ff;
    color: #0d2f7a;
}

.np-drawer-nav-list li a .nav-icon {
    font-size: 21px;
    color: #00AEEF;
    flex-shrink: 0;
}

.np-drawer-nav-list li a:hover .nav-icon,
.np-drawer-nav-list li a.active .nav-icon {
    color: #0d2f7a;
}

.np-drawer-nav-list .np-nav-divider {
    height: 1px;
    background: #f1f5f9;
    margin: 8px 0;
}

/* Cat list */
.np-drawer-cat-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.np-drawer-cat-item {
    border-bottom: 1px solid #f8fafc;
}

.np-drawer-cat-link-wrap {
    padding: 8px 4px;
}

.np-drawer-cat-link-wrap a {
    color: #1e293b;
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
}

.np-drawer-cat-link-wrap a:hover {
    color: #0d2f7a;
}

.np-drawer-cat-toggle {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: #64748b;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.np-drawer-cat-toggle:hover {
    background: #e2e8f0;
    color: #0d2f7a;
}

.np-drawer-cat-toggle span {
    transition: transform 0.2s ease;
    font-size: 20px;
}

.np-drawer-cat-toggle.open span {
    transform: rotate(180deg);
}

.np-drawer-subcat-list {
    list-style: none;
    padding-left: 36px;
    margin: 0 0 8px;
    border-left: 2px solid #e2e8f0;
}

.np-drawer-subcat-list li a {
    display: block;
    padding: 6px 0;
    color: #64748b;
    font-size: 12.5px;
    font-weight: 500;
    text-decoration: none;
}

.np-drawer-subcat-list li a:hover {
    color: #0d2f7a;
}

/* Drawer footer */
.np-drawer-footer {
    display: flex;
    gap: 8px;
    padding: 14px 16px;
    border-top: 1px solid #f1f5f9;
    background: #ffffff;
}

.np-drawer-footer-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px;
    border-radius: 12px;
    font-size: 12.5px;
    font-weight: 700;
    text-decoration: none;
    background: #f1f5f9;
    color: #334155;
    transition: all 0.2s ease;
}

.np-drawer-footer-btn span {
    font-size: 18px;
}

.np-drawer-footer-btn.np-drawer-wa-btn {
    background: #25D366;
    color: #ffffff;
}

.np-drawer-footer-btn:hover {
    opacity: 0.92;
    text-decoration: none;
}

/* ========================================================
   NATURA PRO — MOBILE HEADER (Menu à gauche, Logo centré, Profil à droite)
   ======================================================== */
@media (max-width: 991.98px) {
    #header-middle {
        padding: 8px 14px !important;
        min-height: 56px !important;
        background: #ffffff !important;
        border-bottom: 1px solid #eef2f6 !important;
        position: relative !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03) !important;
    }
    
    #header-middle .container-fluid {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    #header-middle .d-flex.justify-content-between {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        position: relative !important;
        min-height: 40px !important;
    }

    #header-middle .category__menu {
        flex: 0 0 40px !important;
        width: 40px !important;
        height: 40px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        z-index: 5;
    }

    #header-middle .category__menu i {
        font-size: 26px !important;
        color: #0d2f7a !important;
    }

    /* Logo parfaitement centré */
    #header-middle .logo {
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: auto !important;
        max-width: 150px !important;
        padding: 0 !important;
        margin: 0 !important;
        text-align: center !important;
        z-index: 2;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    #header-middle .logo a {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    #header-middle .logo img {
        max-height: 38px !important;
        max-width: 140px !important;
        width: auto !important;
        object-fit: contain !important;
    }

    #header-middle .header-search {
        display: none !important;
    }

    #header-middle .offset-menu-wrapper {
        flex: 0 0 40px !important;
        width: 40px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        margin: 0 !important;
        padding: 0 !important;
        z-index: 5;
        list-style: none !important;
    }

    /* Masquer les réseaux sociaux sur mobile */
    #header-middle .top-social,
    .top-social {
        display: none !important;
    }

    /* Bouton profil / connexion utilisateur sur mobile */
    #header-middle .np-user-menu-item {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .np-mobile-user-link {
        width: 36px !important;
        height: 36px !important;
        border-radius: 50% !important;
        background: #f1f5f9 !important;
        border: 1.5px solid #e2e8f0 !important;
        color: #0d2f7a !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-decoration: none !important;
        transition: all 0.2s ease !important;
    }

    .np-mobile-user-link:hover,
    .np-mobile-user-link:active {
        background: #0d2f7a !important;
        color: #ffffff !important;
        border-color: #0d2f7a !important;
    }

    .np-mobile-user-link i {
        font-size: 20px !important;
        color: inherit !important;
        line-height: 1 !important;
    }
}

/* ========================================================
   NATURA PRO — MODERN SIDE CART DRAWER (Desktop & Mobile)
   ======================================================== */
.shopping__cart.np-modern-cart-drawer {
    width: 380px !important;
    background: #ffffff !important;
    box-shadow: -8px 0 35px rgba(13, 47, 122, 0.14) !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100vh !important;
    max-height: 100vh !important;
    padding: 0 !important;
    border: none !important;
    z-index: 999999 !important;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease !important;
}

@media (max-width: 575.98px) {
    .shopping__cart.np-modern-cart-drawer {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* 1. Header du Panier Latéral */
.shopping__cart__header.np-drawer-hdr {
    background: #ffffff !important;
    border-bottom: 1px solid #eef2f6 !important;
    padding: 16px 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-shrink: 0 !important;
    min-height: 64px !important;
}

.np-cart-hdr-icon {
    font-size: 24px !important;
    color: #0d2f7a !important;
}

.np-cart-hdr-title {
    color: #0d2f7a !important;
    font-size: 1.1rem !important;
    letter-spacing: -0.2px;
}

.np-cart-count-badge {
    background: #eff6ff !important;
    color: #0d2f7a !important;
    border: 1px solid #bfdbfe !important;
    border-radius: 50px !important;
    font-size: 0.76rem !important;
    font-weight: 700 !important;
    padding: 2px 8px !important;
}

.np-cart-close-btn {
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    background: #f1f5f9 !important;
    border: none !important;
    color: #64748b !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    position: static !important;
    padding: 0 !important;
}

.np-cart-close-btn:hover {
    background: #fee2e2 !important;
    color: #ef4444 !important;
    transform: rotate(90deg) !important;
}

.np-cart-close-btn span {
    font-size: 18px !important;
}

/* 2. Corps du Panier Latéral */
.shopping__cart__inner.np-drawer-body {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    padding: 14px 16px !important;
    height: auto !important;
    scrollbar-width: thin !important;
    scrollbar-color: #cbd5e1 transparent !important;
}

.shp__cart__wrap {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

/* 3. Carte Article dans le Panier */
.shp__single__product.np-modern-cart-item {
    background: #f8fafc !important;
    border: 1px solid #eef2f6 !important;
    border-radius: 14px !important;
    padding: 10px 12px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 0 !important;
    transition: all 0.25s ease !important;
    position: relative !important;
}

.shp__single__product.np-modern-cart-item:hover {
    background: #ffffff !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 4px 14px rgba(13, 47, 122, 0.06) !important;
    transform: translateY(-1px) !important;
}

.np-cart-thumb {
    width: 62px !important;
    height: 62px !important;
    flex: 0 0 62px !important;
    background: #ffffff !important;
    border-radius: 10px !important;
    border: 1px solid #e2e8f0 !important;
    padding: 4px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
}

.np-cart-thumb img {
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
}

.np-cart-item-details {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}

.np-cart-item-title {
    font-size: 0.84rem !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;
    margin-bottom: 3px !important;
}

.np-cart-item-title a {
    color: #1e293b !important;
    text-decoration: none !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

.np-cart-item-title a:hover {
    color: #0d2f7a !important;
}

.np-cart-item-qty-price {
    font-size: 0.75rem !important;
    color: #64748b !important;
    font-weight: 600 !important;
}

.np-cart-item-line-total {
    font-size: 0.90rem !important;
    font-weight: 800 !important;
    color: #0d2f7a !important;
    letter-spacing: -0.2px !important;
}

.np-cart-trash-btn {
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    background: transparent !important;
    border: none !important;
    color: #94a3b8 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    padding: 0 !important;
    transition: all 0.2s ease !important;
}

.np-cart-trash-btn:hover {
    background: #fee2e2 !important;
    color: #ef4444 !important;
}

.np-cart-trash-btn span {
    font-size: 17px !important;
}

/* 4. Footer du Panier Latéral */
.shopping__cart__footer.np-drawer-ftr {
    background: #ffffff !important;
    border-top: 1px solid #eef2f6 !important;
    padding: 16px 20px 20px !important;
    box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.04) !important;
    position: static !important;
    width: 100% !important;
    flex-shrink: 0 !important;
    z-index: 10 !important;
}

.np-drawer-shipping-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: #f0fdf4 !important;
    color: #16a34a !important;
    border: 1px solid #bbf7d0 !important;
    border-radius: 50px !important;
    padding: 4px 12px !important;
    font-size: 0.76rem !important;
    font-weight: 700 !important;
    width: 100% !important;
    justify-content: center !important;
}

.np-drawer-shipping-badge span.material-symbols-outlined {
    font-size: 16px !important;
}

.np-drawer-total-row {
    font-size: 0.92rem !important;
}

.np-drawer-total-price {
    font-size: 1.28rem !important;
    font-weight: 800 !important;
    color: #0d2f7a !important;
    letter-spacing: -0.3px !important;
}

.np-btn-drawer-checkout {
    background: #0d2f7a !important;
    color: #ffffff !important;
    border: 1.5px solid #0d2f7a !important;
    border-radius: 50px !important;
    padding: 11px 16px !important;
    font-size: 0.92rem !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    box-shadow: 0 4px 14px rgba(13, 47, 122, 0.22) !important;
    transition: all 0.25s ease !important;
}

.np-btn-drawer-checkout:hover {
    background: #092055 !important;
    border-color: #092055 !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 18px rgba(13, 47, 122, 0.32) !important;
}

.np-btn-drawer-checkout span.material-symbols-outlined {
    font-size: 18px !important;
    transition: transform 0.2s ease !important;
}

.np-btn-drawer-checkout:hover span.material-symbols-outlined {
    transform: translateX(3px) !important;
}

.np-btn-drawer-viewcart {
    background: #f8fafc !important;
    color: #0d2f7a !important;
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 50px !important;
    padding: 9px 16px !important;
    font-size: 0.86rem !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    transition: all 0.25s ease !important;
}

.np-btn-drawer-viewcart:hover {
    background: #0d2f7a !important;
    color: #ffffff !important;
    border-color: #0d2f7a !important;
}

.np-empty-cart-box {
    background: #ffffff !important;
    border-radius: 16px !important;
}

.np-empty-cart-icon {
    width: 72px !important;
    height: 72px !important;
    border-radius: 50% !important;
    background: #eff6ff !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 2px dashed #bfdbfe !important;
}