:root {
  --theme-color: #0b4c0e;
  --theme-color-rgb: 13, 164, 135;

  --theme-color1: #00ff0d;
  --theme-color1-rgb: 14, 148, 122;

  --header-color: #fff;
  --header-text-color: #333;

  --theme-color2: linear-gradient(
      90.56deg,
      var(--theme-color1) 8.46%,
      var(--theme-color) 62.97%
  );
}

.theme-color {
    color: var(--theme-color) !important;
}

.modern-theme-card,
.modern-theme-card * {
    box-sizing: border-box !important;
}

/* =========================================
   COLUMN
========================================= */

.modern-theme-card.itemsColumns {
    margin-top: 0px !important;
    padding: 12px !important;
}

/* =========================================
   MAIN CARD
========================================= */

.modern-theme-card .product-box-3 {
    position: relative !important;

    display: flex !important;
    flex-direction: column !important;

    width: 100% !important;
    height: 100% !important;

    background: #ffffff !important;

    border-radius: 20px !important;

    overflow: hidden !important;

    border: none !important;

    box-shadow:
        0 4px 10px rgba(0,0,0,0.04),
        0 20px 40px rgba(0,0,0,0.06) !important;

    transition: all 0.35s ease !important;
}

/* =========================================
   HOVER
========================================= */

.modern-theme-card .product-box-3:hover {
    transform: translateY(-6px) !important;

    box-shadow:
        0 15px 35px rgba(37,99,235,0.12),
        0 25px 50px rgba(0,0,0,0.10) !important;
}

/* =========================================
   HEADER
========================================= */

.modern-theme-card .product-header {
    position: relative !important;

    padding: 12px !important;

    background:
        linear-gradient(
            180deg,
            #f8fbff 0%,
            #f3f7ff 100%
        ) !important;
}

/* =========================================
   IMAGE AREA
========================================= */

.modern-theme-card .collection-card-image {
    position: relative !important;

    width: 100% !important;
    height: 210px !important;

    border-radius: 18px !important;

    overflow: hidden !important;

    background:
        radial-gradient(circle at top, #ffffff 0%, #f8fafc 100%) !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    border: 1px solid rgba(255,255,255,0.7) !important;

    transition: all 0.35s ease !important;
}

/* GLOSS EFFECT */

.modern-theme-card .collection-card-image::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(255,255,255,0.18),
            transparent
        );

    pointer-events: none;
}

/* =========================================
   IMAGE
========================================= */

.modern-theme-card .collection-card-image img {
    width: 100% !important;
    height: 100% !important;

    object-fit: contain !important;

    padding: 16px !important;

    transition: transform 0.4s ease !important;
}

.modern-theme-card .product-box-3:hover .collection-card-image img {
    transform: scale(1.08) !important;
}

/* =========================================
   STOCK BADGE
========================================= */

.modern-theme-card .vt-search-stock-badge {
    position: absolute !important;

    top: 10px !important;
    left: 10px !important;

    z-index: 5 !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: fit-content !important;
    max-width: 120px !important;

    padding: 5px 10px !important;

    border-radius: 30px !important;

    font-size: 10px !important;
    font-weight: 700 !important;

    line-height: 1 !important;
    white-space: nowrap !important;

    backdrop-filter: blur(10px) !important;

    border: 1px solid rgba(255,255,255,0.7) !important;

    box-shadow:
        0 4px 10px rgba(0,0,0,0.08) !important;
}

.modern-theme-card .vt-search-stock-badge::before {
    content: "";

    width: 6px;
    height: 6px;

    border-radius: 50%;

    margin-right: 6px;

    background: currentColor;
}

.modern-theme-card .in-stock {
    background: rgba(220,252,231,0.92) !important;
    color: #15803d !important;
}

.modern-theme-card .out-of-stock {
    background: rgba(254,226,226,0.92) !important;
    color: #b91c1c !important;
}

/* =========================================
   SALE TAG
========================================= */

.modern-theme-card .sale-tag {
    position: absolute !important;

    top: 12px !important;
    left: 12px !important;

    width: 58px !important;

    z-index: 5 !important;
}

/* =========================================
   VIEW BUTTON
========================================= */

.modern-theme-card .product-option {
    position: absolute !important;

    bottom: 14px !important;
    right: 14px !important;

    z-index: 10 !important;

    list-style: none !important;
}

