/* ============================================================
    Trang tong san pham (/products/)
    Markup: archive-product.php + template-parts/product/category-index-list.php

    Huong thiet ke: "bang thong so" chu khong phai luoi the anh. Gan het
    danh muc chua co anh, nen trang doc nhu mot to spec sheet cua chinh may
    moc ho ban: ten nhom in hoa dam, ke chi ngang, so lieu can phai theo cot.
    Mau cam --accent chi xuat hien luc tro/di ban phim vao, khong to mau san.
    ============================================================ */

.product-index-shell {
    padding-bottom: 90px;
}

/* ---------- Dau trang ---------- */

.product-index-head {
    margin-bottom: 34px;
    padding-bottom: 22px;
    border-bottom: 1px solid rgba(16, 38, 58, 0.14);
}

.product-index-head h1 {
    font-size: clamp(2rem, 4.2vw, 3rem);
    font-weight: 800;
    letter-spacing: -0.01em;
}

/* ---------- Luoi cac nhom cap 1 ---------- */

/*
    Grid 2 cot, khong phai 3 va cung khong phai multi-column.

    3 cot: 4 nhom xep thanh 3 + 1, hang hai gan nhu trong.
    Multi-column: thuat toan can bang chieu cao xu ly kem khi cac the chenh
    lech nhieu - o kho tablet no don 1 the sang trai va 3 the sang phai.
    2 cot chia deu 2 + 2, chi con mot khoang hut nho duoi the ngan hon.

    align-items:start de the giu dung chieu cao noi dung, khong bi keo cao
    bang the ben canh.
*/
.product-index-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 24px;
}

@media (min-width: 720px) {
    .product-index-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.product-index-group {
    padding: 26px 26px 14px;
    border: 1px solid rgba(16, 38, 58, 0.12);
    border-radius: 18px;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.98),
        rgba(245, 248, 252, 0.98)
    );
    box-shadow: 0 16px 32px rgba(7, 19, 29, 0.06);
}

/* ---------- Dau the: ten nhom + tong so san pham ---------- */

.product-index-group-head {
    display: flex;
    align-items: baseline;
    gap: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(16, 38, 58, 0.14);
}

.product-index-group-head h2 {
    margin: 0;
    font-size: clamp(1.02rem, 1.4vw, 1.16rem);
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

/*
    Nhom chua co danh muc con thi <ul> khong duoc in ra, header thanh con
    duy nhat -> bo ke ngang de the khong trong nhu bi loi.
*/
.product-index-group-head:only-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.product-index-group:has(.product-index-group-head:only-child) {
    padding-bottom: 26px;
}

/* Mui ten bao cho biet ten nhom bam duoc, khong phai nhan chet. */
.product-index-group-head a {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    transition: color var(--motion-fast) ease;
}

.product-index-group-head a::after {
    content: "\2192";
    font-weight: 600;
    transition: transform var(--motion-fast) ease;
}

.product-index-group-head a:hover::after,
.product-index-group-head a:focus-visible::after {
    transform: translateX(4px);
}

.product-index-group-head a:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 4px;
}

.product-index-group-head a:hover,
.product-index-group-head a:focus-visible {
    color: var(--accent);
}

/* ---------- So lieu ---------- */

/*
    tabular-nums cho cac chu so rong bang nhau, nen cot so thang hang
    du gia tri la 6 hay 13.
*/
.product-index-count {
    flex-shrink: 0;
    margin-left: auto;
    font-size: 0.78rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.08em;
    color: var(--text-soft);
}

.product-index-group-count {
    font-size: 0.84rem;
    color: var(--text);
}

/* ---------- Cac dong danh muc ---------- */

.product-index-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.product-index-row + .product-index-row {
    border-top: 1px solid rgba(16, 38, 58, 0.08);
}

.product-index-link {
    display: flex;
    align-items: baseline;
    gap: 14px;
    padding: 11px 0;
    color: var(--text);
    font-weight: 500;
    line-height: 1.4;
    transition:
        color var(--motion-fast) ease,
        padding-left var(--motion-fast) ease;
}

.product-index-name {
    min-width: 0;
    overflow-wrap: anywhere;
}

.product-index-link:hover,
.product-index-link:focus-visible {
    color: var(--accent);
    padding-left: 6px;
}

.product-index-link:hover .product-index-count,
.product-index-link:focus-visible .product-index-count {
    color: var(--accent);
}

.product-index-link:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ---------- Cap 3: ke doc lam ro quan he cha - con ---------- */

.product-index-sublist {
    margin: 0 0 8px;
    padding-left: 15px;
    border-left: 1px solid rgba(16, 38, 58, 0.16);
}

.product-index-sublist .product-index-row + .product-index-row {
    border-top: 0;
}

.product-index-sublist .product-index-link {
    padding: 6px 0;
    font-size: 0.94rem;
    font-weight: 400;
    color: var(--text-soft);
}

.product-index-sublist .product-index-link:hover,
.product-index-sublist .product-index-link:focus-visible {
    color: var(--accent);
}

@media (max-width: 560px) {
    .product-index-shell {
        padding-bottom: 64px;
    }

    .product-index-head {
        margin-bottom: 28px;
    }

    .product-index-grid {
        gap: 18px;
    }

    .product-index-group {
        padding: 22px 22px 12px;
    }
}