body {
    font-family: 'Roboto', sans-serif;
    background-color: #f7f7f7;
    margin: 0 auto;
}

/* Style applied when the screen width is less than or equal to 768px (tablet version) */
@media (min-width: 768px) {
    .container {
        max-width: 90%;
    }
}

/* The style applied when the screen width is less than or equal to 480px (mobile phone) */
@media (min-width: 480px) {
    .container {
        max-width: 90%;
    }
}

.product-card {
    background-color: #ffffff;
    border: none;
    margin-bottom: 16px;
}

.product-image img {
    width: 100%;
    height: auto;
}

.product-info {
    padding: 8px 8px 20px;
}

.product-price {
    color: #333333;
    font-size: 18px;
    font-weight: 500;
    height: 1em;
}

.discount-price {
    text-decoration: line-through;
    color: #999999;
    font-size: 14px;
    margin-right: 8px;
}

.discount-badge {
    background-color: #ff6a00;
    color: #ffffff;
    font-size: 12px;
    padding: 2px 4px;
    position: absolute;
    top: 8px;
    right: 8px;
    border-radius: 3px;
}

.product-rating {
    color: #ffcc00;
}

.product-rating span {
    font-size: 14px;
    color: #333333;
}

.filter-btn {
    background-color: #ff9500;
    color: #ffffff;
    padding: 8px 16px;
    font-size: 16px;
    border: none;
    border-radius: 4px;
    margin-bottom: 16px;
    display: inline-block;
    margin: 0 5px 16px 5px;
}

.goods_category {
    margin-bottom: 20px;
}

h4.product-title {
    min-height: 48px;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Number of lines you want to display */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 60px; /* Optional: Adjust this value to ensure it contains exactly two lines */
    width: 100%; /* Optional: Adjust width as needed */
}

.product-title a {
    color: darkslategrey;
    text-decoration: none;
}

.container_top {
    display: flex; /* 使用 Flex 布局 */
    justify-content: space-between; /* 左右对齐 */
    align-items: center; /* 垂直居中对齐 */
    padding: 30px 10px;
    position: sticky;
    top: 0;
    z-index: 1000;
    background-color: #f8f9fa;
    color: #333;
    transition: all 0.3s ease; /* Smooth transition effect*/
}

#product-container > p {
    font-size: 20px;
    padding-left: 10px;
}

.sticky-top {
    background-color: #fff; /* Brighter background color*/
    color: #000; /*Darker font color*/
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Shadow effect*/
    border-bottom: 1px solid #ddd;
    border-radius: 10px;
    top: 10px; /* 10px from top */
}

.sticky-top .btn {
    background-color: #007bff; /*Button background color*/
    color: white; /*Button font color*/
}

.container_top > div {
    display: inline-block;
    vertical-align: middle; /* vertical center alignment */
}

.product-image {
    width: 100%; /* Responsive width */
    padding-top: 100%; /* Same as width to maintain square aspect ratio */
    background-position: center; /* Center the image */
    background-size: cover; /* Cover the area, maintaining aspect ratio */
    background-repeat: no-repeat; /* Prevent the image from repeating */
    position: relative; /* Set position context for absolute positioning of child elements */
    overflow: hidden; /* Hide any overflow */
}

.product-image img {
    position: absolute;
    top: 10px; /* Add 5px gap at the top */
    left: 10px; /* Add 5px gap on the left */
    width: calc(100% - 20px); /* Adjust width to account for the gap */
    height: calc(100% - 20px); /* Adjust height to account for the gap */
    object-fit: contain;
}

.custom-dropdown-btn, .custom-dropdown-btn:hover, .custom-dropdown-btn.show {
    background-color: #ff9500;
    border-color: #ff9500;
    color: white; /* Modify button text color */
}

#product-container .container_bottom > h3 {
    padding: 5px 12px;
    margin: 12px 0px;
    border-left: 5px solid #FFC0CB;
}

.container_top_right {
    text-align: center;
    width: 100%;
}

.container_top_right h3 {
    display: inline; /* Use Flex layout*/
    align-items: center; /* Vertically center align text content*/
    height: 100%; /* Center the content vertically */
    margin: 0 auto;
}

#dropdownMenuButton {
    font-size: 27px;
}

.header_title {
    text-align: center;
    margin: 0 auto;
    display: block;
}

.instructions {
    color: gray;
    text-align: center;
    margin: 0 auto;
    display: block;
    font-style: oblique;
}

.instructions b {
    color: FFA725;
}