.modern-theme-card .product-option li a {
    width: 42px !important;
    height: 42px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    border-radius: 50% !important;

    background: rgba(255,255,255,0.95) !important;

    color: #111827 !important;

    text-decoration: none !important;

    box-shadow: 0 6px 16px rgba(0,0,0,0.10) !important;

    transition: all 0.25s ease !important;
}

.modern-theme-card .product-option li a:hover {
    background: var(--theme-color) !important;
    color: #ffffff !important;

    transform: scale(1.08) !important;
}

.modern-theme-card .product-option li a:hover i {
    color: #ffffff !important;
}

.modern-theme-card .view__item {
    margin-bottom: 2px !important;
}

/* =========================================
   BODY
========================================= */

.modern-theme-card .product-footer {
    display: flex !important;
    flex-direction: column !important;

    flex-grow: 1 !important;

    padding: 10px 10px 12px 10px !important;
}

/* =========================================
   ROW
========================================= */

.modern-theme-card .itemCodeAndCaseQtyContainer {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    gap: 12px !important;

    margin-bottom: 10px !important;
}

/* =========================================
   SMALL TEXT
========================================= */

.modern-theme-card .item-code,
.modern-theme-card .dynamic-font-detail,
.modern-theme-card .price-per-uom-and-stock {
    font-size: 11px !important;
    font-weight: 700 !important;

    color: #64748b !important;

    line-height: 1.4 !important;
}

/* =========================================
   PRODUCT NAME
========================================= */

.modern-theme-card .name {
    font-size: 17px !important;
    font-weight: 800 !important;

    color: #0f172a !important;

    line-height: 1.45 !important;

    margin: 6px 0 4px !important;

    min-height: 50px !important;

    overflow: hidden !important;

    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
}

/* =========================================
   PRICE
========================================= */

.modern-theme-card .price-cart {
    font-size: 30px !important;
    font-weight: 900 !important;

    color: var(--theme-color) !important;

    line-height: 1 !important;
}

.modern-theme-card .uomStyle {
    font-size: 14px !important;
    font-weight: 700 !important;
}

/* =========================================
   SMART SAVER
========================================= */

.modern-theme-card .smartSaver {
    text-align: right !important;

    color: #059669 !important;

    font-size: 11px !important;
    font-weight: 800 !important;
}

.modern-theme-card .smartSaverPrice {
    font-size: 18px !important;
    font-weight: 900 !important;
}

/* =========================================
   ADD TO CART
========================================= */

.modern-theme-card .add-to-cart-box {
    margin-top: auto !important;
    padding-top: 16px !important;
}

/* BUTTON */

.modern-theme-card .btn-add-cart {
    width: 100% !important;
    height: 48px !important;

    border: none !important;

    border-radius: 14px !important;

    background:
        linear-gradient(
            135deg,
            var(--theme-color),
            var(--theme-color1)
        ) !important;

    color: #ffffff !important;

    font-size: 14px !important;
    font-weight: 800 !important;

    transition: all 0.25s ease !important;
}

.modern-theme-card .btn-add-cart:hover {
    transform: translateY(-2px) !important;

    box-shadow: 0 12px 24px rgba(37,99,235,0.30) !important;
}

/* =========================================
   QTY AREA
========================================= */

.modern-theme-card .input-group {
    display: flex !important;
    align-items: center !important;

    gap: 10px !important;
}

/* PLUS MINUS */

.modern-theme-card .qty-btn {
    width: 40px !important;
    height: 40px !important;

    border: none !important;

    border-radius: 12px !important;

    background: #eff6ff !important;

    color: var(--theme-color) !important;

    transition: all 0.25s ease !important;
}

.modern-theme-card .qty-btn:hover {
    background: var(--theme-color) !important;
}

.modern-theme-card .qty-btn:hover i {
    color: #ffffff !important;
}

/* INPUT */

.modern-theme-card .qty-input {
    height: 40px !important;

    border-radius: 12px !important;

    border: 1px solid #dbeafe !important;

    text-align: center !important;

    font-weight: 700 !important;

    box-shadow: none !important;
}

/* =========================================
   LAST SOLD
========================================= */

.modern-theme-card .last-sold-line {
    margin-top: 16px !important;

    padding-top: 14px !important;

    border-top: 1px dashed #cbd5e1 !important;

    font-size: 12px !important;

    color: #64748b !important;

    line-height: 1.6 !important;
}

/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 1200px) {

    .modern-theme-card .collection-card-image {
        height: 200px !important;
    }

    .modern-theme-card .price-cart {
        font-size: 28px !important;
    }
}

