/**
 * NetStore Enterprise – Category Page CSS
 * Loaded only on catalog_category_view
 */

/* ══════════════════════════════════════════════════
   CATEGORY WRAPPER
══════════════════════════════════════════════════ */
.ns-category {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px 60px;
}

/* ══════════════════════════════════════════════════
   CATEGORY HERO — title + description
══════════════════════════════════════════════════ */
.ns-category__hero {
    padding: 28px 0 24px;
    border-bottom: 1px solid var(--ns-border);
    margin-bottom: 28px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.ns-category__title {
    font-size: 1.55rem;
    font-weight: 700;
    color: var(--ns-navy);
    letter-spacing: -0.02em;
    margin: 0;
}
.ns-category__desc {
    font-size: 0.875rem;
    color: var(--ns-text-muted);
    margin-top: 6px;
    line-height: 1.6;
}

/* ══════════════════════════════════════════════════
   TOOLBAR
══════════════════════════════════════════════════ */
.ns-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.ns-toolbar__count {
    font-size: 0.82rem;
    color: var(--ns-text-muted);
    font-weight: 500;
}
.ns-toolbar__count strong {
    color: var(--ns-navy);
    font-weight: 600;
}
.ns-toolbar__controls {
    display: flex;
    align-items: center;
    gap: 10px;
}
.ns-toolbar__label {
    font-size: 0.78rem;
    color: var(--ns-text-muted);
    white-space: nowrap;
}
.ns-toolbar__select {
    border: 1.5px solid var(--ns-border);
    border-radius: var(--ns-radius);
    padding: 7px 12px;
    font-family: var(--ns-font);
    font-size: 0.82rem;
    color: var(--ns-text);
    background: var(--ns-bg-white);
    cursor: pointer;
    outline: none;
    transition: border-color var(--ns-transition);
    -webkit-appearance: none;
    appearance: none;
    padding-right: 28px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none' stroke='%238a95a8' stroke-width='1.5'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
}
.ns-toolbar__select:focus {
    border-color: var(--ns-accent);
}

/* Limiter (per page) */
.ns-toolbar__limiter {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ══════════════════════════════════════════════════
   PRODUCT GRID
══════════════════════════════════════════════════ */
.ns-category__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

/* ══════════════════════════════════════════════════
   PAGINATION
══════════════════════════════════════════════════ */
.ns-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 40px;
    flex-wrap: wrap;
}
.ns-pagination__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1.5px solid var(--ns-border);
    border-radius: var(--ns-radius);
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--ns-text-muted);
    text-decoration: none;
    transition:
        border-color var(--ns-transition),
        color var(--ns-transition),
        background var(--ns-transition);
    cursor: pointer;
    background: var(--ns-bg-white);
}
.ns-pagination__item:hover {
    border-color: var(--ns-accent);
    color: var(--ns-accent);
}
.ns-pagination__item--active {
    background: var(--ns-accent);
    border-color: var(--ns-accent);
    color: white;
    font-weight: 600;
}
.ns-pagination__item--prev,
.ns-pagination__item--next {
    width: auto;
    padding: 0 12px;
    gap: 5px;
}

/* ══════════════════════════════════════════════════
   MAGENTO DEFAULT OVERRIDES
   Reset Luma styles còn sót trên category page
══════════════════════════════════════════════════ */

/* Remove sidebar */
.page-layout-1column .sidebar,
.sidebar-main,
.sidebar-additional {
    display: none !important;
}

/* Column main padding trên category — base.css đã set max-width global */
.catalog-category-view .column.main {
    padding: 0 24px !important;
}

/* Toolbar reset */
.toolbar-products {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 !important;
    margin-bottom: 20px !important;
    background: none !important;
    border: none !important;
    flex-wrap: wrap;
    gap: 12px;
}
.toolbar-products .toolbar-amount {
    font-family: var(--ns-font) !important;
    font-size: 0.82rem !important;
    color: var(--ns-text-muted) !important;
    order: 1;
}
.toolbar-products .toolbar-sorter {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    order: 2;
}
.toolbar-products .toolbar-sorter label {
    font-family: var(--ns-font) !important;
    font-size: 0.78rem !important;
    color: var(--ns-text-muted) !important;
    white-space: nowrap !important;
}
.toolbar-products .toolbar-sorter select,
.toolbar-products .sorter-options {
    border: 1.5px solid var(--ns-border) !important;
    border-radius: var(--ns-radius) !important;
    padding: 7px 28px 7px 12px !important;
    font-family: var(--ns-font) !important;
    font-size: 0.82rem !important;
    color: var(--ns-text) !important;
    background: var(--ns-bg-white) !important;
    outline: none !important;
    box-shadow: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none' stroke='%238a95a8' stroke-width='1.5'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    cursor: pointer !important;
    transition: border-color var(--ns-transition) !important;
}
.toolbar-products .sorter-options:focus {
    border-color: var(--ns-accent) !important;
}

