/* Product listing pages only. Keep all selectors scoped to avoid overriding shared components. */
.products-list-page .site-header,
.detail-page .site-header {
    position: relative;
    height: 82px;
    color: #202b34;
    border-bottom: 1px solid var(--color-line);
    background: var(--color-white)
}

.products-list-page .brand-logo,
.detail-page .brand-logo { filter: none }
.products-list-page .anniversary,
.detail-page .anniversary { border-color: #d5dce2 }
.products-list-page .main-nav a.active:after,
.detail-page .main-nav a.active:after,
.products-list-page .main-nav a:hover:after,
.detail-page .main-nav a:hover:after { background: #1475bc }
.products-list-page .search-button,
.detail-page .search-button { color: #22303a }

.page-banner {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 430px;
    color: var(--color-white);
    background: linear-gradient(90deg, rgba(8, 102, 182, .9), rgba(37, 146, 212, .32)), url("../img/exhibition.png") center/cover no-repeat
}

.page-banner:after {
    position: absolute;
    inset: 0;
    content: "";
    background: linear-gradient(90deg, rgba(0, 83, 157, .55), transparent 72%)
}

.page-banner .container { position: relative; z-index: 1; padding-bottom: 76px }
.page-banner h1 { margin: 0; font-size: 58px; font-weight: 500 }
.page-banner p { max-width: 650px; margin: 10px 0 0 }

.products-list-page .listing-layout { display: grid; grid-template-columns: 265px minmax(0, 1fr); gap: 45px }
.products-list-page .filter-panel { position: sticky; top: 24px; align-self: start; border: 1px solid #e2e8ed; background: var(--color-white) }
.products-list-page .filter-panel > h2 { margin: 0; padding: 18px 22px; color: var(--color-white); background: #0b76bd; font-size: 20px }
.products-list-page .filter-panel h3 { margin: 0; padding: 16px 20px; border-bottom: 1px solid #e8ecef; font-size: 15px }
.products-list-page .filter-panel > .product-category a { display: block; padding: 11px 20px; border-bottom: 1px solid #eff2f4; color: #4a5660; font-size: var(--font-size-small) }
.products-list-page .filter-panel > .product-category a.active { color: var(--color-white); background: #1595d0 }
.products-list-page .filter-panel > .product-category a:hover { color: #0b76bd }
.products-list-page .listing-content .toolbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 24px }
.products-list-page .listing-content .toolbar h2 { margin: 0; font-size: 26px }
.products-list-page .product-toolbar-search { width: min(100%, 458px); }

.products-list-page .inner-product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px }
.products-list-page .inner-product-card { position: relative; display: block; min-height: 355px; padding: 20px; border-bottom: 3px solid transparent; background: var(--color-surface-card); transition: border-color .2s ease, box-shadow .2s ease }
.products-list-page .inner-product-card:hover,
.products-list-page .inner-product-card:focus-visible { border-color: var(--color-accent); box-shadow: 0 14px 34px rgba(28, 55, 78, .1) }
.products-list-page .inner-product-card img { width: 100%; height: 260px; object-fit: contain }
.products-list-page .inner-product-card h3 { margin: 12px 0 4px; font-size: var(--font-size-base); line-height: 1.4 }
.products-list-page .inner-product-card p { margin: 0; color: #71808b; font-size: 12px }

@media (max-width: 1000px) {
    .products-list-page .listing-layout { grid-template-columns: 1fr }
    .products-list-page .filter-panel { display: none }
    .products-list-page .inner-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) }
}

@media (max-width: 760px) {
    .products-list-page .site-header,
.detail-page .site-header { height: 76px }
    .products-list-page .menu-toggle span,
    .detail-page .menu-toggle span { background: #202b34 }
    .page-banner { min-height: 300px }
    .page-banner .container { padding-bottom: 48px }
    .page-banner h1 { font-size: 40px }
    .products-list-page .listing-content .toolbar { align-items: flex-start; flex-direction: column }
    .products-list-page .product-toolbar-search { width: 100%; max-width: 458px }
    .products-list-page .inner-product-grid { grid-template-columns: 1fr }
}
/* Collapsible product category navigation. */
.products-list-page .filter-panel {
    border: 0;
    background: transparent
}

.products-list-page .filter-panel > h2 {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 12px;
    padding: 18px 22px;
    color: var(--color-white);
    background: #176fb6;
    font-size: 23px;
    font-weight: 500;
    line-height: 1.2
}

.products-list-page .filter-panel > h2 svg {
    width: 25px;
    height: 25px;
    fill: currentColor
}

.products-list-page .product-category {
    margin-top: 6px;
    background: #f5f5f5
}

.products-list-page .product-category-heading {
    display: flex;
    align-items: stretch;
    min-height: 46px
}

.products-list-page .product-category-heading h3 {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 14px;
    font-weight: 400
}

.products-list-page .product-category-heading h3 a {
    display: flex;
    align-items: center;
    min-height: 46px;
    padding: 10px 10px 10px 20px;
    border: 0;
    color: #1d252b
}

.products-list-page .product-category-toggle {
    display: grid;
    flex: 0 0 46px;
    width: 46px;
    padding: 0;
    border: 0;
    place-items: center;
    color: #c4c7ca;
    background: transparent;
    cursor: pointer
}

.products-list-page .product-category-caret {
    width: 0;
    height: 0;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 6px solid currentColor;
    transition: transform .2s ease
}

.products-list-page .product-category.is-open .product-category-heading {
    color: var(--color-white);
    background: #318bd0
}

.products-list-page .product-category.is-open .product-category-heading h3 a,
.products-list-page .product-category.is-open .product-category-toggle {
    color: var(--color-white)
}

.products-list-page .product-category.is-open .product-category-caret {
    transform: rotate(90deg)
}

.products-list-page .product-category-children {
    padding: 4px 0 5px;
    background: #f8f8f8
}

.products-list-page .product-category-children a {
    display: block;
    padding: 5px 18px 5px 30px;
    border-bottom: 1px solid #e9e9e9;
    color: #4c5256;
    font-size: 12px;
    line-height: 2
}

.products-list-page .product-category-children a:last-child {
    border-bottom: 0
}

.products-list-page .product-category-children a:hover,
.products-list-page .product-category-children a.is-current {
    color: #f28c18
}

@media (max-width: 1000px) {
    .products-list-page .filter-panel { display: block; margin-bottom: 30px }
}

@media (max-width: 760px) {
    .products-list-page .filter-panel > h2 { font-size: 20px }
}
/* Mobile product-category drawer. */
.products-list-page .product-category-drawer-toggle,
.products-list-page .product-category-drawer-head,
.products-list-page .product-category-overlay { display: none }

@media (max-width: 1000px) {
    .products-list-page .product-category-drawer-toggle {
        position: fixed;
        z-index: 1080;
        bottom: 50px;
        left: 0;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        min-height: 44px;
        max-width: 180px;
        padding: 10px 14px;
        border: 0;
        border-radius: 0 6px 6px 0;
        color: var(--color-white);
        background: var(--color-primary);
        box-shadow: 0 12px 28px rgba(15, 23, 42, .24);
        font: inherit;
        font-size: var(--font-size-small);
        font-weight: 600;
        cursor: pointer
    }

    .products-list-page .product-category-drawer-toggle svg { width: 18px; height: 18px; fill: currentColor }

    .products-list-page .filter-panel {
        position: fixed;
        z-index: 1200;
        top: 0;
        bottom: 0;
        left: 0;
        display: block;
        width: min(360px, calc(100vw - 40px));
        height: 100dvh;
        margin: 0;
        padding: 0 20px 28px;
        overflow-y: auto;
        background: var(--color-white);
        box-shadow: 14px 0 32px rgba(15, 23, 42, .2);
        transform: translateX(-105%);
        visibility: hidden;
        pointer-events: none;
        transition: transform .3s ease, visibility 0s linear .3s
    }

    .products-list-page .filter-panel.is-open {
        transform: translateX(0);
        visibility: visible;
        pointer-events: auto;
        transition: transform .3s ease, visibility 0s
    }

    .products-list-page .product-category-overlay {
        position: fixed;
        z-index: 1100;
        inset: 0;
        display: block;
        opacity: 0;
        background: rgba(15, 23, 42, .48);
        pointer-events: none;
        transition: opacity .3s ease
    }

    .product-category-drawer-open { overflow: hidden }
    .product-category-drawer-open .products-list-page .product-category-overlay { opacity: 1; pointer-events: auto }

    .products-list-page .product-category-drawer-head {
        position: sticky;
        z-index: 1;
        top: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 64px;
        margin: 0 -20px 12px;
        padding: 12px 20px;
        border-bottom: 1px solid var(--color-line);
        background: var(--color-white);
        box-shadow: 0 6px 18px rgba(15, 23, 42, .06)
    }

    .products-list-page .product-category-drawer-head strong { font-size: 18px }
    .products-list-page .product-category-close {
        display: grid;
        width: 40px;
        height: 40px;
        padding: 0;
        border: 1px solid var(--color-line);
        border-radius: 50%;
        place-items: center;
        color: var(--color-ink);
        background: var(--color-surface-light);
        font-size: 28px;
        line-height: 1;
        cursor: pointer
    }
}
.products-list-page .filter-panel .sidebar-contact-us { margin-top: 20px; }
@media (max-width: 1000px) { .products-list-page .filter-panel { position: fixed; top: 0; } }