@media (max-width: 768px) {

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

    .modern-theme-card .collection-card-image {
        height: 185px !important;
    }

    .modern-theme-card .product-footer {
        padding: 10px !important;
    }

    .modern-theme-card .name {
        font-size: 15px !important;
    }

    .modern-theme-card .price-cart {
        font-size: 24px !important;
    }

    .modern-theme-card .btn-add-cart {
        height: 45px !important;
    }
}

@media (max-width: 576px) {

    .modern-theme-card .collection-card-image {
        height: 165px !important;
    }

    .modern-theme-card .btn-add-cart {
        height: 44px !important;
    }

    .modern-theme-card .product-option li a {
        width: 38px !important;
        height: 38px !important;
    }
}




<!-- toolbar styling -->
 /* =========================================================
   MODERN SHOP TOOLBAR - FULLY ISOLATED
   NOTHING OLD WILL AFFECT THIS
========================================================= */

.shop-toolbar,
.shop-toolbar * {
    box-sizing: border-box !important;
}

/* MAIN TOOLBAR */

.shop-toolbar {
    position: relative !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    gap: 18px !important;

    width: 100% !important;

    padding: 16px 20px !important;

    margin-bottom: 24px !important;

    border-radius: 22px !important;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,0.98),
            rgba(248,250,252,0.98)
        ) !important;

    border: 1px solid rgba(226,232,240,0.8) !important;

    box-shadow:
        0 4px 12px rgba(15,23,42,0.04),
        0 18px 40px rgba(15,23,42,0.06) !important;

    backdrop-filter: blur(12px) !important;

    z-index: 2 !important;
}

/* =========================================================
   LEFT / CENTER / RIGHT
========================================================= */

.shop-toolbar .shop-toolbar-left,
.shop-toolbar .shop-toolbar-center,
.shop-toolbar .shop-toolbar-right {
    display: flex !important;
    align-items: center !important;

    gap: 14px !important;
}

.shop-toolbar .shop-toolbar-center {
    flex: 1 !important;
    justify-content: center !important;
}

/* =========================================================
   FILTER BUTTON
========================================================= */

.shop-toolbar .btn-open-filters {
    position: relative !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 10px !important;

    height: 48px !important;

    padding: 0 18px !important;

    border: none !important;

    border-radius: 14px !important;

    background:
        linear-gradient(
            135deg,
            var(--theme-color),
            var(--theme-color1)
        ) !important;

    color: #ffffff !important;

    font-size: 14px !important;
    font-weight: 700 !important;

    cursor: pointer !important;

    transition: all 0.25s ease !important;

    box-shadow:
        0 10px 24px rgba(37,99,235,0.18) !important;
}

.shop-toolbar .btn-open-filters:hover {
    transform: translateY(-2px) !important;

    box-shadow:
        0 14px 30px rgba(37,99,235,0.28) !important;
}

/* FILTER BADGE */

.shop-toolbar .filter-badge {
    position: absolute !important;

    top: -5px !important;
    right: -5px !important;

    min-width: 20px !important;
    height: 20px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 0 6px !important;

    border-radius: 999px !important;

    background: #ef4444 !important;

    color: #ffffff !important;

    font-size: 10px !important;
    font-weight: 800 !important;

    box-shadow:
        0 4px 10px rgba(239,68,68,0.35) !important;
}

/* =========================================================
   ITEMS COUNT
========================================================= */

.shop-toolbar .items-count {
    display: flex !important;
    align-items: center !important;

    height: 46px !important;

    padding: 0 16px !important;

    border-radius: 14px !important;

    background: #f8fafc !important;

    border: 1px solid #e2e8f0 !important;

    color: #475569 !important;

    font-size: 13px !important;
    font-weight: 700 !important;

    white-space: nowrap !important;
}

.shop-toolbar #shopItemsCount {
    margin-right: 5px !important;

    color: var(--theme-color) !important;

    font-size: 15px !important;
    font-weight: 800 !important;
}

/* =========================================================
   SEARCH
========================================================= */

.shop-toolbar .shop-search-wrapper {
    position: relative !important;

    width: 100% !important;
    max-width: 560px !important;
}

.shop-toolbar .shop-search-wrapper i.fa-search {
    position: absolute !important;

    top: 50% !important;
    left: 18px !important;

    transform: translateY(-50%) !important;

    color: #94a3b8 !important;

    font-size: 14px !important;

    pointer-events: none !important;
}