/* Limiter */
.toolbar-products .limiter {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    order: 3;
}
.toolbar-products .limiter label,
.toolbar-products .limiter .limiter-text {
    font-family: var(--ns-font) !important;
    font-size: 0.78rem !important;
    color: var(--ns-text-muted) !important;
}
.toolbar-products .limiter select,
.toolbar-products .limiter-options {
    border: 1.5px solid var(--ns-border) !important;
    border-radius: var(--ns-radius) !important;
    padding: 7px 28px 7px 12px !important;
    font-family: var(--ns-font) !important;
    font-size: 0.82rem !important;
    color: var(--ns-text) !important;
    background: var(--ns-bg-white) !important;
    outline: none !important;
    box-shadow: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none' stroke='%238a95a8' stroke-width='1.5'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    cursor: pointer !important;
}

/* Product grid */
.products-grid .product-items {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 20px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.products-grid .product-item {
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    /* Đảm bảo card stretch full height */
    display: flex !important;
    flex-direction: column !important;
}
/* Card link chiếm full height của product-item */
.products-grid .product-item .ns-related__card {
    flex: 1 !important;
    height: 100% !important;
}
/* Ẩn tất cả Magento default product-item elements không cần */
.products-grid .product-item .product-item-info,
.products-grid .product-item .product-item-details,
.products-grid .product-item .product-item-actions,
.products-grid .product-item .price-box,
.products-grid .product-item .product-reviews-summary,
.products-grid .product-item .tocart,
.products-grid .product-item .towishlist,
.products-grid .product-item .tocompare {
    display: none !important;
}

/* Hide grid/list mode switcher, sorter direction button */
.modes,
.sorter-action {
    display: none !important;
}

/* Pagination */
.pages {
    margin-top: 36px !important;
    text-align: center !important;
}
.pages .items {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.pages .item a,
.pages .item span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 36px !important;
    height: 36px !important;
    padding: 0 10px !important;
    border: 1.5px solid var(--ns-border) !important;
    border-radius: var(--ns-radius) !important;
    font-family: var(--ns-font) !important;
    font-size: 0.82rem !important;
    font-weight: 500 !important;
    color: var(--ns-text-muted) !important;
    text-decoration: none !important;
    background: var(--ns-bg-white) !important;
    transition:
        border-color 0.2s,
        color 0.2s,
        background 0.2s !important;
    line-height: 1 !important;
}
.pages .item a:hover {
    border-color: var(--ns-accent) !important;
    color: var(--ns-accent) !important;
}
.pages .item.current span {
    background: var(--ns-accent) !important;
    border-color: var(--ns-accent) !important;
    color: white !important;
    font-weight: 600 !important;
}
.pages .action.previous,
.pages .action.next {
    font-size: 0 !important; /* ẩn text */
    position: relative;
}
.pages .action.previous::after {
    content: "←" !important;
    font-size: 0.82rem !important;
}
.pages .action.next::after {
    content: "→" !important;
    font-size: 0.82rem !important;
}

/* Category page title */
.page-title-wrapper.category-title .page-title {
    font-family: var(--ns-font) !important;
    font-size: 1.55rem !important;
    font-weight: 700 !important;
    color: var(--ns-navy) !important;
    letter-spacing: -0.02em !important;
}

/* ══════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    .products-grid .product-items {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}
@media (max-width: 768px) {
    .page-layout-1column .column.main {
        padding: 0 16px !important;
    }
    .toolbar-products {
        gap: 8px;
    }
}
@media (max-width: 600px) {
    .products-grid .product-items {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .toolbar-products .limiter {
        display: none !important;
    }
}
@media (max-width: 400px) {
    .products-grid .product-items {
        grid-template-columns: 1fr !important;
    }
}

/* ── Page title: hiện lại trên category page ── */
.catalog-category-view .page-main > .page-title-wrapper {
    display: block !important;
    padding: 24px 0 0;
}
.catalog-category-view .page-title-wrapper .page-title {
    font-family: var(--ns-font) !important;
    font-size: 1.55rem !important;
    font-weight: 700 !important;
    color: var(--ns-navy) !important;
    letter-spacing: -0.02em !important;
    margin: 0 0 20px !important;
}