header {
    background-color: var(--background);
}

header #hero {
    margin: auto;
    width: 50rem;
    display: grid;
    grid-template-columns: 1fr 4fr 4fr 5fr 1fr;
    grid-template-rows: 9rem 6rem 1fr 6rem;
}

header #title {
    grid-column: 2/5;
    grid-row: 2/3;
}

header #title-text {
    font-size: 3.6rem;
    font-family: var(--system-ui);
    font-weight: 300;
    color: var(--primary);
    margin: auto;
    padding-left: 1rem;
}

#hero #products {
    grid-column: 2/5;
    grid-row: 3/4;
    margin-top: 2rem;
}

.product-category {
    position: relative;
    background-color: var(--neutral-100);
    border-radius: 0.7rem;
    padding: 1.4rem 1rem 1rem 1.8rem;
    width: 35rem;
    border-left: solid 1rem var(--neutral-warm);
    margin: 1.5rem 0;
    box-shadow: .3rem .3rem .6rem var(--neutral-300);
    display: grid;
    grid-template-rows: 2.8rem 0fr;
    transition: grid-template-rows 0.3s ease-out;
}

.product-category.expanded {
    grid-template-rows: 2.8rem 1fr;
    transition: grid-template-rows 0.3s ease-out;
}

.product-category.inactive {
    opacity: 0.8;
    box-shadow: .2rem .2rem .4rem var(--neutral-300);
}

.product-category .expand {
    position: absolute;
    right: 1.5rem;
    top: 0.5rem;
    font-size: 1rem;
    cursor: pointer;
}

.product-category .expand-text {
    font-weight: 200;
    color: var(--neutral-cool-dark);
    margin-right: 0.5rem;
    opacity: 0;
    transition: opacity 0.2s ease-out;
}

.product-category .expand-text.animated {
    animation: blink .5s ease-in-out;
}

.product-category:hover .expand-text, .product-category .expand-text.active {
    opacity: 1;
    transition: opacity 0.3s ease-out;
}

.product-category .expand-icon {
    position: absolute;
    color: var(--primary);
    transform: rotate(0deg);
    transition: transform 0.3s ease-out;
}

.product-category .expand-icon.rotate {
    transform: rotate(45deg);
    transition: transform 0.5s ease-out;
}

.product-category h2 {
    font-size: 1.8rem;
    font-family: var(--system-ui);
    font-weight: 200;
    color: var(--neutral-cool-dark);
    cursor: pointer;
    margin: 0;
    transition: text-shadow .1s ease-out, color .1s ease-out;
}

.product-category h2:hover {
    color: var(--secondary);
    text-decoration: underline solid var(--neutral-warm) 0.12rem;
    text-underline-offset: 0.2rem;
    text-shadow: var(--neutral-200) 0.1rem 0.1rem 0.3rem;
    transition: text-shadow .1s ease-out, color .1s ease-out;
}

.product-category .sub-category-group {
    margin: 0;
    opacity: 0;
    transition: margin .1s ease-in-out, opacity .1s ease-in-out;
    overflow: hidden;
}

.product-category.expanded .sub-category-group {
    margin: 2rem 0 1rem 0;
    opacity: 1;
    transition: margin .1s ease-in-out, opacity .1s ease-in-out;
}

/* grid 用于展开和折叠子类 */
.sub-category {
    display: grid;
    grid-template-rows: auto 0fr;
    transition: grid-template-rows .3s ease-in-out;
}

.sub-category.inactive {
    opacity: 0.6;
}

.sub-category.expanded {
    margin-bottom: 1.5rem;
    grid-template-rows: auto 1fr;
    transition: grid-template-rows .3s ease-in-out;
}

.sub-category h3 {
    margin: .3rem 0;
    font-size: 1.8rem;
    font-weight: 400;
    color: var(--secondary);
    cursor: pointer;
    line-height: 1;
    padding-bottom: 0.2rem;
    text-indent: -1.2rem;
    padding-left: 1.2rem;
}

.sub-category h3::before {
    content: ".";
    color: var(--primary);
    font-weight: 800;
    margin-right: 0.5rem;
}

.sub-category h3 a {
    color: var(--secondary);
}

.sub-category h3:hover {
    color: var(--neutral-900);
    text-decoration: underline solid var(--neutral-warm) 0.12rem;
    text-underline-offset: 0.2rem;
    text-shadow: var(--neutral-200) 0.1rem 0.1rem 0.25rem;
    transition: text-shadow .1s ease-out;
}

.sub-sub-category-group {
    overflow: hidden;
}

.sub-category.expanded .sub-sub-category-group {
    margin: .5rem 0;
    transition: margin .1s ease-in-out;
}

.sub-sub-category h4 {
    color: var(--primary);
    font-size: 1.2rem;
    font-weight: 400;
    margin: 0 1.2rem;
}

.sub-sub-category h4 a {
    color: var(--primary);
    text-decoration: underline dashed var(--neutral-warm) 0.12rem;
}

.sub-sub-category h4 a:hover {
    color: var(--secondary);
    text-decoration: underline solid var(--neutral-warm) 0.12rem;
    text-underline-offset: 0.2rem;
    text-shadow: var(--neutral-200) 0.1rem 0.1rem 0.2rem;
}

@keyframes blink {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 0.5;
    }
    100% {
        opacity: 1;
    }
}

@media (max-width: 768px) {
    header #hero {
        width: 100%;
    }

    header #title-text {
        font-size: 2.6rem;
    }

    .product-category {
        width: 100%;
    }
}