.goods-list-wrapper {
        display: flex;
        gap: 50px;
    }
    .category-sidebar {
        width: 220px;
        flex-shrink: 0;
    }
    .category-sidebar h2 {
        font-size: 1.2em;
        font-weight: bold;
        margin-bottom: 15px;
        border-bottom: 2px solid #333;
        padding-bottom: 10px;
    }
    .category-sidebar ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    .category-sidebar li a {
        display: block;
        padding: 10px;
        text-decoration: none;
        color: #333;
        border-bottom: 1px solid #eee;
        transition: background-color 0.3s;
    }
    .category-sidebar li a:hover,
    .category-sidebar li a.active {
        background-color: #f0f0f0;
    }
    .goods-list-container {
        flex-grow: 1;
    }
    .category-header {
        margin-bottom: 20px;
    }
    .category-header h2 {
        font-size: 1.5em;
        font-weight: bold;
    }
    .category-header p {
        margin-top: 10px;
        color: #666;
    }
    .goods-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 50px 30px;
    }
    .product-card {
        position: relative;
        transition: box-shadow 0.3s;
        border: 1px solid #cccccc;
        border-radius: 10px;
    }
    .product-card:hover {
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }
    .product-card .product-image {
		height: 200px;
		line-height: 200px;
		margin: 15px auto 0;
	    display: block;
		vertical-align: middle;
		text-align: center;
		width: 94%;
    }
    .product-card-content {
        padding: 15px;
    }
    .product-name {
        margin-bottom: 5px;
    }
    .product-price {
        margin-bottom: 10px;
    }

    /* Make the product title more prominent and align price to the right */
    .product-name {
        font-weight: 700;
    }
    .product-price {
        text-align: right;
        display: block;
        width: 100%;
        margin: 18px 0; /* spacing above and below the price */
    }
    .product-description {
        font-size: 0.9em;
        color: #666;
        margin-bottom: 20px;
    }
    
    .pagination {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 40px;
    }
    .pagination a, .pagination span {
        padding: 8px 12px;
        margin: 0 5px;
        border: 1px solid #ddd;
        text-decoration: none;
        color: #333;
    }
    .pagination a:hover {
        background-color: #f0f0f0;
    }
    .pagination .current {
        background-color: #e40012;
        color: white;
        border-color: #e40012;
    }
    .pagination .disabled {
        color: #ccc;
        pointer-events: none;
    }

    @media (min-width: 601px) and (max-width: 1024px) {
        .goods-list-wrapper {
            flex-direction: column;
        }
        .category-sidebar {
            width: 100%;
            margin-bottom: 20px;
        }
        .goods-grid {
            grid-template-columns: repeat(2, 1fr);
            /* Keep PC gap on tablet widths */
            gap: 50px 30px;
        }
        .product-card .product-image {
            height: 150px;
        }
    }

    /* Responsive accordion behavior for category sidebar under 1024px */
    @media (max-width: 1024px) {
        .category-sidebar {
            width: 100%;
            order: -1; /* move to top */
            padding: 0 10px;
        }
        .category-sidebar .category-header-toggle {
            display: flex;
            justify-content: space-between;
            align-items: center;
            cursor: pointer;
            padding: 12px 0;
            border-bottom: 1px solid #e6e6e6;
            background: transparent;
            font-weight: bold;
        }
        .category-sidebar .category-list {
            max-height: 0;
            overflow: hidden;
            /* closing transition (fast) */
            transition: max-height 0.28s ease, opacity 0.18s ease;
            padding: 0;
            margin: 0;
            opacity: 0;
        }
        .category-sidebar.open .category-list {
            max-height: 1000px; /* large enough to show full list */
            /* opening transition (slower than closing) */
            transition: max-height 0.48s cubic-bezier(.2,.8,.2,1), opacity 0.36s ease;
            opacity: 1;
        }
        .category-sidebar .category-list li {
            padding: 8px 0;
        }
        .category-sidebar .category-list a {
            display: block;
            /* keep vertical padding but add left padding so items appear indented on mobile */
            padding: 8px 0 8px 12px;
        }
        /* bright POP SVG chevron indicator */
        .category-sidebar .chevron {
            display: inline-block;
            width: 20px;
            height: 20px;
            margin-left: 8px;
            /* ensure transforms rotate around the SVG's box */
            transform-box: fill-box;
            transform-origin: center;
        }
            /* wrapper handles scale/hover, path handles rotation */
            .category-sidebar .chev-wrap {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                transition: transform 0.22s ease;
            }
        /* background circle style inside SVG: white fill with blue 1px border */
        .category-sidebar .chevron .chev-bg {
            fill: #ffffff; /* white background */
            stroke: #0068b7; /* blue border */
            stroke-width: 1px;
        }
        .category-sidebar .chevron .chev-path {
            stroke: #0068b7; /* blue chevron */
            transition: transform 0.28s ease;
            /* make sure path rotations are calculated relative to its bounding box */
            transform-box: fill-box;
            transform-origin: center;
        }
        /* hover/tap effect to make it POP */
        .category-sidebar h2:hover .chevron,
            .category-sidebar h2:hover .chev-wrap,
            .category-sidebar h2:focus .chev-wrap {
                transform: scale(1.15);
            }
            /* when open, rotate the path so it points up */
            .category-sidebar.open .chev-wrap .chev-path {
                transform: translateY(-1px) rotate(-180deg);
            }
            /* when closed ensure path points down */
            .category-sidebar .chev-path {
                transform: translateY(0) rotate(0deg);
            }
        .category-sidebar h2:focus .chevron {
            transform: scale(1.15) rotate(0deg);
        }
        /* Do not rotate the whole SVG; rotation is handled on the path to keep the white triangle visible */
        .category-sidebar.open .chevron {
            transform: none;
        }
    }
/* Hide chevron on desktop */
@media (min-width: 1025px) {
    .category-sidebar h2 .chevron {
        display: none;
    }
}
/* Make H2 act like a button on small screens */
@media (max-width: 1024px) {
    .category-sidebar h2 {
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 8px;
    }
}
    @media (max-width: 768px) {
        .goods-list-wrapper {
            flex-direction: column;
        }
        .category-sidebar {
            width: 100%;
            margin-bottom: 20px;
        }
        .goods-grid {
            grid-template-columns: repeat(2, 1fr);
            /* For tablets (up to 768px) keep PC gap so layout matches visual spacing */
            gap: 50px 30px;
        }
        .product-card .product-image {
            height: 200px;
        }
    }
        @media (max-width: 640px) {
        .goods-grid {
            grid-template-columns: repeat(1, 1fr);
                gap: 28px;
        }
    }
    /* Apply category description spacing on tablet and larger */
    @media (min-width: 601px) {
        #category-description {
            margin-bottom: 50px;
        }
    }