/* ============= TOP CATEGORY START ============= */

/* ✅ ONLY target rows that contain category blocks */
.ps-container .row:has(.ps-block--category) {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

/* ✅ DESKTOP: 9 items per row */
.ps-container .row:has(.ps-block--category) > [class*="col-"] {
    flex: 0 0 calc(100% / 9) !important;
    max-width: calc(100% / 9) !important;
    padding: 5px !important;
}

/* ✅ CATEGORY CARD STYLE */
.ps-container .ps-block--category {
    border: none !important;
    box-shadow: none !important;
    padding: 6px !important;
    text-align: center;
    transition: transform 0.25s ease;
}

/* ✅ ICON STYLE */
.ps-container .ps-block--category img {
    width: 55px !important;
    height: 55px !important;
    max-width: 55px !important;
    object-fit: contain !important;
    border-radius: 50%;
    background: #f1f1f1;
    padding: 6px;
    display: block;
    margin: 0 auto;
}

/* ✅ TEXT */
.ps-container .ps-block--category p {
    font-size: 12px !important;
    margin-top: 5px;
    text-align: center;
}

/* ✅ HOVER */
.ps-container .ps-block--category:hover {
    transform: scale(1.08);
}

/* ✅ TABLET: 5 per row */
@media (max-width: 991px) {
    .ps-container .row:has(.ps-block--category) > [class*="col-"] {
        flex: 0 0 calc(100% / 5) !important;
        max-width: calc(100% / 5) !important;
    }
}

/* ✅ MOBILE: 3 per row */
@media (max-width: 768px) {
    .ps-container .row:has(.ps-block--category) > [class*="col-"] {
        flex: 0 0 calc(100% / 3) !important;
        max-width: calc(100% / 3) !important;
    }
}

/* ============= TOP CATEGORY END ============= */
/* HEADER BAR */
.top-header-bar {
    display: flex;
    align-items: center;
    background: #000;
    color: #fff;
    height: 32px;
    font-size: 12px;
    padding: 0 6px;
}

/* LEFT */
.header-left {
    flex: 0 0 auto;
}

.header-left a {
    color: #fff;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

/* CENTER (IMPORTANT FIX) */
.header-middle {
    flex: 1;
    position: relative;
    height: 32px;
    overflow: hidden;

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

    text-align: center;
    padding: 0 5px; /* small space */
}

/* NEWS BOX */
.news-box {
    position: relative;
    width: 100%;
    height: 100%;
}

/* NEWS ITEM */
.news-item {
    position: absolute;
    inset: 0;

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

    opacity: 0;

    /* ✅ IMPORTANT MOBILE FIX */
    text-align: center;
    white-space: normal;      /* ✅ allow wrap */
    overflow: hidden;
    text-overflow: ellipsis;

    padding: 0 5px;
    line-height: 1.2;
}

/* ACTIVE */
.news-item.active {
    opacity: 1;
}

/* RIGHT */
.header-right {
    flex: 0 0 auto;
    display: flex;
    gap: 8px;
}

.header-right a {
    color: #fff;
    font-size: 12px;
}

/* HOVER */
.header-right a:hover,
.header-left a:hover {
    color: #ffcc00;
}

/* ✅ ✅ MOBILE OPTIMIZATION */
@media (max-width: 768px) {

    .top-header-bar {
        height: 30px;
        font-size: 11px;
    }

    .header-left a {
        font-size: 11px;
    }

    .header-right {
        gap: 6px;
    }

    .news-item {
        font-size: 11px;
        padding: 0 3px;
    }
}



/* Hide Sell with us and Track Order from main menu */
.navigation__extra {
    display: none !important;
}

/*Make product images same size */
.ps-product__thumbnail img {
    height: 180px;
    object-fit: contain;
}


/* */

/*  */

/* */

/* Header call box */
.custom-header-call {
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.2;
    white-space: nowrap;
    margin-left: 18px;
    margin-right: 18px;
    padding-left: 18px;
    border-left: 1px solid #E5E7EB;
}

/* Small text */
.custom-header-call span {
    font-size: 12px;
    color: #6B7280;
    font-weight: 500;
}

/* Phone number */
.custom-header-call strong {
    font-size: 16px;
    color: #111827;
    font-weight: 700;
}

/* Optional phone icon before number */
.custom-header-call strong::before {
    content: "☎ ";
    color: #2563EB;
}

/* Hide on mobile/tablet */
@media (max-width: 991px) {
    .custom-header-call {
        display: none !important;
    }
}

/*  */