.shop-toolbar .shop-search-input {
    width: 100% !important;
    height: 52px !important;

    padding: 0 52px 0 48px !important;

    border-radius: 16px !important;

    border: 1px solid #e2e8f0 !important;

    background: #ffffff !important;

    color: #0f172a !important;

    font-size: 14px !important;
    font-weight: 600 !important;

    outline: none !important;

    transition: all 0.25s ease !important;

    box-shadow:
        0 3px 10px rgba(15,23,42,0.04) !important;
}

.shop-toolbar .shop-search-input:focus {
    border-color: var(--theme-color) !important;

    box-shadow:
        0 0 0 4px rgba(37,99,235,0.10) !important;
}

.shop-toolbar .shop-search-input::placeholder {
    color: #94a3b8 !important;
}

/* CLEAR BUTTON */

.shop-toolbar .shop-search-clear {
    position: absolute !important;

    top: 50% !important;
    right: 14px !important;

    transform: translateY(-50%) !important;

    width: 28px !important;
    height: 28px !important;

    border: none !important;

    border-radius: 50% !important;

    background: #f1f5f9 !important;

    color: #64748b !important;

    cursor: pointer !important;

    transition: all 0.2s ease !important;
}

.shop-toolbar .shop-search-clear:hover {
    background: #e2e8f0 !important;

    color: #0f172a !important;
}

/* =========================================================
   SORT BUTTON
========================================================= */

.shop-toolbar .btn-sort-dropdown,
.shop-toolbar .btn-catalog {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 8px !important;

    height: 48px !important;

    padding: 0 18px !important;

    border: 1px solid #e2e8f0 !important;

    border-radius: 14px !important;

    background: #ffffff !important;

    color: #334155 !important;

    font-size: 14px !important;
    font-weight: 700 !important;

    transition: all 0.25s ease !important;

    box-shadow:
        0 3px 10px rgba(15,23,42,0.04) !important;
}

.shop-toolbar .btn-sort-dropdown:hover,
.shop-toolbar .btn-catalog:hover {
    background: var(--theme-color) !important;

    border-color: var(--theme-color) !important;

    color: #ffffff !important;

    transform: translateY(-2px) !important;
}

.shop-toolbar .btn-sort-dropdown:hover i,
.shop-toolbar .btn-catalog:hover i {
    color: #ffffff !important;
}

/* =========================================================
   DROPDOWN MENU
========================================================= */

.shop-toolbar .dropdown-menu {
    border: none !important;

    border-radius: 16px !important;

    padding: 10px !important;

    background: #ffffff !important;

    box-shadow:
        0 20px 45px rgba(15,23,42,0.12) !important;
}

.shop-toolbar .dropdown-item {
    border-radius: 12px !important;

    padding: 11px 14px !important;

    font-size: 14px !important;
    font-weight: 600 !important;

    color: #334155 !important;

    transition: all 0.2s ease !important;
}

.shop-toolbar .dropdown-item:hover {
    background: rgba(37,99,235,0.08) !important;

    color: var(--theme-color) !important;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 992px) {

    .shop-toolbar {
        flex-wrap: wrap !important;
    }

    .shop-toolbar .shop-toolbar-center {
        order: 3 !important;

        width: 100% !important;
    }

    .shop-toolbar .shop-search-wrapper {
        max-width: 100% !important;
    }
}

@media (max-width: 768px) {

    .shop-toolbar {
        padding: 14px !important;

        gap: 12px !important;

        border-radius: 18px !important;
    }

    .shop-toolbar .shop-toolbar-left,
    .shop-toolbar .shop-toolbar-right {
        width: 100% !important;

        justify-content: space-between !important;
    }

    .shop-toolbar .btn-open-filters,
    .shop-toolbar .btn-sort-dropdown,
    .shop-toolbar .btn-catalog {
        height: 44px !important;

        border-radius: 12px !important;

        font-size: 13px !important;
    }

    .shop-toolbar .shop-search-input {
        height: 48px !important;

        border-radius: 14px !important;
    }
}

@media (max-width: 576px) {

    .shop-toolbar .items-count {
        display: none !important;
    }

    .shop-toolbar .btn-sort-dropdown span,
    .shop-toolbar .btn-open-filters span:not(.filter-badge) {
        display: none !important;
    }

    .shop-toolbar .btn-open-filters,
    .shop-toolbar .btn-sort-dropdown,
    .shop-toolbar .btn-catalog {
        width: 44px !important;

        padding: 0 !important;
    }
}