/* ================================
   PANDIYAAS - Horizontal Categories
   ================================ */

.whci-cat-bar {
    width: 100%;
background: radial-gradient(
    circle,
    #ff9800 0%,
    #e84a18 20%,
    #8b1e4f 45%,
    #4b176d 70%,
    #1b0b3a 100%
);
    border-bottom: 1px solid #eee;
    overflow: hidden;
}

.whci-cat-scroll {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 10px 8px;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.whci-cat-scroll::-webkit-scrollbar {
    display: none;
}

/* Individual horizontal category card */
.whci-cat {
    flex: 0 0 76px;
    width: 76px;
    min-width: 76px;
    height: 88px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 3px;
    padding: 5px 4px;

    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 12px;

    white-space: normal;
    overflow: hidden;
    cursor: pointer;

    box-shadow: 0 1px 4px rgba(0,0,0,.06);
    transition: .2s ease;
}

/* Active / All category */
.whci-cat.active {
    background: linear-gradient(180deg, #ff9800, #ff7100);
    border-color: #ff7100;
    color: #fff;
    box-shadow: 0 3px 8px rgba(255,126,0,.25);
}

/* Category image */
.whci-cat img {
    width: 48px;
    height: 48px;
    min-width: 48px;
    object-fit: cover;
    border-radius: 10px;
    display: block;
}

/* All category icon */
.whci-cat-dot {
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* Four-square icon for All */
.whci-cat-dot::before {
    content: "▪ ▪\A▪ ▪";
    white-space: pre;
    text-align: center;
    font-size: 19px;
    line-height: 14px;
    color: #fff;
}

/* Category name */
.whci-cat-name {
    width: 100%;
    max-width: 72px;

    font-size: 11px;
    line-height: 13px;
    font-weight: 600;
    text-align: center;

    white-space: normal;
    overflow: hidden;

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

/* Make CM number more prominent if contained in category name */
.whci-cat-name strong {
    font-size: 12px;
}

/* Mobile sizing - matches the reference image */
@media (max-width: 480px) {

    .whci-cat-scroll {
        gap: 8px;
        padding: 8px 7px;
    }

    .whci-cat {
        flex: 0 0 62px;
        width: 62px;
        min-width: 62px;
        height: 82px;
        border-radius: 10px;
        padding: 4px 3px;
    }

    .whci-cat img {
        width: 42px;
        height: 42px;
        border-radius: 8px;
    }

    .whci-cat-dot {
        width: 38px;
        height: 38px;
    }

    .whci-cat-dot::before {
        font-size: 17px;
        line-height: 12px;
    }

    .whci-cat-name {
        font-size: 10px;
        line-height: 12px;
        max-width: 58px;
    }
}
.whci-search-wrap > p:empty {
    display: none !important;
}

.whci-search-wrap::after {
    content: none !important;
    display: none !important;
}
/* Product list */
.whci-product-list{padding:.75rem}
.whci-groups{display:flex;flex-direction:column;gap:1rem}
.whci-group{border:1px solid #eee;border-radius:14px;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.03)}
.whci-group-header{position:sticky;top:1px;    background: linear-gradient(
        135deg,
        #24104f 0%,
        #4b176d 35%,
        #b52b42 65%,
        #ff7a00 100%
    );border-bottom:1px solid #eee;padding:.5rem .75rem;color:white;font-weight:700;border-top-left-radius:14px;border-top-right-radius:14px}
.whci-rows{display:flex;flex-direction:column;gap:.5rem;padding:.5rem}

/* Row */
.whci-row{display:grid;grid-template-columns:64px 1fr 96px;align-items:center;gap:.5rem;border:1px solid #eee;border-radius:12px;padding:.5rem;background:#fff}
.whci-thumb img{width:64px;height:64px;object-fit:cover;border-radius:8px}
.whci-title{font-weight:600;font-size:.95rem;line-height:1.2;color:black}
.whci-price{font-size:.9rem;opacity:.9;margin-top:.25rem;color:black}
.whci-cta{display:flex;justify-content:flex-end}
.whci-add-btn{border:1px solid #111;background:#111;color:#fff;border-radius:10px;padding:.5rem .75rem;font-weight:600}
.whci-qty{border:1px solid #111;border-radius:10px;padding:.45rem .5rem;min-width:80px}
.whci-empty{padding:1rem;text-align:center;color:#666}

@media (max-width:480px){
  .whci-row{grid-template-columns:56px 1fr 88px}
  .whci-thumb img{width:56px;height:56px}
}