* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --primary-color: #78e723;
    --text-color: #333;
    --text-light: #666;
    --border-color: #e8e8e8;
    --bg-light: #f5f5f5;
    --hover-bg: #f0f0f0;
    --white: #fff;
    --accent-color: #78e723;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-size: 14px;
    color: var(--text-color);
    line-height: 1.5;
    background-color: var(--white);
}

a {
    text-decoration: none;
    color: inherit;
}

ul, ol {
    list-style: none;
}

img {
    max-width: 100%;
    display: block;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

.header-top-bar {
    background-color: #f8f9fa;
    color: #555;
    font-size: 13px;
    border-bottom: 1px solid #e8e8e8;
}

.header-top-bar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 40px;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 20px;
}

.currency-dropdown,
.language-dropdown {
    position: relative;
}

.dropdown-trigger {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 8px 0;
    cursor: pointer;
    transition: color 0.3s;
}

.dropdown-trigger:hover {
    color: var(--accent-color);
}

.dropdown-trigger::after {
    content: '▼';
    font-size: 8px;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--white);
    color: var(--text-color);
    min-width: 120px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    display: none;
    z-index: 1000;
}

.currency-dropdown:hover .dropdown-menu,
.language-dropdown:hover .dropdown-menu,
.user-dropdown:hover .dropdown-menu {
    display: block;
}

.dropdown-menu li {
    padding: 0;
}

.dropdown-menu li a {
    display: block;
    padding: 10px 15px;
    color: var(--text-color);
    line-height: 1.4;
    transition: background 0.3s, color 0.3s;
}

.dropdown-menu li a:hover {
    background: var(--hover-bg);
}

.header-right {
    display: flex;
    align-items: center;
}

.header-phone {
    display: flex;
    align-items: center;
    gap: 5px;
}

.header-main {
    background-color: var(--white);
    border-bottom: 1px solid var(--border-color);
}

.header-main .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 80px;
}

.logo img {
    height: 50px;
}

.header-search {
    flex: 1;
    max-width: 500px;
    margin: 0 30px;
    display: flex;
}

.header-search input {
    flex: 1;
    padding: 10px 15px;
    border: 2px solid #f5f5f5;
    border-right: none;
    outline: none;
    font-size: 14px;
}

.header-search button {
    padding: 10px 20px;
    background-color: var(--accent-color);
    color: var(--white);
    border: 2px solid var(--accent-color);
    cursor: pointer;
    transition: background 0.3s;
}

.header-search button:hover {
    background-color: #66cc1a;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 25px;
}

.user-dropdown {
    position: relative;
}

.user-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    font-size: 12px;
}

.user-icon svg {
    width: 24px;
    height: 24px;
    margin-bottom: 3px;
}

.user-dropdown .dropdown-menu {
    left: 50%;
    transform: translateX(-50%);
    min-width: 150px;
}

.cart-icon {
    position: relative;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 12px;
}

.cart-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: inherit;
}

.cart-icon svg {
    width: 24px;
    height: 24px;
    margin-bottom: 3px;
}

.cart-count {
    position: absolute;
    top: -8px;
    right: -8px;
    background-color: #78e723;
    color: var(--white);
    font-size: 10px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.search-mobile-toggle {
    display: none;
    cursor: pointer;
}

.search-mobile-toggle svg {
    width: 24px;
    height: 24px;
}

.search-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.7);
    display: none;
    z-index: 10000;
}

.search-overlay.active {
    display: flex;
    align-items: flex-start;
}

.search-modal {
    width: 100%;
    background-color: var(--white);
    padding: 20px 15px;
}

@media (min-width: 769px) {
    .search-close {
        position: absolute;
        top: 20px;
        right: 20px;
        cursor: pointer;
        color: #666;
        transition: color 0.3s;
    }

    .search-modal {
        display: block;
    }
}

@media (max-width: 768px) {
    .search-modal {
        display: flex;
        align-items: center;
        flex-direction: row-reverse;
    }

    .search-close {
        cursor: pointer;
        color: #999;
        padding: 0 15px;
        flex-shrink: 0;
    }

    .search-close svg {
        width: 20px;
        height: 20px;
    }
}

.search-close:hover {
    color: var(--primary-color);
}

.search-close svg {
    width: 24px;
    height: 24px;
}

.search-input-wrapper {
    display: flex;
    max-width: 800px;
    margin: 0 auto;
}

.search-input-lg {
    flex: 1;
    padding: 15px 20px;
    font-size: 18px;
    border: 2px solid #f5f5f5;
    border-right: none;
    outline: none;
}

.search-btn-lg {
    padding: 15px 25px;
    background-color: var(--primary-color);
    color: var(--white);
    border: 2px solid var(--primary-color);
    cursor: pointer;
    font-size: 18px;
    transition: background 0.3s;
}

.search-btn-lg:hover {
    background-color: #c62b36;
}

.nav-section {
    background-color: var(--white);
    border-bottom: 1px solid var(--border-color);
}

.nav-section .container {
    display: flex;
}

.nav-categories {
    position: relative;
    z-index: 100;
}

.nav-categories-trigger {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    background-color: var(--primary-color);
    color: var(--white);
    cursor: pointer;
    font-weight: 500;
}

.nav-categories-trigger svg {
    width: 20px;
    height: 20px;
}

.nav-menu {
    display: flex;
    flex: 1;
    margin-left: 30px;
}

.nav-mobile-toggle {
    display: none;
    align-items: center;
    gap: 10px;
    padding: 12px 0;
    cursor: pointer;
    font-weight: 500;
}

.nav-mobile-toggle svg {
    width: 24px;
    height: 24px;
}

.nav-item {
    position: relative;
}

.nav-item > a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 15px 20px;
    font-weight: 500;
    transition: color 0.3s;
    position: relative;
}

.nav-item > a .tag {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
    color: white;
    font-weight: 600;
}

.nav-item > a:hover {
    color: var(--primary-color);
}

.nav-item > a::after {
    content: '▼';
    font-size: 8px;
}

.nav-item > a.no-arrow::after {
    content: none;
}

/* 有下拉菜单的导航项 */
.nav-item.has-dropdown .nav-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 20px;
    font-weight: 500;
    transition: color 0.3s;
}

.nav-item.has-dropdown .nav-row:hover {
    color: var(--primary-color);
}

.nav-item.has-dropdown .nav-link {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.nav-expand {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    cursor: pointer;
    color: var(--text-light);
    transition: transform 0.3s;
}

.nav-item:hover .nav-dropdown,
.nav-item.expanded .nav-dropdown {
    display: block;
}

.nav-item.expanded .nav-expand {
    transform: rotate(180deg);
}


.nav-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--white);
    min-width: 200px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.15);
    display: none;
    z-index: 1000;
}

.nav-dropdown li {
    border-bottom: 1px solid var(--border-color);
}

.nav-dropdown li:last-child {
    border-bottom: none;
}

.nav-dropdown li a {
    display: block;
    padding: 12px 20px;
    transition: background 0.3s, color 0.3s;
}

.nav-dropdown li a:hover {
    background: var(--hover-bg);
    color: var(--primary-color);
}

.nav-categories:hover .nav-dropdown {
    display: block;
}

.nav-dropdown .sub-dropdown {
    position: absolute;
    left: 100%;
    top: 0;
    background: var(--white);
    min-width: 180px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.15);
    display: none;
}

.nav-dropdown li:hover .sub-dropdown {
    display: block;
}

.footer {
    background-color: #f8f9fa;
    color: #333;
    padding: 40px 0 20px;
    margin-top: 50px;
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    margin-bottom: 30px;
}

.footer-section h4 {
    font-size: 16px;
    margin-bottom: 15px;
    color: var(--text-color);
    font-weight: 600;
}

.footer-section ul li {
    margin-bottom: 8px;
}

.footer-section ul li a {
    color: #666;
    transition: color 0.3s;
}

.footer-section ul li a:hover {
    color: var(--primary-color);
}

.footer-section p {
    color: #666;
    margin-bottom: 5px;
}

.footer-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-toggle {
    display: none;
    background: none;
    border: none;
    color: var(--text-color);
    font-size: 24px;
    font-weight: 300;
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    align-items: center;
    justify-content: center;
    position: relative;
}

.toggle-icon-plus,
.toggle-icon-minus {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: opacity 0.3s;
}

.toggle-icon-minus {
    opacity: 0;
}

.footer-toggle.active .toggle-icon-plus {
    opacity: 0;
}

.footer-toggle.active .toggle-icon-minus {
    opacity: 1;
}

.footer-section-content {
    margin-top: 15px;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 20px;
    border-top: 1px solid #ddd;
    color: #666;
    font-size: 13px;
    background-color: #efeff4;
    margin: 0 -15px;
    padding: 20px 15px;
}

.payment-icons img {
    height: 30px;
    width: auto;
}

@media (max-width: 768px) {
    .header-top-bar .container {
        height: auto;
        padding: 10px 15px;
        flex-wrap: wrap;
        gap: 10px;
    }

    .header-main .container {
        height: auto;
        padding: 10px 15px;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-between;
    }

    .nav-mobile-toggle {
        display: block;
        order: 1;
    }

    .search-mobile-toggle {
        display: block;
        order: 2;
    }

    .logo {
        order: 3;
        text-align: center;
    }

    .logo img {
        height: 35px;
    }

    .header-search {
        display: none;
    }

    .header-actions {
        order: 4;
        gap: 15px;
    }

    .user-icon > span,
    .cart-link > span {
        display: none;
    }

    .cart-icon .cart-count {
        display: flex;
        top: -6px;
        right: -10px;
    }

    .nav-section .container {
        display: none;
    }

    .nav-section.active .container {
        display: flex;
        flex-direction: column;
    }

    .nav-section .nav-menu {
        flex-direction: column;
        margin-left: 0;
    }

    .nav-section .nav-item {
        width: 100%;
    }

    .nav-section .nav-item .nav-row {
        padding: 15px 20px;
        border-bottom: 1px solid var(--border-color);
        justify-content: space-between;
    }

    .nav-section .nav-expand {
        color: var(--text-light);
    }

    .nav-section .nav-dropdown {
        position: static;
        box-shadow: none;
        padding-left: 20px;
        width: 100%;
        display: none;
    }

    .nav-section .nav-item.expanded .nav-dropdown,
    .nav-section .nav-item.active .nav-dropdown {
        display: block;
    }

    .footer-content {
        grid-template-columns: repeat(2, 1fr);
    }

    .search-input-wrapper {
        flex: 1;
        display: flex;
        align-items: center;
        border: 2px solid #f5f5f5;
        border-radius: 4px;
        padding: 0;
    }

    .search-input-lg {
        flex: 1;
        padding: 12px 15px;
        font-size: 16px;
        border: none;
        outline: none;
    }

    .search-btn-lg {
        display: none;
    }
}

@media (max-width: 480px) {
    .header-left {
        gap: 10px;
        font-size: 12px;
    }

    .footer-content {
        grid-template-columns: 1fr;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }

    .footer-toggle {
        display: flex;
    }

    .footer-section-content {
        display: none;
    }

    .footer-section-content.active {
        display: block;
    }
}

/* 品牌页面特有样式 - brand-前缀 */
.brand-page {
    padding: 40px 0;
    min-height: calc(100vh - 200px);
}

.brand-breadcrumb {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    font-size: 14px;
    color: #666;
}

.brand-breadcrumb a {
    color: #666;
    text-decoration: none;
}

.brand-breadcrumb a:hover {
    color: var(--primary-color);
}

.brand-breadcrumb-separator {
    color: #ccc;
}

.brand-page-title {
    font-size: 32px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 30px;
    color: var(--text-color);
}

.brand-alphabet-filter {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

.brand-alpha-btn {
    width: 45px;
    height: 45px;
    border: 1px solid var(--border-color);
    background: var(--white);
    color: var(--text-color);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s;
    border-radius: 3px;
}

.brand-alpha-btn:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.brand-alpha-btn.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--white);
}

.brand-list {
    border-top: 1px solid var(--border-color);
}

.brand-group {
    border-bottom: 1px solid var(--border-color);
    padding: 20px 0;
}

.brand-letter-header {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.brand-letter {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--primary-color);
    color: var(--white);
    font-size: 18px;
    font-weight: 600;
    border-radius: 50%;
    margin-right: 15px;
}

.brand-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-left: 51px;
}

.brand-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 150px;
    height: 120px;
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 5px;
    padding: 15px;
    text-decoration: none;
    color: var(--text-color);
    transition: all 0.3s;
}

.brand-card:hover {
    box-shadow: 0 3px 15px rgba(0,0,0,0.1);
    border-color: var(--primary-color);
}

.brand-logo {
    width: 100%;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    overflow: hidden;
}

.brand-logo img {
    max-width: 100%;
    max-height: 70px;
    object-fit: contain;
}

.brand-name {
    font-size: 12px;
    font-weight: 500;
    text-align: center;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .brand-page-title {
        font-size: 24px;
    }

    .brand-alpha-btn {
        width: 40px;
        height: 40px;
        font-size: 12px;
    }

    .brand-cards {
        margin-left: 0;
        justify-content: center;
    }

    .brand-card {
        width: 120px;
        height: 100px;
    }

    .brand-logo {
        height: 55px;
    }

    .brand-logo img {
        max-height: 55px;
    }

    .brand-name {
        font-size: 11px;
    }
}

/* 全局通用按钮样式 - 规则A（无前缀） */
.btn {
    display: inline-block;
    padding: 12px 30px;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s;
    border: none;
}

.btn-primary {
    background-color: var(--primary-color);
    color: var(--white);
}

.btn-primary:hover {
    background-color: #66cc1a;
}

.btn-secondary {
    background-color: var(--white);
    color: var(--text-color);
    border: 1px solid var(--border-color);
}

.btn-secondary:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

/* 错误页面特有样式 - 规则B（error-前缀） */
.error-page {
    padding: 80px 0;
    min-height: calc(100vh - 200px);
    display: flex;
    align-items: center;
}

.error-content {
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
}

.error-icon {
    width: 120px;
    height: 120px;
    margin: 0 auto 30px;
    background: #fff5f5;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.error-icon svg {
    width: 60px;
    height: 60px;
    color: #e53e3e;
}

.error-title {
    font-size: 36px;
    font-weight: 700;
    color: var(--text-color);
    margin-bottom: 20px;
}

.error-message {
    font-size: 16px;
    color: var(--text-light);
    margin-bottom: 40px;
    line-height: 1.6;
}

.error-actions {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
}

/* 成功页面特有样式 - 规则B（success-前缀） */
.success-page {
    padding: 80px 0;
    min-height: calc(100vh - 200px);
    display: flex;
    align-items: center;
}

.success-content {
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
}

.success-icon {
    width: 120px;
    height: 120px;
    margin: 0 auto 30px;
    background: #f0fff4;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.success-icon svg {
    width: 60px;
    height: 60px;
    color: var(--primary-color);
}

.success-title {
    font-size: 36px;
    font-weight: 700;
    color: var(--text-color);
    margin-bottom: 20px;
}

.success-message {
    font-size: 16px;
    color: var(--text-light);
    margin-bottom: 40px;
    line-height: 1.6;
}

.success-actions {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
}

@media (max-width: 768px) {
    .error-page,
    .success-page {
        padding: 50px 0;
    }

    .error-icon,
    .success-icon {
        width: 100px;
        height: 100px;
    }

    .error-icon svg,
    .success-icon svg {
        width: 50px;
        height: 50px;
    }

    .error-title,
    .success-title {
        font-size: 28px;
    }

    .error-message,
    .success-message {
        font-size: 14px;
    }

    .btn {
        padding: 10px 25px;
        font-size: 13px;
    }
}

/* 全局通用分页样式 - 规则A（无前缀） */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 40px;
    flex-wrap: wrap;
}

.pagination-prev,
.pagination-next,
.pagination-page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 12px;
    border: 1px solid var(--border-color);
    background: var(--white);
    color: var(--text-color);
    font-size: 14px;
    text-decoration: none;
    border-radius: 3px;
    transition: all 0.3s;
}

.pagination-prev:hover:not(.disabled),
.pagination-next:hover:not(.disabled),
.pagination-page:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.pagination-prev.disabled,
.pagination-next.disabled {
    color: #ccc;
    cursor: not-allowed;
}

.pagination-page.active {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--white);
}

.pagination-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 12px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-light);
    font-size: 14px;
    transition: all 0.3s;
    text-decoration: none;
}

.pagination-item:hover:not(.disabled) {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.pagination-item.active {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--white);
}

.pagination-item.disabled {
    color: #ccc;
    cursor: not-allowed;
}

/*
 * 列表无数据提示（独立块，仅挂载本类及相关 BEM 子类，避免污染其它区域）
 * 用法：<div class="empty-list-hint">暂无内容</div>
 * 可选：<span class="empty-list-hint__title">...</span><p class="empty-list-hint__desc">...</p>
 */
.empty-list-hint {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 44px 24px 46px;
    margin: 0;
    border: 1px dashed var(--border-color);
    border-radius: 3px;
    background: linear-gradient(180deg, var(--bg-light) 0%, var(--white) 55%);
    color: var(--text-light);
    font-size: 15px;
    line-height: 1.55;
    transition: border-color 0.25s, box-shadow 0.25s;
}

.empty-list-hint:hover {
    border-color: rgba(120, 231, 35, 0.38);
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.04);
}

.empty-list-hint__icon {
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.empty-list-hint__icon-shell {
    width: 54px;
    height: 54px;
    border: 2px solid var(--border-color);
    border-radius: 3px;
    background: var(--white);
    box-shadow:
        inset 0 13px 0 0 rgba(120, 231, 35, 0.14),
        0 2px 8px rgba(0, 0, 0, 0.04);
    transition: border-color 0.25s, box-shadow 0.25s;
}

.empty-list-hint__icon-shell svg {
    width: 28px;
    height: 28px;
    margin: 13px auto 0;
    display: block;
    color: #bbb;
    stroke: currentColor;
    fill: none;
}

.empty-list-hint__title {
    margin: 0;
    padding: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-color);
}

.empty-list-hint__desc {
    margin: 8px 0 0;
    padding: 0;
    max-width: 360px;
    font-size: 14px;
    color: var(--text-light);
    line-height: 1.55;
}

/* 单行纯文案：仅用 .empty-list-hint 时使用伪元素做小图标装饰 */
.empty-list-hint:not(:has(.empty-list-hint__icon)):not(:has(.empty-list-hint__title))::before {
    content: '';
    width: 54px;
    height: 54px;
    margin-bottom: 16px;
    border: 2px solid var(--border-color);
    border-radius: 3px;
    background: var(--white);
    box-shadow:
        inset 0 13px 0 0 rgba(120, 231, 35, 0.14),
        0 2px 8px rgba(0, 0, 0, 0.04);
}

/* 有结构化子元素时关掉伪图标，避免重复 */
.empty-list-hint:has(.empty-list-hint__icon)::before,
.empty-list-hint:has(.empty-list-hint__title)::before {
    content: none;
    display: none;
}

.empty-list-hint:hover .empty-list-hint__icon-shell {
    border-color: rgba(120, 231, 35, 0.45);
    box-shadow:
        inset 0 13px 0 0 rgba(120, 231, 35, 0.16),
        0 2px 12px rgba(0, 0, 0, 0.05);
}


/* 新闻页面特有样式 - 规则B（news-前缀） */
.news-page {
    padding: 40px 0;
    background-color: var(--bg-light);
}

.news-breadcrumb {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    font-size: 14px;
    color: #666;
}

.news-breadcrumb a {
    color: #666;
    text-decoration: none;
}

.news-breadcrumb a:hover {
    color: var(--primary-color);
}

.news-breadcrumb-separator {
    color: #ccc;
}

.news-layout {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 30px;
}

.news-main {
    background-color: var(--white);
    padding: 30px;
}

.news-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-color);
    margin-bottom: 30px;
}

.news-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.news-item {
    display: flex;
    gap: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
}

.news-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.news-item-image {
    width: 180px;
    flex-shrink: 0;
}

.news-item-image img {
    width: 100%;
    height: 120px;
    object-fit: cover;
    border-radius: 3px;
}

.news-item-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.news-item-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-color);
    text-decoration: none;
    transition: color 0.3s;
}

.news-item-title:hover {
    color: var(--primary-color);
}

.news-item-meta {
    display: flex;
    gap: 15px;
}

.news-item-date {
    font-size: 13px;
    color: var(--text-light);
}

.news-item-desc {
    font-size: 14px;
    color: var(--text-light);
    line-height: 1.6;
}

.news-item-link {
    font-size: 13px;
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 500;
    align-self: flex-start;
}

.news-item-link:hover {
    text-decoration: underline;
}

.news-sidebar {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.news-category-widget {
    background: var(--white);
    padding: 20px;
    border-radius: 3px;
}

.news-category-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-color);
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--primary-color);
}

.news-category-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.news-category-item {
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 8px;
}

.news-category-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.news-category-link {
    font-size: 14px;
    color: var(--text-color);
    text-decoration: none;
    transition: color 0.3s;
}

.news-category-link:hover {
    color: var(--primary-color);
}

@media (max-width: 992px) {
    .news-layout {
        grid-template-columns: 1fr;
    }

    .news-sidebar {
        order: -1;
    }
}

@media (max-width: 768px) {
    .news-page {
        padding: 20px 0;
    }

    .news-main {
        padding: 20px;
    }

    .news-item {
        flex-direction: column;
    }

    .news-item-image {
        width: 100%;
    }

    .news-item-image img {
        height: 200px;
    }

    .pagination-prev,
    .pagination-next,
    .pagination-page {
        min-width: 32px;
        height: 32px;
        font-size: 13px;
        padding: 0 10px;
    }
}

/* 关于我们页面特有样式 - 规则B（about-前缀） */
.about-page {
    padding: 40px 0;
    background-color: var(--bg-light);
    min-height: 60vh;
}

.about-header {
    background: var(--white);
    padding: 40px 30px;
    border-radius: 8px;
    margin-bottom: 30px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    text-align: center;
}

.about-header h1 {
    font-size: 32px;
    font-weight: 700;
    color: var(--text-color);
    margin-bottom: 10px;
}

.about-subtitle {
    font-size: 16px;
    color: var(--text-light);
}

.about-content {
    background: var(--white);
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.about-section {
    margin-bottom: 40px;
    padding-bottom: 30px;
    border-bottom: 1px solid var(--border-color);
}

.about-section:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.about-section h2 {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 15px;
}

.about-section p {
    font-size: 14px;
    line-height: 1.8;
    color: #666;
    margin-bottom: 10px;
}

.about-section ul {
    margin: 10px 0 10px 20px;
    padding-left: 20px;
}

.about-section li {
    font-size: 14px;
    line-height: 1.8;
    color: #666;
    margin-bottom: 5px;
}

.about-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 20px;
}

.about-feature {
    text-align: center;
    padding: 20px;
    background: var(--bg-light);
    border-radius: 8px;
}

.feature-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--white);
    border-radius: 50%;
    color: var(--primary-color);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.about-feature h3 {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 5px;
}

.about-feature p {
    font-size: 13px;
    margin-bottom: 0;
}

.about-benefits {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 20px;
}

.benefit-item {
    text-align: center;
    padding: 25px 15px;
    background: var(--bg-light);
    border-radius: 8px;
}

.benefit-number {
    font-size: 28px;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 5px;
}

.benefit-label {
    font-size: 13px;
    color: var(--text-light);
}

.contact-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 20px;
}

.contact-card {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 20px;
    background: var(--bg-light);
    border-radius: 8px;
}

.contact-icon {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--white);
    border-radius: 50%;
    color: var(--primary-color);
    flex-shrink: 0;
}

.contact-detail h4 {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 3px;
}

.contact-detail p {
    font-size: 13px;
    margin-bottom: 0;
}

@media (max-width: 992px) {
    .about-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .about-benefits {
        grid-template-columns: repeat(2, 1fr);
    }

    .contact-cards {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .about-page {
        padding: 20px 0;
    }

    .about-header {
        padding: 30px 20px;
    }

    .about-header h1 {
        font-size: 24px;
    }

    .about-content {
        padding: 20px;
    }

    .about-section h2 {
        font-size: 18px;
    }

    .about-grid {
        grid-template-columns: 1fr;
    }

    .about-benefits {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .benefit-item {
        padding: 15px 10px;
    }

    .benefit-number {
        font-size: 22px;
    }
}

/* 产品详情页面特有样式 - 规则B（product-detail-前缀） */
.product-detail-page {
    padding: 30px 0;
    background-color: var(--bg-light);
    overflow-x: hidden;
}

.product-breadcrumb {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 30px;
    font-size: 14px;
    color: #666;
}

.product-breadcrumb a {
    color: #666;
    text-decoration: none;
    transition: color 0.3s;
}

.product-breadcrumb a:hover {
    color: var(--primary-color);
}

.product-breadcrumb span {
    color: #999;
}

.product-detail-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-bottom: 40px;
    background: var(--white);
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}

.product-gallery {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}

/* 缩略图：高度与主图对齐，多图时纵向滚动，避免把详情页拉长 */
.gallery-thumbs {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    flex: 0 0 auto;
    flex-shrink: 0;
    gap: 10px;
    width: 80px;
    max-width: 80px;
    max-height: 500px;
    overflow-x: hidden;
    overflow-y: auto;
    padding-right: 4px;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.25) transparent;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

.gallery-thumbs::-webkit-scrollbar {
    width: 6px;
}

.gallery-thumbs::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}

.gallery-thumbs::-webkit-scrollbar-track {
    background: transparent;
}

.thumb-item {
    flex: 0 0 auto;
    width: 80px;
    height: 80px;
    border: 2px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    overflow: hidden;
    transition: border-color 0.3s;
}

.thumb-item:hover,
.thumb-item.active {
    border-color: var(--primary-color);
}

.thumb-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gallery-main {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    max-height: 500px;
    border-radius: 8px;
    overflow: hidden;
}

.gallery-main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-detail-page .product-info {
    display: flex;
    flex-direction: column;
    padding: 0;
}

.product-title {
    font-size: 22px;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 20px;
    line-height: 1.4;
}

.product-price-section {
    margin-bottom: 15px;
}

.current-price {
    font-size: 28px;
    font-weight: 700;
    color: var(--primary-color);
    margin-right: 10px;
}

.original-price {
    font-size: 16px;
    color: #999;
    text-decoration: line-through;
}

.product-stock {
    margin-bottom: 20px;
}

.stock-status {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 500;
}

.stock-status.in-stock {
    background-color: #e8f5e9;
    color: #2e7d32;
}

/* 详情售卖类提示（售完、库存不足、规格不可售等）；默认不占位，展示时给容器加 .is-visible 并写入文本 */
.product-sell-info-error {
    display: none;
    margin: 0 0 18px;
    padding: 12px 16px;
    font-size: 14px;
    line-height: 1.5;
    color: #b42318;
    background-color: #fef3f2;
    border: 1px solid #fecdca;
    border-radius: 8px;
    box-sizing: border-box;
}

.product-sell-info-error.is-visible {
    display: block;
}

.product-specs {
    margin-bottom: 25px;
    padding-bottom: 25px;
    border-bottom: 1px solid var(--border-color);
}

.spec-row {
    display: flex;
    margin-bottom: 8px;
    font-size: 14px;
}

.spec-label {
    width: 80px;
    color: #999;
    flex-shrink: 0;
}

.spec-value {
    color: var(--text-color);
}

.product-options {
    margin-bottom: 25px;
    padding-bottom: 25px;
    border-bottom: 1px solid var(--border-color);
}

#product-specs {
    scroll-margin-top: 100px;
}

.option-group {
    margin-bottom: 15px;
}

.option-label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-color);
}

.option-values {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.option-btn {
    min-width: 45px;
    height: 40px;
    padding: 0 15px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--white);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s;
}

.option-btn:hover {
    border-color: var(--primary-color);
}

.option-btn.active {
    border-color: var(--primary-color);
    background-color: var(--primary-color);
    color: var(--white);
}

.option-btn.color-btn {
    width: 40px;
    padding: 0;
    border-radius: 50%;
}

.option-btn.color-btn.active {
    box-shadow: 0 0 0 2px var(--primary-color);
    border-color: var(--white);
}

.quantity-control {
    display: flex;
    align-items: center;
    gap: 0;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    overflow: hidden;
}

.qty-btn {
    width: 40px;
    height: 40px;
    border: none;
    background: var(--white);
    font-size: 18px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.qty-btn:hover {
    background-color: var(--bg-light);
}

.qty-input {
    width: 60px;
    height: 40px;
    border: none;
    text-align: center;
    font-size: 14px;
    outline: none;
}

.product-actions {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
}

.product-actions-row {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
}

.quantity-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
}

.quantity-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-color);
}

.quantity-control.inline .qty-input {
    width: 50px;
}

.actions-wrapper {
    display: flex;
    gap: 10px;
}

.btn-add-cart {
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-secondary {
    background-color: #333;
    color: var(--white);
    border: none;
}

.btn-secondary:hover {
    background-color: #555;
}

.product-wishlist {
    margin-bottom: 20px;
}

.wishlist-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 0;
    border: none;
    background: none;
    color: #666;
    font-size: 14px;
    cursor: pointer;
    transition: color 0.3s;
}

.wishlist-btn:hover,
.wishlist-btn.active {
    color: var(--primary-color);
}

.wishlist-btn.active svg {
    fill: var(--primary-color);
}

.product-tabs {
    background: var(--white);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    overflow: hidden;
}

.tabs-header {
    display: flex;
    border-bottom: 1px solid var(--border-color);
}

.tab-btn {
    padding: 15px 25px;
    border: none;
    background: none;
    font-size: 15px;
    font-weight: 500;
    color: #666;
    cursor: pointer;
    transition: all 0.3s;
    position: relative;
}

.tab-btn:hover {
    color: var(--primary-color);
}

.tab-btn.active {
    color: var(--primary-color);
}

.tab-btn.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background-color: var(--primary-color);
}

.tabs-content {
    padding: 30px;
}

.tab-panel {
    display: none;
}

.tab-panel.active {
    display: block;
}

.tab-panel h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 20px;
}

.tab-panel p {
    font-size: 14px;
    line-height: 1.8;
    color: #666;
    margin-bottom: 15px;
}

.product-detail-page .tab-panel img,
.product-detail-page .tab-panel video,
.product-detail-page .tab-panel iframe {
    max-width: 100%;
    height: auto;
}

.tab-panel ul {
    margin-left: 20px;
}

.tab-panel li {
    font-size: 14px;
    line-height: 1.8;
    color: #666;
    margin-bottom: 8px;
}

.spec-groups {
    border: 1px solid var(--border-color);
    border-radius: 4px;
    overflow: hidden;
}

.spec-group {
    margin-bottom: 0;
}

.group-header {
    background-color: #f8f9fa;
    padding: 10px 15px;
    font-weight: 600;
    color: var(--text-color);
    border-bottom: 1px solid var(--border-color);
}

.spec-row {
    display: flex;
    padding: 10px 15px;
    border-bottom: 1px solid var(--border-color);
}

.spec-row:last-child {
    border-bottom: none;
}

.spec-label {
    width: 25%;
    color: #999;
    font-weight: 500;
}

.spec-value {
    width: 75%;
    color: var(--text-color);
}

.review-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.review-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
}

.pagination-btn {
    padding: 8px 16px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--white);
    color: var(--text-color);
    cursor: pointer;
    transition: all 0.3s;
}

.pagination-btn:hover {
    background: var(--primary-color);
    color: var(--white);
    border-color: var(--primary-color);
}

.pagination-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.review-pagination__total {
    min-width: 88px;
    padding: 0 8px;
    font-size: 14px;
    color: #666;
    text-align: center;
    white-space: nowrap;
}

.pagination-numbers {
    display: flex;
    gap: 5px;
}

.page-number {
    width: 36px;
    height: 36px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--white);
    color: var(--text-color);
    cursor: pointer;
    transition: all 0.3s;
}

.page-number:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.page-number.active {
    background: var(--primary-color);
    color: var(--white);
    border-color: var(--primary-color);
}

.review-item {
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
}

.review-item:last-child {
    border-bottom: none;
}

.review-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.review-author {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-color);
}

.review-rating {
    display: flex;
    gap: 2px;
    color: #ffc107;
}

.review-text {
    font-size: 14px;
    line-height: 1.6;
    color: #666;
}

/* ── Product reviews (goods detail tab) ── */
.goods-review-preview-note {
    margin: 0 0 16px;
    padding: 10px 14px;
    font-size: 13px;
    line-height: 1.5;
    color: #8c6d1f;
    background: #fffbe6;
    border: 1px solid #ffe58f;
    border-radius: 6px;
}

.goods-review-title {
    margin-bottom: 18px;
}

/* 商品详情 — 提交评价表单（goods-submit-comment- 前缀，根节点 #goodsSubmitComment） */
#goodsSubmitComment.goods-submit-comment {
    margin-bottom: 28px;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
}

#goodsSubmitComment .goods-submit-comment__guest {
    padding: 20px 22px;
    text-align: center;
}

#goodsSubmitComment .goods-submit-comment__guest-text {
    margin: 0 0 14px;
    font-size: 14px;
    color: #64748b;
    line-height: 1.6;
}

#goodsSubmitComment .goods-submit-comment__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 16px 20px;
    border: none;
    background: #f8fafc;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-color, #0f172a);
    cursor: pointer;
    transition: background 0.2s;
}

#goodsSubmitComment .goods-submit-comment__toggle:hover {
    background: #f1f5f9;
}

#goodsSubmitComment .goods-submit-comment__toggle-icon {
    font-size: 12px;
    color: #94a3b8;
    transition: transform 0.2s;
}

#goodsSubmitComment.is-open .goods-submit-comment__toggle-icon {
    transform: rotate(180deg);
}

#goodsSubmitComment .goods-submit-comment__panel {
    display: none;
    padding: 0 20px 20px;
    border-top: 1px solid var(--border-color, #e2e8f0);
}

#goodsSubmitComment.is-open .goods-submit-comment__panel {
    display: block;
}

#goodsSubmitComment .goods-submit-comment__form {
    padding-top: 18px;
}

#goodsSubmitComment .goods-submit-comment__label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-color, #0f172a);
}

#goodsSubmitComment .goods-submit-comment__textarea {
    width: 100%;
    min-height: 120px;
    padding: 12px 14px;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.6;
    resize: vertical;
    box-sizing: border-box;
}

#goodsSubmitComment .goods-submit-comment__textarea:focus {
    outline: none;
    border-color: var(--primary-color, #e64a19);
}

#goodsSubmitComment .goods-submit-comment__counter {
    margin-top: 6px;
    text-align: right;
    font-size: 12px;
    color: #94a3b8;
}

#goodsSubmitComment .goods-submit-comment__hint {
    margin: 0 0 12px;
    font-size: 13px;
    color: #64748b;
    line-height: 1.5;
}

#goodsSubmitComment .goods-submit-comment__images {
    margin-top: 18px;
}

#goodsSubmitComment .goods-submit-comment__images-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 10px;
    padding: 0;
    list-style: none;
}

#goodsSubmitComment .goods-submit-comment__images-item {
    position: relative;
    width: 72px;
    height: 72px;
}

#goodsSubmitComment .goods-submit-comment__images-thumb {
    width: 100%;
    height: 100%;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border-color, #e2e8f0);
    background: #f8fafc;
}

#goodsSubmitComment .goods-submit-comment__images-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#goodsSubmitComment .goods-submit-comment__images-remove {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 20px;
    height: 20px;
    border: none;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.75);
    color: #fff;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
}

#goodsSubmitComment .goods-submit-comment__images-add {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border: 1px dashed #cbd5e1;
    border-radius: 8px;
    background: #f8fafc;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}

#goodsSubmitComment .goods-submit-comment__images-add:hover {
    border-color: var(--primary-color, #e64a19);
    background: #fff;
}

#goodsSubmitComment .goods-submit-comment__images-add.is-hidden {
    display: none;
}

#goodsSubmitComment .goods-submit-comment__images-add.is-uploading {
    opacity: 0.6;
    pointer-events: none;
}

#goodsSubmitComment .goods-submit-comment__images-add-icon {
    font-size: 22px;
    line-height: 1;
    color: #94a3b8;
}

#goodsSubmitComment .goods-submit-comment__images-add-text {
    margin-top: 4px;
    font-size: 11px;
    color: #64748b;
}

#goodsSubmitComment .goods-submit-comment__actions {
    margin-top: 20px;
}

#goodsSubmitComment .goods-submit-comment__actions .btn {
    min-width: 120px;
}

@media (max-width: 640px) {
    #goodsSubmitComment .goods-submit-comment__guest,
    #goodsSubmitComment .goods-submit-comment__toggle,
    #goodsSubmitComment .goods-submit-comment__panel {
        padding-left: 16px;
        padding-right: 16px;
    }

    #goodsSubmitComment .goods-submit-comment__actions .btn {
        width: 100%;
    }
}

.review-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 24px 32px;
    align-items: flex-start;
    padding: 18px 20px;
    margin-bottom: 16px;
    background: #fafafa;
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

.review-summary__score {
    min-width: 120px;
}

.review-summary__score-value {
    font-size: 36px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--text-color);
}

.review-summary__score-stars {
    margin: 6px 0 4px;
}

.review-summary__count {
    margin: 0;
    font-size: 13px;
    color: #888;
}

.review-summary__breakdown {
    flex: 1;
    min-width: 220px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px 20px;
}

.review-summary__metric {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    font-size: 13px;
}

.review-summary__metric-label {
    color: #666;
}

.review-summary__metric-value {
    font-weight: 600;
    color: var(--text-color);
}

.review-policy-note {
    margin: 0 0 20px;
    font-size: 13px;
    line-height: 1.5;
    color: #999;
}

.review-stars {
    position: relative;
    display: inline-block;
    font-size: 14px;
    line-height: 1;
    letter-spacing: 2px;
}

.review-stars__track {
    color: #e8e8e8;
}

.review-stars__fill {
    position: absolute;
    left: 0;
    top: 0;
    overflow: hidden;
    white-space: nowrap;
    color: #ffc107;
}

.review-case-tag {
    display: inline-block;
    margin-bottom: 10px;
    padding: 2px 8px;
    font-size: 11px;
    line-height: 18px;
    color: #595959;
    background: #f5f5f5;
    border: 1px dashed #d9d9d9;
    border-radius: 4px;
}

.review-item__top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 8px;
}

.review-item__identity {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.review-badge {
    display: inline-block;
    padding: 2px 8px;
    font-size: 11px;
    line-height: 16px;
    border-radius: 4px;
    white-space: nowrap;
}

.review-badge--verified {
    color: #389e0d;
    background: #f6ffed;
    border: 1px solid #b7eb8f;
}

.review-date {
    flex-shrink: 0;
    font-size: 12px;
    color: #999;
}

.review-item__rating-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.review-rating-main {
    font-size: 13px;
    color: #888;
}

.review-variant {
    margin: 0 0 10px;
    font-size: 12px;
    line-height: 1.4;
    color: #999;
}

.review-text--muted {
    font-style: italic;
    color: #aaa;
}

.review-images {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0 0;
}

.review-images__item {
    display: block;
    width: 72px;
    height: 72px;
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    overflow: hidden;
    background: #fafafa;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.review-images__item:hover {
    border-color: var(--primary-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.review-images__item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.review-rating-detail {
    margin-top: 12px;
    font-size: 13px;
}

.review-rating-detail__toggle {
    cursor: pointer;
    color: var(--primary-color);
    user-select: none;
}

.review-rating-detail__toggle:hover {
    text-decoration: underline;
}

.review-rating-detail__list {
    margin: 10px 0 0;
    padding: 12px 14px;
    background: #fafafa;
    border-radius: 6px;
}

.review-rating-detail__row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 0;
}

.review-rating-detail__row dt {
    margin: 0;
    color: #666;
    font-weight: normal;
}

.review-rating-detail__row dd {
    margin: 0;
    font-weight: 500;
    color: var(--text-color);
}

.review-reply {
    margin-top: 14px;
    padding: 12px 14px;
    background: #f6f8fa;
    border-left: 3px solid var(--primary-color);
    border-radius: 0 6px 6px 0;
}

.review-reply__label {
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--primary-color);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.review-reply__text {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    color: #555;
}

.review-empty-preview {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px dashed var(--border-color);
}

.review-empty-preview__label {
    margin: 0 0 12px;
    font-size: 12px;
    font-weight: 600;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.review-empty {
    padding: 36px 20px;
    text-align: center;
    background: #fafafa;
    border: 1px dashed var(--border-color);
    border-radius: 8px;
}

.review-empty__icon {
    display: flex;
    justify-content: center;
    margin-bottom: 12px;
    color: #ccc;
}

.review-empty__title {
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-color);
}

.review-empty__text {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: #888;
}

@media (max-width: 640px) {
    .review-summary {
        flex-direction: column;
    }

    .review-item__top {
        flex-direction: column;
        align-items: flex-start;
    }
}

.related-products-section {
    margin-top: 40px;
    padding-top: 40px;
    border-top: 1px solid var(--border-color);
}

.related-products-section .section-title {
    text-align: center;
    margin-bottom: 30px;
}

.related-products-container {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
}

.related-products-swiper {
    position: relative;
    padding: 0;
}

.related-products-swiper .swiper-slide {
    width: 300px;
    margin-right: 20px;
}

.related-products-prev,
.related-products-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 100;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    color: var(--text-color);
    outline: none;
}

.related-products-prev {
    left: -20px;
}

.related-products-next {
    right: -20px;
}

.related-products-prev:hover,
.related-products-next:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--white);
    box-shadow: 0 4px 12px rgba(255, 102, 0, 0.3);
}

.related-products-prev svg,
.related-products-next svg {
    display: block;
    width: 18px;
    height: 18px;
}

.related-products-pagination {
    text-align: center;
    margin-top: 20px;
}

.related-products-pagination .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background: var(--border-color);
    border-radius: 50%;
    opacity: 1;
    margin: 0 5px;
}

.related-products-pagination .swiper-pagination-bullet-active {
    background: var(--primary-color);
}

@media (max-width: 992px) {
    .product-detail-content {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .product-gallery {
        flex-direction: column;
        width: 100%;
        max-width: 100%;
    }

    .gallery-thumbs {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        order: 2;
        flex: 0 0 auto;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        max-height: none;
        overflow-x: auto;
        overflow-y: hidden;
        padding-right: 0;
        padding-bottom: 6px;
        scrollbar-width: thin;
        scrollbar-color: rgba(0, 0, 0, 0.25) transparent;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
    }

    .gallery-thumbs::-webkit-scrollbar {
        height: 6px;
        width: auto;
    }

    .gallery-thumbs::-webkit-scrollbar-thumb {
        background: rgba(0, 0, 0, 0.2);
        border-radius: 3px;
    }

    .gallery-main {
        order: 1;
        max-height: 400px;
        width: 100%;
        max-width: 100%;
    }

    .thumb-item {
        flex: 0 0 70px;
        width: 70px;
        height: 70px;
    }
}

@media (max-width: 768px) {
    .product-detail-page {
        padding: 20px 0;
    }

    .product-detail-page .container {
        padding-left: 12px;
        padding-right: 12px;
    }

    .product-breadcrumb {
        flex-wrap: wrap;
        gap: 6px 8px;
        margin-bottom: 16px;
        font-size: 12px;
        line-height: 1.5;
    }

    .product-breadcrumb span:last-child {
        flex: 1 1 100%;
        color: var(--text-color);
        word-break: break-word;
    }

    .product-detail-content {
        padding: 16px;
        gap: 20px;
        margin-bottom: 24px;
    }

    .product-title {
        font-size: 18px;
        margin-bottom: 14px;
    }

    .current-price {
        font-size: 24px;
    }

    .original-price {
        font-size: 14px;
    }

    .product-sell-info-error {
        padding: 10px 14px;
        font-size: 13px;
        margin-bottom: 14px;
    }

    .product-specs {
        margin-bottom: 18px;
        padding-bottom: 18px;
    }

    .product-options {
        margin-bottom: 18px;
        padding-bottom: 18px;
    }

    #product-specs {
        scroll-margin-top: 120px;
    }

    .option-btn {
        min-width: 40px;
        height: 36px;
        padding: 0 12px;
        font-size: 13px;
    }

    .product-actions {
        flex-direction: column;
    }

    .product-actions-row {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
    }

    .quantity-wrapper {
        justify-content: space-between;
        margin-bottom: 0;
    }

    .actions-wrapper {
        flex-direction: column;
        width: 100%;
    }

    .btn-add-cart,
    .actions-wrapper .btn-secondary {
        width: 100%;
        justify-content: center;
    }

    .product-tabs {
        border-radius: 8px;
    }

    .tabs-header {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .tabs-header::-webkit-scrollbar {
        display: none;
    }

    .tab-btn {
        flex-shrink: 0;
        padding: 12px 16px;
        font-size: 13px;
        white-space: nowrap;
    }

    .tabs-content {
        padding: 16px;
    }

    .tab-panel h3 {
        font-size: 16px;
        margin-bottom: 14px;
    }

    .spec-groups .spec-row {
        flex-direction: column;
        gap: 4px;
        padding: 10px 12px;
    }

    .spec-groups .spec-label {
        width: auto;
    }

    .related-products-section {
        margin-top: 28px;
        padding-top: 28px;
    }

    .related-products-section .section-title {
        font-size: 18px;
        margin-bottom: 20px;
    }

    .related-products-prev,
    .related-products-next {
        display: none;
    }

    .related-products-swiper .swiper-slide {
        width: auto;
    }

    .related-products-container {
        margin-left: -4px;
        margin-right: -4px;
    }
}

@media (max-width: 480px) {
    .product-detail-page .container {
        padding-left: 10px;
        padding-right: 10px;
    }

    .product-detail-content {
        padding: 12px;
        border-radius: 6px;
    }

    .gallery-main {
        max-height: none;
        aspect-ratio: 1;
        background: #fafafa;
    }

    .gallery-main img {
        object-fit: contain;
    }

    .thumb-item {
        flex: 0 0 60px;
        width: 60px;
        height: 60px;
    }

    .gallery-thumbs {
        gap: 8px;
        padding-bottom: 8px;
    }

    .product-title {
        font-size: 17px;
    }

    .current-price {
        font-size: 22px;
    }

    .tab-btn {
        padding: 10px 14px;
        font-size: 12px;
    }

    .tabs-content {
        padding: 12px;
    }
}

/* 隐私政策页面特有样式 - 规则B（privacy-前缀） */
.privacy-page {
    padding: 40px 0;
    background-color: var(--bg-light);
    min-height: 60vh;
}

.privacy-header {
    background: var(--white);
    padding: 30px;
    border-radius: 8px;
    margin-bottom: 30px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.privacy-header h1 {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-color);
    margin-bottom: 10px;
}

.privacy-date {
    font-size: 14px;
    color: var(--text-light);
}

.privacy-content {
    background: var(--white);
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.privacy-section {
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
}

.privacy-section:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.privacy-section h2 {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 15px;
}

.privacy-section h3 {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-color);
    margin-top: 15px;
    margin-bottom: 10px;
}

.privacy-section p {
    font-size: 14px;
    line-height: 1.8;
    color: #666;
    margin-bottom: 10px;
}

.privacy-section ul {
    margin: 10px 0 10px 20px;
    padding-left: 20px;
}

.privacy-section li {
    font-size: 14px;
    line-height: 1.8;
    color: #666;
    margin-bottom: 5px;
}

@media (max-width: 768px) {
    .privacy-page {
        padding: 20px 0;
    }

    .privacy-header {
        padding: 20px;
    }

    .privacy-header h1 {
        font-size: 22px;
    }

    .privacy-content {
        padding: 20px;
    }

    .privacy-section h2 {
        font-size: 16px;
    }
}

/* 服务条款页面特有样式 - 规则B（terms-前缀） */
.terms-page {
    padding: 40px 0;
    background-color: var(--bg-light);
    min-height: 60vh;
}

.terms-header {
    background: var(--white);
    padding: 30px;
    border-radius: 8px;
    margin-bottom: 30px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.terms-header h1 {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-color);
    margin-bottom: 10px;
}

.terms-date {
    font-size: 14px;
    color: var(--text-light);
}

.terms-content {
    background: var(--white);
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.terms-section {
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
}

.terms-section:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.terms-section h2 {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 15px;
}

.terms-section p {
    font-size: 14px;
    line-height: 1.8;
    color: #666;
    margin-bottom: 10px;
}

.terms-section ul {
    margin: 10px 0 10px 20px;
    padding-left: 20px;
}

.terms-section li {
    font-size: 14px;
    line-height: 1.8;
    color: #666;
    margin-bottom: 5px;
}

.terms-section a {
    color: var(--primary-color);
    text-decoration: none;
}

.terms-section a:hover {
    text-decoration: underline;
}

.contact-info {
    background: var(--bg-light);
    padding: 15px 20px;
    border-radius: 6px;
    margin-top: 10px;
}

.contact-info p {
    margin-bottom: 5px;
}

@media (max-width: 768px) {
    .terms-page {
        padding: 20px 0;
    }

    .terms-header {
        padding: 20px;
    }

    .terms-header h1 {
        font-size: 22px;
    }

    .terms-content {
        padding: 20px;
    }

    .terms-section h2 {
        font-size: 16px;
    }
}

/* 新闻详情页面特有样式 - 规则B（news-detail-前缀） */
.news-detail-page {
    padding: 40px 0;
    background-color: var(--bg-light);
}

.news-detail-breadcrumb {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    font-size: 14px;
    color: #666;
}

.news-detail-breadcrumb a {
    color: #666;
    text-decoration: none;
}

.news-detail-breadcrumb a:hover {
    color: var(--primary-color);
}

.news-detail-breadcrumb-separator {
    color: #ccc;
}

.news-detail-layout {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 30px;
}

.news-detail-main {
    background-color: var(--white);
    padding: 30px;
}

.news-detail-content {
    display: flex;
    flex-direction: column;
}

.news-detail-title {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-color);
    margin-bottom: 20px;
    line-height: 1.4;
}

.news-detail-meta {
    display: flex;
    gap: 20px;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
    flex-wrap: wrap;
}

.news-detail-meta-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 14px;
    color: var(--text-light);
}

.news-detail-meta-icon {
    font-size: 16px;
}

.news-detail-body {
    font-size: 16px;
    line-height: 1.8;
    color: var(--text-color);
}

.news-detail-body p {
    margin-bottom: 20px;
}

.news-detail-body h2 {
    font-size: 22px;
    font-weight: 600;
    color: var(--text-color);
    margin: 30px 0 15px;
}

.news-detail-body ul,
.news-detail-body ol {
    margin-bottom: 20px;
    padding-left: 25px;
}

.news-detail-body ul {
    list-style: disc;
}

.news-detail-body ol {
    list-style: decimal;
}

.news-detail-body li {
    margin-bottom: 10px;
}

.news-detail-sidebar {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

@media (max-width: 992px) {
    .news-detail-layout {
        grid-template-columns: 1fr;
    }

    .news-detail-sidebar {
        order: -1;
    }
}

@media (max-width: 768px) {
    .news-detail-page {
        padding: 20px 0;
    }

    .news-detail-main {
        padding: 20px;
    }

    .news-detail-title {
        font-size: 22px;
    }

    .news-detail-meta {
        gap: 15px;
    }

    .news-detail-body {
        font-size: 15px;
    }

    .news-detail-body h2 {
        font-size: 18px;
    }
}

/* 全局通用组件样式 - 规则A（无前缀） */
.section-title {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 30px;
    text-align: center;
}

.section-title span {
    color: var(--primary-color);
}

.view-more {
    font-size: 14px;
    color: var(--text-light);
    transition: color 0.3s;
}

.view-more:hover {
    color: var(--primary-color);
}

/* 首页特有样式 - 规则B（index-前缀） */
.index-banner-section {
    margin-top: 20px;
    margin-bottom: 50px;
}

.index-banner-swiper {
    width: 100%;
    overflow: hidden;
}

.index-banner-item {
    width: 100%;
    height: 400px;
}

.index-banner-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.index-banner-swiper .swiper-pagination {
    position: absolute !important;
    bottom: 20px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    display: flex !important;
    gap: 10px !important;
    justify-content: center !important;
    width: auto !important;
}

.index-banner-swiper .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: rgba(255,255,255,0.5);
    opacity: 1;
    cursor: pointer;
    transition: background 0.3s;
}

.index-banner-swiper .swiper-pagination-bullet-active {
    background-color: var(--primary-color);
}

.index-products-section {
    margin-bottom: 50px;
}

.index-brand-section {
    margin-bottom: 50px;
}

.index-brand-section .index-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

.index-brand-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
}

.index-brand-grid .brand-card {
    height: auto;
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 15px;
    transition: box-shadow 0.3s, border-color 0.3s;
    text-decoration: none;
    color: var(--text-color);
    overflow: hidden;
}

.index-brand-grid .brand-card:hover {
    box-shadow: 0 3px 15px rgba(0,0,0,0.1);
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.index-brand-grid .brand-card img {
    max-width: 100%;
    max-height: 50px;
    object-fit: contain;
    margin-bottom: 10px;
}

.index-brand-grid .brand-name {
    font-size: 12px;
    font-weight: 500;
    text-align: center;
    display: block;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 首页响应式样式 */
@media (max-width: 992px) {
    .index-brand-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 768px) {
    .index-banner-item {
        height: 300px;
    }

    .index-brand-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 15px;
    }

    .index-brand-grid .brand-card {
        padding: 12px;
    }

    .index-brand-grid .brand-card img {
        max-height: 45px;
    }

    .index-brand-grid .brand-name {
        font-size: 11px;
    }

    .section-title {
        font-size: 20px;
    }
}

@media (max-width: 480px) {
    .index-banner-item {
        height: 200px;
    }

    .index-brand-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .index-brand-grid .brand-card {
        padding: 10px;
    }

    .index-brand-grid .brand-card img {
        max-height: 40px;
    }

    .index-brand-grid .brand-name {
        font-size: 11px;
    }
}

/* 全局通用组件样式 - 规则A（无前缀） */
.products-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.product-card {
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 5px;
    overflow: hidden;
    transition: box-shadow 0.3s, transform 0.3s;
}

.product-card:hover {
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    transform: translateY(-5px);
}

.product-image-link {
    display: block;
    text-decoration: none;
}

.product-image {
    position: relative;
    height: 200px;
    overflow: hidden;
}

.product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.product-card:hover .product-image img {
    transform: scale(1.05);
}

.product-card .product-actions {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    gap: 10px;
    opacity: 0;
    transition: opacity 0.3s;
}

.product-card:hover .product-actions {
    opacity: 1;
}

@media (max-width: 768px) {
    .product-card .product-actions {
        display: none;
    }
    
    .product-card:active .product-actions {
        display: flex;
    }
}

.action-btn {
    width: 45px;
    height: 45px;
    background: var(--white);
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 2px 10px rgba(0,0,0,0.15);
}

.action-btn:hover {
    background: var(--primary-color);
    color: var(--white);
    transform: scale(1.1);
}

.action-btn.active {
    background: var(--primary-color);
    color: var(--white);
}

.action-btn svg {
    width: 20px;
    height: 20px;
}

.product-name-link {
    text-decoration: none;
    color: inherit;
}

.product-name-link:hover .product-name {
    color: var(--primary-color);
}

.product-card .product-info {
    padding: 15px;
}

.product-name {
    font-size: 14px;
    margin-bottom: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.product-price {
    font-size: 18px;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 8px;
}

.product-price .old-price {
    font-size: 13px;
    color: #999;
    text-decoration: line-through;
    margin-left: 8px;
    font-weight: 400;
}

.product-rating {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: #666;
}

.rating-stars {
    color: #f5a623;
}

@media (max-width: 992px) {
    .products-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .products-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .product-image {
        height: 150px;
    }
}

@media (max-width: 480px) {
    .products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .product-image {
        height: 150px;
    }
}

/* 品牌详情页面特有样式 - 规则B（brand-detail-前缀） */
.brand-detail-page {
    padding: 40px 0;
    background-color: var(--bg-light);
}

.brand-detail-breadcrumb {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 30px;
    font-size: 14px;
    color: #666;
}

.brand-detail-breadcrumb a {
    color: #666;
    text-decoration: none;
}

.brand-detail-breadcrumb a:hover {
    color: var(--primary-color);
}

.brand-detail-breadcrumb-separator {
    color: #ccc;
}

.brand-detail-header {
    background: var(--white);
    padding: 30px;
    border-radius: 5px;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    gap: 30px;
}

.brand-detail-logo {
    width: 150px;
    height: 100px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    padding: 10px;
}

.brand-detail-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.brand-detail-info {
    flex: 1;
}

.brand-detail-title {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-color);
    margin-bottom: 10px;
}

.brand-detail-desc {
    font-size: 15px;
    color: var(--text-light);
    line-height: 1.6;
}

.brand-detail-products {
    background: var(--white);
    padding: 30px;
    border-radius: 5px;
}

.brand-detail-section-title {
    font-size: 24px;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 25px;
}

@media (max-width: 768px) {
    .brand-detail-page {
        padding: 20px 0;
    }

    .brand-detail-header {
        padding: 20px;
        flex-direction: column;
        text-align: center;
    }

    .brand-detail-logo {
        width: 120px;
        height: 80px;
    }

    .brand-detail-title {
        font-size: 22px;
    }

    .brand-detail-desc {
        font-size: 14px;
    }

    .brand-detail-products {
        padding: 20px;
    }

    .brand-detail-section-title {
        font-size: 20px;
    }
}

/* 购物车页面特有样式 - 规则B（cart-前缀） */
.cart-page {
    padding: 40px 0;
    background-color: var(--bg-light);
    min-height: 60vh;
}

.cart-breadcrumb {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 30px;
    font-size: 14px;
    color: #666;
}

.cart-breadcrumb a {
    color: #666;
    text-decoration: none;
    transition: color 0.3s;
}

.cart-breadcrumb a:hover {
    color: var(--primary-color);
}

.cart-breadcrumb span {
    color: #999;
}

.cart-title {
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 30px;
    color: var(--text-color);
}

.cart-page-notice {
    margin: -18px 0 22px;
    padding: 12px 16px;
    font-size: 14px;
    line-height: 1.5;
    color: #8a4b12;
    background: #fff8e6;
    border: 1px solid #f0d9a8;
    border-radius: 8px;
}

.cart-content {
    display: grid;
    grid-template-columns: 1fr 350px;
    gap: 30px;
    align-items: start;
}

.cart-list {
    background: var(--white);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    overflow: hidden;
}

/* Cart Table Styles */
.cart-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.cart-table {
    width: 100%;
    min-width: 800px;
    border-collapse: collapse;
    background: white;
}

.cart-table thead {
    background: #f8f8f8;
}

.cart-table th {
    padding: 15px 20px;
    text-align: left;
    font-size: 13px;
    font-weight: 600;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--border-color);
    white-space: nowrap;
}

.cart-table td {
    padding: 15px 20px;
    border-bottom: 1px solid #f5f5f5;
    vertical-align: middle;
}

.cart-table tbody tr:hover {
    background: #fafafa;
}

.cart-table tbody tr:last-child td {
    border-bottom: none;
}

.cart-col-product {
    width: 40%;
}

.cart-col-price,
.cart-col-subtotal {
    text-align: right;
    font-weight: 600;
    color: var(--text-color);
}

.cart-col-quantity {
    text-align: center;
}

.cart-col-image {
    width: 90px;
    text-align: center;
}

.cart-col-checkbox {
    width: 50px;
    text-align: center;
}

.cart-col-action {
    text-align: center;
}

.cart-table .cart-item-image {
    display: inline-block;
    width: 70px;
    height: 70px;
    max-width: 70px;
    max-height: 70px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border-color);
}

.cart-table .cart-item-image img {
    width: 100%;
    height: 100%;
    max-width: 70px;
    max-height: 70px;
    object-fit: cover;
}

.cart-table .cart-item-info {
    flex: 1;
    min-width: 0;
}

.cart-table .cart-item-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-color);
    text-decoration: none;
    line-height: 1.4;
    display: block;
    margin-bottom: 5px;
}

.cart-table .cart-item-variant {
    font-size: 12px;
    color: #999;
}

.cart-table tbody tr.cart-row-unavailable {
    opacity: 0.88;
    background-color: rgba(0, 0, 0, 0.018);
}

.cart-table tbody tr.cart-row-unavailable .cart-item-name {
    color: #888;
}

.cart-table tbody tr.cart-row-unavailable .cart-item-variant {
    color: #aaa;
}

.cart-table .cart-line-issue {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.4;
    color: #c45656;
}

.cart-table .quantity-control {
    display: inline-flex;
    align-items: center;
    background: #fafafa;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    overflow: hidden;
}

.cart-table .quantity-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    font-size: 16px;
    color: #666;
    cursor: pointer;
    transition: background 0.2s;
}

.cart-table .quantity-btn:hover {
    background: #f0f0f0;
}

.cart-table .quantity-input {
    width: 45px;
    height: 32px;
    text-align: center;
    border: none;
    border-left: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
    font-size: 14px;
    font-weight: 600;
    background: transparent;
}

.cart-table .btn-remove {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 68, 68, 0.08);
    border: 1px solid rgba(255, 68, 68, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ff4444;
    cursor: pointer;
    transition: all 0.2s;
}

.cart-item-name:hover {
    color: var(--primary-color);
}

.cart-item-variant {
    font-size: 12px;
    color: #999;
}

.cart-item-price,
.cart-item-subtotal {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-color);
    text-align: center;
}

.cart-item-quantity {
    display: flex;
    justify-content: center;
}

.quantity-control {
    display: flex;
    align-items: center;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    overflow: hidden;
}

.quantity-btn {
    width: 32px;
    height: 32px;
    border: none;
    background: #f8f8f8;
    color: var(--text-color);
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.quantity-btn:hover {
    background: var(--primary-color);
    color: var(--white);
}

.quantity-input {
    width: 40px;
    height: 32px;
    border: none;
    border-left: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
    text-align: center;
    font-size: 14px;
    -moz-appearance: textfield;
}

.quantity-input::-webkit-outer-spin-button,
.quantity-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.cart-item-action {
    display: flex;
    justify-content: center;
}

.btn-remove {
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    color: #999;
    cursor: pointer;
    border-radius: 50%;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-remove:hover {
    background: #fee;
    color: #e74c3c;
}

.cart-list-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background: #f8f8f8;
}

.btn-continue-shopping {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-color);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: color 0.3s;
}

.btn-continue-shopping:hover {
    color: var(--primary-color);
}

.btn-clear-cart {
    padding: 10px 20px;
    border: 1px solid var(--border-color);
    background: var(--white);
    color: #666;
    font-size: 14px;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s;
}

.btn-clear-cart:hover {
    border-color: #e74c3c;
    color: #e74c3c;
}

.cart-summary {
    background: var(--white);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    padding: 25px;
    position: sticky;
    top: 20px;
}

.cart-summary-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--border-color);
}

.cart-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    font-size: 14px;
    color: #666;
}

.cart-summary-value {
    font-weight: 500;
    color: var(--text-color);
}

.cart-summary-divider {
    height: 1px;
    background: var(--border-color);
    margin: 15px 0;
}

.cart-summary-total {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-color);
}

.cart-summary-total .cart-summary-value {
    font-size: 20px;
    color: var(--primary-color);
}

.btn-checkout {
    width: 100%;
    padding: 14px;
    background: var(--primary-color);
    color: var(--white);
    border: none;
    border-radius: 5px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    margin-top: 20px;
}

.btn-checkout:hover {
    background: #5fbf14;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(120, 231, 35, 0.3);
}

.btn-checkout:disabled,
.btn-checkout:disabled:hover {
    background: #bdbdbd;
    color: #666;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.cart-summary-secure {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 15px;
    font-size: 12px;
    color: #999;
}

@media (max-width: 992px) {
    .cart-content {
        grid-template-columns: 1fr;
    }

    .cart-summary {
        position: static;
    }
}

@media (max-width: 768px) {
    .cart-page {
        padding: 15px 0;
    }

    .cart-breadcrumb {
        font-size: 12px;
        margin-bottom: 15px;
    }

    .cart-title {
        font-size: 20px;
        margin-bottom: 20px;
    }

    .cart-page-notice {
        margin: -6px 0 16px;
        padding: 10px 12px;
        font-size: 13px;
    }

    /* 移动端表格样式 */
    .cart-table-wrapper {
        border-radius: 10px;
        border: 1px solid #f0f0f0;
        overflow: hidden;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .cart-table {
        min-width: 500px;
        width: 100%;
    }

    .cart-table th {
        padding: 10px 12px;
        font-size: 11px;
    }

    .cart-table td {
        padding: 10px 12px;
    }

    .cart-col-checkbox {
        width: 40px;
        min-width: 40px;
    }

    .cart-col-image {
        width: 80px;
        min-width: 80px;
    }

    .cart-col-product {
        width: 150px;
        min-width: 150px;
    }

    .cart-col-price {
        width: 60px;
        min-width: 60px;
    }

    .cart-col-quantity {
        width: 80px;
        min-width: 80px;
    }

    .cart-col-subtotal {
        width: 70px;
        min-width: 70px;
    }

    .cart-col-action {
        width: 50px;
        min-width: 50px;
    }

    .cart-table .cart-item-image {
        width: 60px;
        height: 60px;
        max-width: 60px;
        max-height: 60px;
    }

    .cart-table .cart-item-image img {
        max-width: 60px;
        max-height: 60px;
    }

    .cart-table .cart-item-name {
        font-size: 13px;
    }

    .cart-table .cart-item-variant {
        font-size: 11px;
    }

    .cart-table .cart-line-issue {
        font-size: 11px;
    }

    .cart-table .quantity-control {
        transform: scale(0.9);
    }

    .cart-table .btn-remove {
        width: 28px;
        height: 28px;
    }
}

/* Category Page Styles */

    .cart-summary {
        margin-top: 15px;
        padding: 20px;
        background: white;
        border-radius: 10px;
        box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    }

    .cart-summary-title {
        font-size: 18px;
        font-weight: 600;
        margin-bottom: 20px;
        color: var(--text-color);
    }

    .cart-summary-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 0;
        font-size: 14px;
    }

    .cart-summary-row:not(:last-child) {
        border-bottom: 1px solid #f5f5f5;
    }

    .cart-summary-row span:first-child {
        color: #666;
    }

    .cart-summary-value {
        font-weight: 600;
        color: var(--text-color);
    }

    .cart-summary-divider {
        height: 1px;
        background: #e8e8e8;
        margin: 10px 0;
    }

    .cart-summary-row.cart-summary-total {
        padding: 15px 0 5px 0;
        border-bottom: none;
    }

    .cart-summary-total span:first-child {
        font-size: 15px;
        font-weight: 600;
        color: var(--text-color);
    }

    .cart-summary-total .cart-summary-value {
        font-size: 24px;
        font-weight: 700;
        color: var(--primary-color);
    }

    .btn-checkout {
        width: 100%;
        padding: 15px;
        font-size: 15px;
        font-weight: 600;
        border-radius: 8px;
        background: var(--primary-color);
        color: white;
        border: none;
        margin-top: 15px;
        cursor: pointer;
        transition: background 0.3s;
    }

    .btn-checkout:hover {
        opacity: 0.9;
    }

    .btn-checkout:disabled,
    .btn-checkout:disabled:hover {
        background: #bdbdbd;
        color: #666;
        cursor: not-allowed;
    }

    .cart-summary-secure {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        font-size: 12px;
        color: #999;
        margin-top: 12px;
    }
}

/* Category Page Styles */
.category-page {
    padding: 40px 0;
    background-color: var(--bg-light);
    min-height: 60vh;
}

.category-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    /*margin-bottom: 30px;*/
    font-size: 14px;
    color: var(--text-light);
    margin-top : 12px ;
}

.category-breadcrumb a {
    color: var(--text-light);
}

.category-breadcrumb a:hover {
    color: var(--primary-color);
}

.category-breadcrumb span {
    color: #999;
}

.category-content {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 30px;
}

.category-sidebar {
    background-color: var(--white);
    border-radius: 8px;
    padding: 20px;
}

.filter-section {
    margin-bottom: 30px;
}

.filter-section:last-child {
    margin-bottom: 0;
}

.filter-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--border-color);
}

.filter-list {
    list-style: none;
}

.filter-list li {
    margin-bottom: 10px;
}

.filter-list li:last-child {
    margin-bottom: 0;
}

.filter-list a {
    color: var(--text-light);
    font-size: 14px;
    transition: color 0.3s;
}

.filter-list a:hover,
.filter-list a.active {
    color: var(--primary-color);
}

.price-filter {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.price-inputs {
    display: flex;
    align-items: center;
    gap: 10px;
}

.price-from,
.price-to {
    width: 80px;
    padding: 8px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 14px;
    text-align: center;
}

.price-separator {
    color: var(--text-light);
}

.btn-filter {
    background-color: var(--primary-color);
    color: var(--white);
    border: none;
    padding: 10px 15px;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.btn-filter:hover {
    background-color: #66cc1a;
}

/* 三级分类树 */
.category-tree {
    list-style: none;
    padding: 0;
    margin: 0;
}

.category-item {
    margin-bottom: 5px;
}

.category-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.category-link {
    flex: 1;
    padding: 8px 10px;
    color: var(--text-light);
    text-decoration: none;
    font-size: 14px;
    border-radius: 4px;
    transition: all 0.3s;
}

.category-link:hover {
    background-color: var(--bg-light);
    color: var(--text-color);
}

.category-link.active {
    background-color: var(--primary-color);
    color: var(--white);
}

.expand-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    cursor: pointer;
    color: var(--text-light);
    border-radius: 4px;
    transition: all 0.3s;
}

.expand-btn:hover {
    background-color: var(--bg-light);
    color: var(--text-color);
}

.expand-icon {
    flex-shrink: 0;
    transition: transform 0.3s;
}

.category-item.expanded > .category-row .expand-icon {
    transform: rotate(180deg);
}

.category-item:not(.expanded) > .category-children {
    display: none;
}

.category-children {
    list-style: none;
    padding: 0;
    margin: 0;
    padding-left: 15px;
}

.category-children .category-link {
    padding-left: 15px;
    font-size: 13px;
}

.category-children .category-children .category-link {
    padding-left: 25px;
    font-size: 12px;
}

.category-children .expand-icon {
    color: var(--text-light);
}

.filter-checkbox-list {
    list-style: none;
}

.filter-checkbox-list li {
    margin-bottom: 10px;
}

.filter-checkbox-list li:last-child {
    margin-bottom: 0;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 14px;
    color: var(--text-light);
}

.checkbox-label input[type="checkbox"] {
    display: none;
}

.checkmark {
    width: 18px;
    height: 18px;
    border: 2px solid var(--border-color);
    border-radius: 3px;
    position: relative;
    transition: background-color 0.3s;
}

.checkbox-label input[type="checkbox"]:checked + .checkmark {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.checkbox-label input[type="checkbox"]:checked + .checkmark::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 5px;
    height: 9px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: translate(-50%, -50%) rotate(45deg);
}

.category-main {
    background-color: var(--white);
    border-radius: 8px;
    padding: 20px;
}

.category-header {
    margin-bottom: 30px;
}

/* 已选条件展示区（静态结构占位，后续可只改模板 + 样式） */
.category-has-choose-region {
    width: 100%;
    min-width: 0;
    margin-bottom: 12px;
}

.chosen-filters-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px 10px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.chosen-filter-chip {
    position: relative;
    display: inline-flex;
    align-items: flex-start;
    max-width: 100%;
    min-height: 32px;
    padding: 7px 28px 7px 10px;
    font-size: 13px;
    line-height: 1.35;
    color: var(--text-color);
    background-color: var(--bg-light);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    box-sizing: border-box;
}

.chosen-filter-chip-text {
    min-width: 0;
    word-break: break-word;
    padding-top: 1px;
    padding-right: 2px;
}

.chosen-filter-chip-remove {
    position: absolute;
    top: 2px;
    right: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 3px;
    background-color: transparent;
    color: var(--text-light);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    transition: color 0.2s ease, background-color 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

.chosen-filter-chip-remove:hover {
    color: var(--text-color);
    background-color: rgba(0, 0, 0, 0.06);
}

.chosen-filter-chip-remove:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 1px;
}

/* 与站点 .btn-secondary 一致：白底灰边，悬停主色（不抢主按钮视觉） */
.chosen-filters-delete-all {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    box-sizing: border-box;
    min-height: 32px;
    padding: 7px 16px;
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    line-height: 1.2;
    color: var(--text-color);
    background-color: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

.chosen-filters-delete-all:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.chosen-filters-delete-all:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 1px;
}

@media (max-width: 768px) {
    .category-has-choose-region {
        margin-bottom: 10px;
    }

    .chosen-filter-chip {
        font-size: 12px;
        min-height: 30px;
        padding: 6px 26px 6px 9px;
    }

    .chosen-filter-chip-remove {
        width: 20px;
        height: 20px;
        font-size: 15px;
    }

    .chosen-filters-delete-all {
        min-height: 30px;
        padding: 6px 14px;
        font-size: 12px;
    }
}

.category-subtitle {
    font-size: 14px;
    color: var(--text-light);
    margin-bottom: 20px;
}

.current-subcategory {
    color: var(--text-color);
    font-weight: 600;
}

.category-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 15px;
}

.category-info {
    font-size: 14px;
    color: var(--text-light);
}

.sort-dropdown {
    position: relative;
}

.sort-select {
    padding: 10px 40px 10px 15px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 14px;
    color: var(--text-color);
    background-color: var(--white);
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
}

.category-products {
    margin-bottom: 30px;
}

.category-grid {
    grid-template-columns: repeat(4, 1fr);
}

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 30px;
}

.pagination-prev,
.pagination-next {
    padding: 10px 15px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-light);
    font-size: 14px;
    transition: all 0.3s;
}

.pagination-prev:hover,
.pagination-next:hover {
    background-color: var(--hover-bg);
    color: var(--text-color);
}

.pagination-prev.disabled,
.pagination-next.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.pagination-page {
    padding: 10px 15px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-light);
    font-size: 14px;
    transition: all 0.3s;
}

.pagination-page:hover {
    background-color: var(--hover-bg);
    color: var(--text-color);
}

.pagination-page.active {
    background-color: var(--primary-color);
    color: var(--white);
    border-color: var(--primary-color);
}

@media (max-width: 992px) {
    .category-content {
        grid-template-columns: 200px 1fr;
    }

    .category-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .category-page {
        padding: 20px 0;
    }

    .category-content {
        grid-template-columns: 1fr;
    }

    .category-sidebar {
        order: 2;
    }

    .category-main {
        order: 1;
    }

    .category-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .category-toolbar {
        flex-direction: column;
        align-items: flex-start;
    }

    .category-info {
        order: 3;
    }

    .sort-dropdown {
        order: 2;
        width: 100%;
    }

    .sort-select {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .category-grid {
        grid-template-columns: 1fr;
    }
}

/* 移动端筛选按钮 */
.filter-toggle-btn {
    display: none;
    align-items: center;
    gap: 8px;
    padding: 10px 15px;
    background-color: var(--primary-color);
    color: var(--white);
    border: none;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.filter-toggle-btn:hover {
    background-color: #66cc1a;
}

/* 移动端遮罩层 */
.mobile-filter-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
}

.mobile-filter-overlay.active {
    display: block;
}

/* 移动端关闭按钮 */
.mobile-filter-close {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-light);
    padding: 8px;
}

@media (max-width: 768px) {
    .filter-toggle-btn {
        display: flex;
        margin-bottom: 15px;
    }

    .category-sidebar {
        position: fixed;
        top: 0;
        right: -320px;
        width: 320px;
        height: 100%;
        background-color: var(--white);
        z-index: 1001;
        transition: right 0.3s ease;
        overflow-y: auto;
        padding: 0;
        box-shadow: -2px 0 10px rgba(0,0,0,0.1);
    }

    .category-sidebar.active {
        right: 0;
    }

    .category-sidebar .sidebar-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 20px;
        border-bottom: 1px solid var(--border-color);
        background-color: var(--bg-light);
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .category-sidebar .sidebar-header h3 {
        font-size: 18px;
        font-weight: 600;
        color: var(--text-color);
        margin: 0;
    }

    .category-sidebar .sidebar-content {
        padding: 20px;
    }

    .mobile-filter-close {
        display: block;
    }

    .category-content {
        grid-template-columns: 1fr;
    }
}

/* Register Page Styles */
.register-page {
    padding: 40px 0;
    background-color: var(--bg-light);
    min-height: 60vh;
}

.register-breadcrumb {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 30px;
    font-size: 14px;
    color: #666;
}

.register-breadcrumb a {
    color: #666;
    text-decoration: none;
    transition: color 0.3s;
}

.register-breadcrumb a:hover {
    color: var(--primary-color);
}

.register-breadcrumb span {
    color: #999;
}

.register-container {
    display: flex;
    justify-content: center;
}

.register-box {
    background: var(--white);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    padding: 40px;
    width: 100%;
    max-width: 600px;
}

.register-title {
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 10px;
    color: var(--text-color);
    text-align: center;
}

.register-subtitle {
    font-size: 14px;
    color: #999;
    text-align: center;
    margin-bottom: 30px;
}

.register-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-color);
}

.form-input,
.form-select {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 14px;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.form-input:focus,
.form-select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(200, 36, 36, 0.1);
}

.form-input::placeholder {
    color: #bbb;
}

.form-hint {
    font-size: 12px;
    color: #999;
}

.input-with-btn {
    display: flex;
    gap: 10px;
}

.input-with-btn .form-input {
    flex: 1;
}

.btn-send-code {
    padding: 12px 15px;
    font-size: 14px;
    white-space: nowrap;
}

/* Auth Pages Styles (Login, Register, Forgot Password) */
.auth-page {
    padding: 40px 0;
    background-color: var(--bg-light);
    min-height: 60vh;
}

.auth-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.auth-card {
    width: 100%;
    max-width: 420px;
    background: var(--white);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    padding: 40px 30px;
}

.auth-header {
    text-align: center;
    margin-bottom: 30px;
}

.auth-header h1 {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-color);
    margin-bottom: 10px;
}

.auth-header p {
    font-size: 14px;
    color: var(--text-light);
    line-height: 1.6;
}

.auth-form {
    margin-bottom: 20px;
}

.auth-form .form-group {
    margin-bottom: 20px;
}

.auth-footer {
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
}

.auth-footer p {
    font-size: 14px;
    color: var(--text-light);
}

@media (max-width: 768px) {
    .auth-page {
        padding: 20px 0;
    }

    .auth-card {
        padding: 30px 20px;
    }
}

/* Login Page Styles */
.login-page {
    padding: 40px 0;
    background-color: var(--bg-light);
    min-height: 60vh;
}

.login-breadcrumb {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 30px;
    font-size: 14px;
    color: #666;
}

.login-breadcrumb a {
    color: #666;
    text-decoration: none;
    transition: color 0.3s;
}

.login-breadcrumb a:hover {
    color: var(--primary-color);
}

.login-breadcrumb span {
    color: #999;
}

.login-container {
    display: flex;
    justify-content: center;
}

.login-box {
    background: var(--white);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    padding: 40px;
    width: 100%;
    max-width: 450px;
}

.login-title {
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 10px;
    color: var(--text-color);
    text-align: center;
}

.login-subtitle {
    font-size: 14px;
    color: #999;
    text-align: center;
    margin-bottom: 30px;
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.login-options {
    display: flex;
    align-items: center;
}

.checkbox-inline {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.checkbox-inline input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--primary-color);
}

.checkbox-inline span {
    font-size: 14px;
    color: #666;
}

.login-forgot {
    text-align: right;
}

.login-forgot .link {
    color: var(--primary-color);
    text-decoration: none;
    font-size: 14px;
}

.login-forgot .link:hover {
    text-decoration: underline;
}

/* Account Page Styles */
.account-page {
    padding: 40px 0;
    background-color: var(--bg-light);
    min-height: 60vh;
}

.account-breadcrumb {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 30px;
    font-size: 14px;
    color: #666;
}

.account-breadcrumb a {
    color: #666;
    text-decoration: none;
}

.account-breadcrumb a:hover {
    color: var(--primary-color);
}

.account-breadcrumb span {
    color: #999;
}

.account-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 30px;
    align-items: start;
}

.account-sidebar {
    background: var(--white);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    overflow: hidden;
}

.account-user {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 20px;
    background: var(--primary-color);
    color: var(--white);
}

.account-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
}

.account-user-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.account-user-name {
    font-weight: 600;
    font-size: 16px;
}

.account-user-email {
    font-size: 12px;
    opacity: 0.8;
}

.account-menu {
    padding: 15px 0;
}

.account-menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    color: var(--text-color);
    text-decoration: none;
    transition: background 0.3s, color 0.3s;
}

.account-menu-item:hover {
    background: var(--bg-light);
    color: var(--primary-color);
}

.account-menu-item.active {
    background: var(--bg-light);
    color: var(--primary-color);
    border-left: 3px solid var(--primary-color);
}

.account-menu-item svg {
    flex-shrink: 0;
}

.account-content {
    background: var(--white);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    padding: 30px;
    min-width: 0;
    max-width: 100%;
}

.account-content .form-group {
    gap: 10px;
}

.account-tab {
    display: none;
}

.account-tab.active {
    display: block;
}

.account-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--border-color);
}

.account-header h2 {
    font-size: 24px;
    font-weight: 600;
    margin: 0;
}

.dashboard-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 30px;
}

.stat-card {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 20px;
    background: var(--bg-light);
    border-radius: 8px;
}

.stat-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
}

.stat-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.stat-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-color);
}

.stat-label {
    font-size: 14px;
    color: #999;
}

.recent-orders h3 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 15px;
}

.order-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.order-item {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 20px;
    align-items: center;
    padding: 15px;
    background: var(--bg-light);
    border-radius: 6px;
    text-decoration: none;
    color: inherit;
    transition: background 0.3s;
}

a.order-item:hover {
    background: #e8e8e8;
}

.order-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
}

.order-detail-info {
    min-width: 0;
}

.order-detail-info h2 {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 5px;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.order-detail-info .order-date {
    font-size: 14px;
    color: #999;
}

.order-detail-section {
    margin-bottom: 30px;
}

.order-detail-section h3 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 15px;
    color: var(--text-color);
}

.order-detail-items {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
}

.order-detail-item {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px;
    border-bottom: 1px solid var(--border-color);
}

.order-detail-item:last-child {
    border-bottom: none;
}

/* 会员订单详情 — 多商品卡片列表 */
.order-detail-items--cards {
    display: flex;
    flex-direction: column;
    gap: 16px;
    border: none;
    border-radius: 0;
    overflow: visible;
    background: transparent;
}

.order-detail-items--cards .order-detail-item--card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    overflow: hidden;
    background: var(--white);
}

.order-detail-items--cards .order-detail-item--card:last-child {
    border-bottom: 1px solid var(--border-color);
}

.order-detail-item__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    background: var(--bg-light);
    border-bottom: 1px solid var(--border-color);
}

.order-detail-item__index {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-color);
}

.order-detail-item__subtotal {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
}

.order-detail-item__subtotal-label {
    font-size: 12px;
    color: #999;
    white-space: nowrap;
}

.order-detail-item__subtotal-value {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-color);
    white-space: nowrap;
}

.order-detail-item__body {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 16px;
}

.order-detail-item__thumb {
    flex-shrink: 0;
    display: block;
    width: 88px;
    height: 88px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    background: var(--bg-light);
}

.order-detail-item__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.order-detail-item__info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.order-detail-item__name {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.45;
    color: var(--text-color);
    text-decoration: none;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.order-detail-item__name:hover {
    color: var(--primary-color);
}

.order-detail-item__sku,
.order-detail-item__qty {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: #888;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.order-detail-item__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px dashed var(--border-color);
    background: #fafafa;
}

.order-detail-item img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 6px;
}

.order-detail-product {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.order-detail-product .product-name {
    font-weight: 500;
    color: var(--text-color);
    text-decoration: none;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.order-detail-product .product-name:hover {
    color: var(--primary-color);
}

.order-detail-product .product-variant,
.order-detail-product .product-qty {
    font-size: 14px;
    color: #999;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.order-detail-price {
    font-weight: 600;
    color: var(--text-color);
}

.order-detail-summary {
    margin-top: 20px;
    padding: 20px;
    background: var(--bg-light);
    border-radius: 8px;
}

.summary-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    font-size: 14px;
    color: #666;
    min-width: 0;
}

.summary-row > span:first-child {
    flex: 1;
    min-width: 0;
}

.summary-row > span:last-child {
    flex-shrink: 0;
    text-align: right;
}

.summary-row.total {
    margin-top: 10px;
    padding-top: 15px;
    border-top: 1px solid var(--border-color);
    font-size: 16px;
    font-weight: 600;
    color: var(--text-color);
}

.address-info,
.payment-info {
    padding: 20px;
    background: var(--bg-light);
    border-radius: 8px;
}

.address-info p,
.payment-info {
    margin: 0 0 8px 0;
    font-size: 14px;
    color: #666;
    line-height: 1.5;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.address-info .address-name {
    font-weight: 600;
    color: var(--text-color);
}

.order-detail-actions {
    display: flex;
    gap: 15px;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
}

.order-logistics {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
    background: var(--white);
}

.order-logistics-meta {
    padding: 20px;
    background: var(--bg-light);
    border-bottom: 1px solid var(--border-color);
}

.order-logistics-meta__row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 24px;
}

.order-logistics-meta__row + .order-logistics-meta__row {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px dashed var(--border-color);
}

.order-logistics-meta__item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.order-logistics-meta__label {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #999;
}

.order-logistics-meta__value {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-color);
    word-break: break-word;
}

.order-logistics-meta__value--mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 14px;
    font-weight: 500;
    overflow-wrap: anywhere;
    word-break: break-all;
}

.order-logistics-meta__value--status {
    color: #2563eb;
}

.order-logistics-meta__value--highlight {
    color: #15803d;
}

.order-logistics-timeline {
    padding: 24px 20px 8px;
}

.order-logistics-step {
    position: relative;
    display: flex;
    gap: 16px;
    padding-bottom: 24px;
}

.order-logistics-step::before {
    content: "";
    position: absolute;
    left: 7px;
    top: 18px;
    bottom: 0;
    width: 2px;
    background: var(--border-color);
}

.order-logistics-step.is-last::before,
.order-logistics-step:last-child::before {
    display: none;
}

.order-logistics-step__marker {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin-top: 3px;
    border: 2px solid #cbd5e1;
    border-radius: 50%;
    background: var(--white);
}

.order-logistics-step.is-active .order-logistics-step__marker {
    border-color: var(--primary-color);
    background: var(--primary-color);
    box-shadow: 0 0 0 4px rgba(120, 231, 35, 0.18);
}

.order-logistics-step__content {
    flex: 1;
    min-width: 0;
}

.order-logistics-step__time {
    font-size: 13px;
    color: #999;
    margin-bottom: 4px;
}

.order-logistics-step__title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 4px;
}

.order-logistics-step.is-active .order-logistics-step__title {
    color: #111;
}

.order-logistics-step__desc {
    font-size: 14px;
    line-height: 1.5;
    color: #666;
    margin-bottom: 4px;
}

.order-logistics-step__location {
    font-size: 13px;
    color: #999;
}

@media (max-width: 640px) {
    .order-logistics-meta__row {
        grid-template-columns: 1fr;
    }

    .order-logistics-timeline {
        padding-left: 16px;
        padding-right: 16px;
    }
}

.member-popup-body {
    margin: 0;
    background: var(--white);
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}

.order-cancel-page {
    box-sizing: border-box;
    height: 100%;
    padding: 20px 22px 24px;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.order-cancel-form {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.order-cancel-form__body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
}

.order-cancel-form__head {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 18px;
    padding: 14px 16px;
    background: var(--bg-light);
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

.order-cancel-form__label {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #999;
}

.order-cancel-form__sn {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-color);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    word-break: break-all;
}

.order-cancel-form .form-group {
    margin-bottom: 20px;
}

.order-cancel-form__remark {
    min-height: 120px;
    resize: vertical;
}

.order-cancel-form__actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    flex-shrink: 0;
    padding-top: 12px;
    margin-top: auto;
    border-top: 1px solid var(--border-color);
    background: var(--white);
}

@media (max-width: 768px) {
    .order-cancel-page {
        padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    }

    .order-cancel-form__head {
        margin-bottom: 14px;
        padding: 12px 14px;
    }

    .order-cancel-form__remark {
        min-height: 96px;
    }

    .order-cancel-form__actions {
        flex-direction: column-reverse;
        gap: 10px;
    }

    .order-cancel-form__actions .btn {
        width: 100%;
        box-sizing: border-box;
    }
}

.order-comment-page {
    box-sizing: border-box;
    height: 100%;
    min-height: 0;
    padding: 20px 22px 24px;
    display: flex;
    flex-direction: column;
}

.order-comment-form {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    gap: 0;
}

.order-comment-form__body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
}

.order-comment-product {
    display: flex;
    gap: 14px;
    margin-bottom: 20px;
    padding: 14px 16px;
    background: var(--bg-light);
    border: 1px solid var(--border-color);
    border-radius: 10px;
}

.order-comment-product__thumb {
    flex-shrink: 0;
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--white);
}

.order-comment-product__info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.order-comment-product__label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #999;
}

.order-comment-product__name {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--text-color);
}

.order-comment-product__variant {
    margin: 0;
    font-size: 13px;
    color: #777;
}

.order-comment-product__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    margin: 2px 0 0;
    font-size: 12px;
    color: #999;
}

.order-comment-ratings {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 18px;
    padding: 16px;
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 10px;
}

.order-comment-rating {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
}

.order-comment-rating__label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-color);
}

.order-comment-rating__control {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
}

.order-comment-rating__stars {
    display: inline-flex;
    align-items: center;
    gap: 0;
}

.order-comment-star {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: #d5d5d5;
    cursor: pointer;
    transition: color 0.15s ease, transform 0.15s ease, background 0.15s ease;
}

.order-comment-star svg {
    display: block;
    width: 20px;
    height: 20px;
}

.order-comment-star:hover,
.order-comment-star.is-active {
    color: #f5a623;
}

.order-comment-star:hover {
    transform: scale(1.06);
}

.order-comment-star:focus-visible {
    outline: 2px solid rgba(200, 36, 36, 0.35);
    outline-offset: 2px;
}

.order-comment-rating__text {
    font-size: 12px;
    color: #999;
    min-width: 72px;
}

.order-comment-rating.is-rated .order-comment-rating__text {
    color: #b7791f;
    font-weight: 500;
}

.order-comment-form__comment {
    margin-bottom: 20px;
}

.order-comment-form__images {
    margin-bottom: 20px;
}

.order-comment-form__images-hint {
    margin: 0 0 10px;
    font-size: 12px;
    color: #999;
}

.order-comment-images {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 10px;
}

.order-comment-images__list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.order-comment-images__item {
    position: relative;
    width: 72px;
    height: 72px;
}

.order-comment-images__thumb {
    width: 100%;
    height: 100%;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    background: var(--bg-light);
}

.order-comment-images__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.order-comment-images__remove {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 22px;
    height: 22px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
    font-size: 16px;
    line-height: 22px;
    cursor: pointer;
}

.order-comment-images__add {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border: 1px dashed var(--border-color);
    border-radius: 8px;
    background: var(--bg-light);
    color: #888;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s;
}

.order-comment-images__add:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.order-comment-images__add.is-hidden {
    display: none;
}

.order-comment-images__add.is-uploading {
    opacity: 0.6;
    pointer-events: none;
}

.order-comment-images__add-icon {
    font-size: 22px;
    line-height: 1;
    font-weight: 300;
}

.order-comment-images__add-text {
    margin-top: 4px;
    font-size: 10px;
    line-height: 1.2;
    text-align: center;
    max-width: 64px;
}

.order-comment-form__textarea {
    min-height: 110px;
    resize: vertical;
}

.order-comment-form__counter {
    text-align: right;
    font-size: 12px;
    color: #999;
}

.order-comment-form__actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    flex-shrink: 0;
    padding-top: 12px;
    margin-top: auto;
    border-top: 1px solid var(--border-color);
    background: var(--white);
}

.order-card-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.order-product-extra,
.order-detail-item-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.order-detail-item-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    flex-shrink: 0;
}

.order-comment-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 500;
    color: #888;
    background: var(--bg-light);
    border: 1px solid var(--border-color);
    border-radius: 999px;
}

@media (max-width: 768px) {
    .order-comment-page {
        padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    }

    .order-comment-product {
        flex-direction: row;
        align-items: flex-start;
        gap: 12px;
        margin-bottom: 16px;
        padding: 12px 14px;
    }

    .order-comment-product__thumb {
        width: 64px;
        height: 64px;
    }

    .order-comment-product__name {
        font-size: 14px;
    }

    .order-comment-ratings {
        gap: 12px;
        margin-bottom: 16px;
        padding: 14px;
    }

    .order-comment-rating {
        grid-template-columns: 1fr;
        gap: 8px;
        align-items: start;
    }

    .order-comment-rating__control {
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .order-comment-star {
        width: 32px;
        height: 32px;
    }

    .order-comment-star svg {
        width: 22px;
        height: 22px;
    }

    .order-comment-rating__text {
        flex: none;
        min-width: 0;
        text-align: left;
    }

    .order-comment-form__textarea {
        min-height: 96px;
    }

    .order-comment-form__comment,
    .order-comment-form__images {
        margin-bottom: 16px;
    }

    .order-comment-form__actions {
        flex-direction: column-reverse;
        gap: 10px;
        padding-top: 12px;
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    .order-comment-form__actions .btn {
        width: 100%;
        box-sizing: border-box;
    }
}

.avatar-upload {
    margin-bottom: 30px;
    padding: 0;
    background: transparent;
    border: none;
}

.avatar-upload__grid {
    display: grid;
    grid-template-columns: 232px minmax(0, 1fr);
    align-items: start;
    min-height: 0;
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    box-shadow: 0 6px 28px rgba(0, 0, 0, 0.06);
    overflow: hidden;
}

.avatar-upload__preview {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 36px 28px;
    background: linear-gradient(165deg, #fafcfa 0%, #f0f3f1 55%, #eef1ee 100%);
    border-right: 1px solid var(--border-color);
}

.avatar-preview-shell {
    text-align: center;
    max-width: 100%;
}

.avatar-preview-ring {
    display: inline-block;
    padding: 5px;
    border-radius: 50%;
    background: linear-gradient(145deg, rgba(120, 231, 35, 0.35) 0%, rgba(120, 231, 35, 0.08) 45%, var(--white) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        0 10px 28px rgba(0, 0, 0, 0.08);
}

.avatar-preview.avatar-preview--display {
    width: 168px;
    height: 168px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--bg-light);
    border: 3px solid var(--white);
    box-sizing: border-box;
}

.avatar-preview.avatar-preview--display img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar-preview-caption {
    display: block;
    margin-top: 16px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-light);
    letter-spacing: 0.03em;
}

.avatar-upload__editor {
    display: flex;
    flex-direction: column;
    padding: 28px 30px 26px;
    min-width: 0;
    width: 100%;
    background: var(--white);
}

.avatar-editor__head {
    margin-bottom: 18px;
}

.avatar-editor__title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--text-color);
}

.avatar-editor__hint {
    font-size: 14px;
    line-height: 1.55;
    color: var(--text-light);
    margin-bottom: 16px;
    max-width: 36em;
}

.avatar-editor__pick {
    cursor: pointer;
    margin-bottom: 0;
}

.avatar-upload__crop-wrap {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
    position: relative;
}

.avatar-crop-placeholder {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    padding: 16px 16px;
    text-align: center;
    border: 2px dashed var(--border-color);
    border-radius: 12px;
    background: linear-gradient(180deg, #fafafa 0%, #f5f5f5 100%);
    transition: border-color 0.2s ease, background 0.2s ease;
}

.avatar-upload__crop-wrap:hover .avatar-crop-placeholder {
    border-color: #c8e8a8;
    background: linear-gradient(180deg, #fbfff8 0%, #f6faf3 100%);
}

.avatar-upload__crop-wrap.is-cropping .avatar-crop-placeholder {
    display: none;
}

.avatar-crop-placeholder__visual {
    width: 48px;
    height: 48px;
    margin-bottom: 10px;
    border-radius: 12px;
    border: 2px solid var(--border-color);
    background:
        linear-gradient(145deg, transparent 45%, var(--border-color) 45%, var(--border-color) 55%, transparent 55%),
        linear-gradient(55deg, transparent 45%, var(--border-color) 45%, var(--border-color) 55%, transparent 55%);
    opacity: 0.55;
}

.avatar-crop-placeholder__text {
    font-size: 14px;
    line-height: 1.5;
    color: #9a9a9a;
    max-width: 22rem;
}

.avatar-crop-host {
    box-sizing: border-box;
    width: 100%;
    max-width: min(360px, 100%);
    margin: 0 auto;
    aspect-ratio: 1;
    min-height: 0;
    background: #e8eaed;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    overflow: hidden;
}

.avatar-crop-host cropper-canvas {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    box-sizing: border-box;
    background-color: #e8eaed;
}

@supports not (aspect-ratio: 1) {
    .avatar-crop-host {
        height: 280px;
        max-width: 280px;
    }
}

.avatar-crop-panel {
    display: none;
    flex: 0 0 auto;
    align-self: stretch;
    flex-direction: column;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
    background: var(--white);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

.avatar-crop-panel.is-open {
    display: flex;
}

.avatar-crop-panel__head {
    flex-shrink: 0;
    padding: 11px 16px;
    background: linear-gradient(180deg, #f9faf9 0%, #f2f4f2 100%);
    border-bottom: 1px solid var(--border-color);
}

.avatar-crop-panel__label {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-color);
}

.avatar-crop-panel-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 14px 16px;
    background: var(--white);
    border-top: 1px solid var(--border-color);
}

@media (max-width: 768px) {
    .avatar-upload__grid {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .avatar-upload__preview {
        border-right: none;
        border-bottom: 1px solid var(--border-color);
        padding: 28px 20px;
    }

    .avatar-upload__editor {
        padding: 22px 18px 24px;
    }
}

.btn-outline {
    background: transparent;
    border: 1px solid var(--border-color);
    color: #666;
}

.btn-outline:hover {
    background: var(--bg-light);
    border-color: #ccc;
    color: var(--text-color);
}

.password-form {
    max-width: 500px;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.email-form {
    max-width: 500px;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.address-form {
    max-width: 600px;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.address-form .form-row--mobile {
    grid-template-columns: minmax(130px, 168px) 1fr;
    align-items: end;
}

.address-form .form-row--mobile .form-group {
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .address-form .form-row--mobile {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.form-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.form-checkbox input {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.email-display {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 12px 0;
}

.email-text {
    font-size: 15px;
    color: var(--text-color);
}

.order-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.order-id {
    font-weight: 600;
    color: var(--text-color);
}

.order-date {
    font-size: 13px;
    color: #999;
}

.order-status {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
}

.order-status.completed {
    background: #e8f5e9;
    color: #2e7d32;
}

.order-status.pending {
    background: #fff3e0;
    color: #f57c00;
}

.order-status.processing {
    background: #e3f2fd;
    color: #1565c0;
}

.order-status.failed {
    background: #ffebee;
    color: #c62828;
}

.order-status.cancelled {
    background: #f5f5f5;
    color: #757575;
}

.order-total {
    font-weight: 600;
    color: var(--text-color);
}

.orders-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.order-card {
    display: block;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: box-shadow 0.3s, border-color 0.3s;
}

.order-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    border-color: var(--primary-color);
}

.order-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background: var(--bg-light);
}

.order-card-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.order-card-content {
    padding: 20px;
}

.order-product {
    display: flex;
    align-items: center;
    gap: 15px;
}

.order-product img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 6px;
}

.order-product-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.order-product-name {
    font-weight: 500;
    color: var(--text-color);
    overflow-wrap: anywhere;
    word-break: break-word;
}

.order-product-qty {
    font-size: 14px;
    color: #999;
}

.order-product-price {
    font-weight: 600;
}

.order-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-top: 1px solid var(--border-color);
}

.order-actions {
    display: flex;
    gap: 10px;
}

.order-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
}

.order-filter-item {
    padding: 8px 16px;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    font-size: 13px;
    color: var(--text-light);
    text-decoration: none;
    transition: all 0.3s;
}

.order-filter-item:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.order-filter-item.active {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--white);
}

.order-detail-link {
    color: var(--primary-color);
    font-size: 14px;
    font-weight: 500;
}

.order-total-label {
    font-size: 14px;
    color: #666;
}

.order-total-label strong {
    font-size: 16px;
    color: var(--text-color);
}

.btn-sm {
    padding: 8px 16px;
    font-size: 13px;
}

.wishlist-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.wishlist-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
    background: var(--white);
    transition: box-shadow 0.3s, border-color 0.3s;
}

.wishlist-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border-color: #d1d5db;
}

.wishlist-card__actions {
    padding: 0 12px 12px;
    margin-top: auto;
}

.wishlist-card__remove-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-light);
    color: #666;
    font-size: 13px;
    line-height: 1.4;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s, background 0.2s;
}

.wishlist-card__remove-btn:hover {
    color: #374151;
    border-color: #cbd5e1;
    background: #fff;
}

.wishlist-card__remove-btn svg {
    flex-shrink: 0;
    display: block;
}

.member-wishlist-page .wishlist-card__remove-btn.active {
    color: #666;
}

.member-wishlist-page .wishlist-card__remove-btn.active svg {
    fill: none;
}

.wishlist-item {
    display: block;
    border: none;
    border-radius: 0;
    overflow: hidden;
    cursor: pointer;
    transition: none;
}

.wishlist-item:hover {
    box-shadow: none;
    border-color: transparent;
}

.wishlist-image img {
    width: 100%;
    height: 180px;
    object-fit: cover;
}

.wishlist-info {
    padding: 15px;
}

.wishlist-info h4 {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 8px;
}

.wishlist-price {
    font-size: 18px;
    font-weight: 600;
    color: var(--primary-color);
}

.wishlist-item .btn {
    width: 100%;
    border-radius: 0;
}

.address-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.address-list-empty {
    padding: 40px 20px;
    text-align: center;
    color: var(--text-light);
    background: var(--bg-light);
    border-radius: 8px;
    border: 1px dashed var(--border-color);
}

.address-card-content .address-email {
    font-size: 14px;
    color: var(--text-light);
    word-break: break-all;
}

.address-card {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
}

.address-card.default {
    border-color: var(--primary-color);
}

.address-card-header {
    padding: 12px 15px;
    background: var(--bg-light);
    border-bottom: 1px solid var(--border-color);
}

.address-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--primary-color);
}

.address-card-content {
    padding: 15px;
}

.address-card-content p {
    margin: 0 0 8px 0;
    font-size: 14px;
    color: #666;
    line-height: 1.5;
}

.address-card-content .address-name {
    font-weight: 600;
    color: var(--text-color);
}

.address-card-footer {
    display: flex;
    gap: 20px;
    padding: 12px 15px;
    border-top: 1px solid var(--border-color);
}

.settings-form {
    max-width: 600px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.settings-form .form-row--mobile {
    grid-template-columns: minmax(130px, 168px) 1fr;
    align-items: end;
}

.settings-form .form-row--mobile .form-group {
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .settings-form .form-row--mobile {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

.settings-form .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.form-actions {
    margin-top: 0;
    padding-top: 24px;
    border-top: 1px solid var(--border-color);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
}

.account-menu-toggle {
    display: none;
    align-items: center;
    gap: 8px;
    padding: 10px 15px;
    background-color: var(--primary-color);
    color: var(--white);
    border: none;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.account-menu-toggle:hover {
    background-color: #66cc1a;
}

.account-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
}

.account-overlay.active {
    display: block;
}

.account-sidebar-header {
    display: none;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid var(--border-color);
}

.account-sidebar-header h3 {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
}

.account-sidebar-close {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-light);
    padding: 8px;
}

@media (max-width: 992px) {
    .account-layout {
        grid-template-columns: 1fr;
    }

    .account-menu-toggle {
        display: flex;
        margin-bottom: 15px;
    }

    .account-sidebar {
        position: fixed;
        top: 0;
        left: -300px;
        width: 300px;
        height: 100%;
        background-color: var(--white);
        z-index: 1001;
        transition: left 0.3s ease;
        overflow-y: auto;
        padding: 0;
        border-radius: 0;
        box-shadow: 2px 0 10px rgba(0,0,0,0.1);
    }

    .account-sidebar.active {
        left: 0;
    }

    .account-sidebar-header {
        display: flex;
    }

    .account-sidebar-close {
        display: block;
    }

    .account-sidebar {
        order: 2;
        border-radius: 8px;
        margin-top: 20px;
    }

    .account-content {
        order: 1;
    }

    .dashboard-stats {
        grid-template-columns: 1fr;
    }

    .wishlist-grid,
    .address-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .account-page {
        padding: 15px 0;
    }

    .account-breadcrumb {
        font-size: 12px;
        margin-bottom: 15px;
    }

    .account-sidebar {
        display: block;
        margin-top: 15px;
    }

    .account-user {
        padding: 15px;
    }

    .account-user-name {
        font-size: 14px;
    }

    .account-user-email {
        font-size: 11px;
    }

    .account-menu {
        display: flex;
        flex-wrap: wrap;
        padding: 10px 0;
    }

    .account-menu-item {
        padding: 10px 15px;
        font-size: 13px;
        flex: 1 1 auto;
        min-width: 50%;
        border-left: none;
        border-bottom: 2px solid transparent;
    }

    .account-menu-item.active {
        border-left: none;
        border-bottom: 2px solid var(--primary-color);
    }

    .account-menu-item svg {
        width: 16px;
        height: 16px;
    }

    .account-content {
        padding: 15px;
    }

    .account-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .account-header h2 {
        font-size: 20px;
    }

    .orders-list,
    .order-card {
        min-width: 0;
        max-width: 100%;
    }

    .order-card-header {
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 10px;
        padding: 12px 15px;
    }

    .order-card-info {
        flex: 1 1 auto;
        min-width: 0;
    }

    .order-id {
        overflow-wrap: anywhere;
        word-break: break-all;
    }

    .order-status {
        flex-shrink: 0;
        max-width: 100%;
    }

    .order-card-content {
        padding: 15px;
    }

    .order-product {
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 12px;
    }

    .order-product img {
        width: 64px;
        height: 64px;
        flex-shrink: 0;
    }

    .order-product-info {
        flex: 1 1 calc(100% - 76px);
    }

    .order-product-price {
        flex: 1 1 100%;
        text-align: right;
        margin-top: 4px;
        padding-top: 10px;
        border-top: 1px dashed var(--border-color);
    }

    .order-product-extra {
        justify-content: flex-start;
        width: 100%;
    }

    .order-card-footer {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        padding: 12px 15px;
    }

    .order-actions {
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .order-total-label {
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .order-filter {
        gap: 8px;
    }

    .order-filter-item {
        font-size: 12px;
        padding: 6px 12px;
    }

    .account-content .order-detail-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        margin-bottom: 22px;
        padding-bottom: 16px;
    }

    .account-content .order-detail-info h2 {
        font-size: 18px;
        line-height: 1.35;
    }

    .account-content .order-detail-info .order-date {
        font-size: 13px;
    }

    .account-content .order-status {
        align-self: flex-start;
        max-width: 100%;
    }

    .account-content .order-detail-section {
        margin-bottom: 22px;
    }

    .account-content .order-detail-section h3 {
        font-size: 16px;
        margin-bottom: 12px;
    }

    .account-content .order-detail-items--cards {
        gap: 12px;
    }

    .account-content .order-detail-item__head {
        flex-wrap: wrap;
        padding: 10px 14px;
    }

    .account-content .order-detail-item__subtotal {
        margin-left: auto;
    }

    .account-content .order-detail-item__body {
        padding: 14px;
        gap: 12px;
    }

    .account-content .order-detail-item__thumb {
        width: 72px;
        height: 72px;
    }

    .account-content .order-detail-item__name {
        font-size: 14px;
    }

    .account-content .order-detail-item__foot {
        justify-content: flex-start;
        padding: 10px 14px;
    }

    .account-content .order-detail-item__foot .btn {
        flex: 1 1 auto;
    }

    .account-content .order-detail-price {
        font-size: 15px;
    }

    .account-content .order-detail-summary {
        margin-top: 14px;
        padding: 14px;
    }

    .account-content .summary-row {
        font-size: 13px;
        padding: 6px 0;
    }

    .account-content .summary-row.total {
        font-size: 15px;
        padding-top: 12px;
    }

    .account-content .address-info {
        padding: 14px;
    }

    .account-content .address-info p {
        font-size: 13px;
    }

    .account-content .order-logistics-meta {
        padding: 14px;
    }

    .account-content .order-logistics-meta__row {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .account-content .order-logistics-meta__row + .order-logistics-meta__row {
        margin-top: 12px;
        padding-top: 12px;
    }

    .account-content .order-logistics-meta__value {
        font-size: 14px;
    }

    .account-content .order-logistics-timeline {
        padding: 18px 14px 6px;
    }

    .account-content .order-logistics-step {
        gap: 12px;
        padding-bottom: 18px;
    }

    .account-content .order-logistics-step__title,
    .account-content .order-logistics-step__location {
        font-size: 14px;
        word-break: break-word;
    }

    .account-content .order-detail-actions {
        flex-direction: column;
        gap: 10px;
        margin-top: 22px;
        padding-top: 16px;
    }

    .account-content .order-detail-actions .btn {
        display: block;
        width: 100%;
        box-sizing: border-box;
        text-align: center;
    }

    .order-item {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .settings-form .form-row {
        grid-template-columns: 1fr;
    }
}

.login-divider {
    text-align: center;
    position: relative;
    margin: 25px 0;
}

.login-divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--border-color);
}

.login-divider span {
    position: relative;
    background: var(--white);
    padding: 0 15px;
    color: #999;
    font-size: 14px;
}

.social-login {
    display: flex;
    gap: 15px;
}

.btn-social {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 20px;
    border: 1px solid var(--border-color);
    background: var(--white);
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.3s, border-color 0.3s;
    text-decoration: none;
    color: inherit;
    box-sizing: border-box;
}

.btn-oauth-icon {
    object-fit: contain;
    flex-shrink: 0;
    display: block;
}

.btn-social:hover {
    background: var(--bg-light);
    border-color: #ccc;
}

.login-footer {
    margin-top: 20px;
    text-align: center;
    font-size: 14px;
    color: #666;
}

.login-footer .link {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 500;
}

.login-footer .link:hover {
    text-decoration: underline;
}

@media (max-width: 768px) {
    .login-box {
        padding: 30px 20px;
    }

    .login-title {
        font-size: 24px;
    }

    .social-login {
        flex-direction: column;
    }
}

.form-checkbox {
    flex-direction: row;
    align-items: flex-start;
    gap: 10px;
}

.form-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--primary-color);
    margin-top: 2px;
}

.checkbox-label {
    font-size: 14px;
    color: #666;
    cursor: pointer;
}

.checkbox-label .link {
    color: var(--primary-color);
    text-decoration: none;
}

.checkbox-label .link:hover {
    text-decoration: underline;
}

.btn-block {
    width: 100%;
    padding: 14px 20px;
    font-size: 16px;
}

.register-footer {
    margin-top: 20px;
    text-align: center;
    font-size: 14px;
    color: #666;
}

.register-footer .link {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 500;
}

.register-footer .link:hover {
    text-decoration: underline;
}

@media (max-width: 768px) {
    .register-page {
        padding: 20px 0;
    }

    .register-breadcrumb {
        font-size: 12px;
        margin-bottom: 20px;
    }

    .register-box {
        padding: 20px 15px;
        border-radius: 8px;
    }

    .form-row {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .register-title {
        font-size: 22px;
    }

    .register-subtitle {
        font-size: 13px;
    }

    .register-form {
        gap: 15px;
    }

    .form-group {
        gap: 6px;
    }

    .form-label {
        font-size: 13px;
    }

    .form-input,
    .form-select {
        padding: 10px 12px;
        font-size: 14px;
    }

    .input-with-btn {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .input-with-btn .form-input {
        width: 100%;
    }

    .input-with-btn .btn-send-code {
        width: 100%;
        padding: 10px;
    }

    .form-checkbox {
        flex-direction: row;
        align-items: flex-start;
        gap: 8px;
    }

    .checkbox-label {
        font-size: 12px;
        line-height: 1.4;
    }

    .register-footer {
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .register-box {
        padding: 15px 12px;
    }

    .register-title {
        font-size: 20px;
    }

    .register-breadcrumb {
        font-size: 11px;
    }
}

/* 搜索结果页面特有样式 - 规则B（search-前缀） */
.search-page {
    padding: 40px 0;
    background-color: var(--bg-light);
    min-height: 60vh;
}

.search-header {
    margin-bottom: 30px;
}

.search-header h1 {
    font-size: 28px;
    font-weight: 600;
    color: var(--text-color);
    margin: 0 0 10px 0;
}

.search-query {
    font-size: 16px;
    color: var(--text-light);
    margin: 0 0 5px 0;
}

.search-query span {
    font-weight: 600;
    color: var(--primary-color);
}

.result-count {
    font-size: 14px;
    color: #999;
    margin: 0;
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 25px;
    margin-bottom: 40px;
}

@media (max-width: 768px) {
    .search-page {
        padding: 20px 0;
    }

    .search-header h1 {
        font-size: 22px;
    }

    .product-grid {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 20px;
    }
}

/* Checkout Page Styles */
.checkout-page {
    padding: 40px 0;
    background-color: var(--bg-light);
    min-height: 60vh;
}

.checkout-breadcrumb {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 30px;
    font-size: 14px;
    color: #666;
}

.checkout-breadcrumb a {
    color: var(--text-light);
    text-decoration: none;
}

.checkout-breadcrumb a:hover {
    color: var(--primary-color);
}

.checkout-title {
    font-size: 28px;
    font-weight: 600;
    color: var(--text-color);
    margin: 0 0 30px 0;
}

.checkout-steps {
    display: flex;
    align-items: center;
    margin-bottom: 40px;
    padding: 20px;
    background: var(--white);
    border-radius: 8px;
}

.checkout-step {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    position: relative;
}

.checkout-step:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: calc(100% - 120px);
    height: 2px;
    background: var(--border-color);
    margin-left: 100px;
}

.checkout-step.active .step-number {
    background: var(--primary-color);
    color: var(--white);
}

.checkout-step.active .step-text {
    color: var(--primary-color);
    font-weight: 600;
}

.checkout-step.active:not(:last-child)::after {
    background: var(--primary-color);
}

.step-number {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--border-color);
    color: var(--text-light);
    border-radius: 50%;
    font-weight: 600;
    font-size: 14px;
}

.step-text {
    font-size: 14px;
    color: var(--text-light);
}

.checkout-layout {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 30px;
}

.checkout-main {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.checkout-section {
    background: var(--white);
    padding: 25px;
    border-radius: 8px;
}

.checkout-section .section-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-color);
    margin: 0 0 20px 0;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--border-color);
}

.saved-addresses {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 20px;
}

.checkout-address-loading,
.checkout-address-empty,
.checkout-goods-loading,
.checkout-goods-empty,
.checkout-goods-error {
    font-size: 14px;
    color: var(--text-light);
    margin-bottom: 16px;
    padding: 12px 0;
}

.checkout-goods-error {
    color: #c84a32;
}

.checkout-address-empty,
.checkout-goods-empty {
    border: 1px dashed var(--border-color);
    border-radius: 8px;
    text-align: center;
    padding: 20px 16px;
    line-height: 1.5;
}

.checkout-inline-address-slot {
    margin-top: 16px;
}

.checkout-address-actions-block {
    margin-bottom: 20px;
}

.checkout-inline-address-panel {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
}

.checkout-address-form-title {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 16px 0;
    color: var(--text-color);
}

.checkout-address-form-loading {
    font-size: 14px;
    color: var(--text-light);
    margin-bottom: 12px;
}

.saved-address-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 18px;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.3s, background 0.3s;
}

.saved-address-item:hover {
    border-color: #ccc;
}

.saved-address-item.selected {
    border-color: var(--primary-color);
    background: rgba(230, 74, 25, 0.03);
}

.address-radio input {
    display: none;
}

.radio-custom {
    width: 20px;
    height: 20px;
    border: 2px solid var(--border-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
    transition: border-color 0.3s;
}

.saved-address-item.selected .radio-custom {
    border-color: var(--primary-color);
}

.saved-address-item.selected .radio-custom::after {
    content: '';
    width: 10px;
    height: 10px;
    background: var(--primary-color);
    border-radius: 50%;
}

.address-info {
    flex: 1;
}

.address-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.address-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-color);
}

.address-default {
    font-size: 11px;
    color: var(--white);
    background: var(--primary-color);
    padding: 2px 8px;
    border-radius: 3px;
}

.address-detail {
    font-size: 13px;
    color: var(--text-light);
    margin: 0 0 3px 0;
    line-height: 1.4;
}

.address-phone {
    font-size: 13px;
    color: var(--text-light);
    margin: 5px 0 0 0;
}

.address-actions {
    display: flex;
    gap: 8px;
}

.btn-edit-address {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--white);
    color: var(--text-light);
    cursor: pointer;
    transition: border-color 0.3s, color 0.3s;
    text-decoration: none;
    box-sizing: border-box;
}

.btn-edit-address:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.btn-add-address {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 14px;
    border: 2px dashed var(--border-color);
    background: transparent;
    color: var(--text-light);
}

.btn-add-address:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
    background: rgba(230, 74, 25, 0.03);
}

.checkout-form .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

/* Chrome: avoid clipped <select> text when height + padding conflict (e.g. old layui-input rules) */
.checkout-form select.form-input {
    min-height: calc(12px * 2 + 1.4286em + 2px);
    height: auto;
    line-height: 1.4286;
    box-sizing: border-box;
    padding-right: 2.25rem;
}

.checkout-form .form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
}

.form-textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 14px;
    font-family: inherit;
    resize: vertical;
    min-height: 80px;
    transition: border-color 0.3s;
}

.form-textarea:focus {
    outline: none;
    border-color: var(--primary-color);
}

.promo-form {
    display: flex;
    gap: 10px;
}

.promo-form .form-input {
    flex: 1;
}

.promo-form .btn {
    white-space: nowrap;
}

/* Payment Page Styles */
.payment-page {
    padding: 40px 0;
    background-color: var(--bg-light);
    min-height: 60vh;
}

.payment-breadcrumb {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 30px;
    font-size: 14px;
    color: #666;
}

.payment-breadcrumb a {
    color: var(--text-light);
    text-decoration: none;
}

.payment-breadcrumb a:hover {
    color: var(--primary-color);
}

.payment-title {
    font-size: 28px;
    font-weight: 600;
    color: var(--text-color);
    margin: 0 0 30px 0;
}

.payment-layout {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 30px;
}

/* Payment Page Styles */
.payment-page {
    padding: 40px 0;
    background-color: var(--bg-light);
    min-height: 60vh;
}

.payment-box {
    max-width: 500px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.payment-breadcrumb {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 30px;
    font-size: 14px;
    color: #666;
}

.payment-breadcrumb a {
    color: var(--text-light);
    text-decoration: none;
}

.payment-breadcrumb a:hover {
    color: var(--primary-color);
}

.payment-title {
    font-size: 28px;
    font-weight: 600;
    color: var(--text-color);
    margin: 0 0 30px 0;
}

.payment-section {
    background: var(--white);
    padding: 20px;
    border-radius: 8px;
}

.payment-section .section-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-color);
    margin: 0 0 15px 0;
}

.order-info {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.info-label {
    font-size: 14px;
    color: var(--text-light);
}

.info-value {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-color);
}

.info-value.price {
    font-size: 18px;
    font-weight: 600;
    color: var(--primary-color);
}

.payment-options {
    display: flex;
    gap: 12px;
}

.payment-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border: 2px solid var(--border-color);
    border-radius: 6px;
    cursor: pointer;
    transition: border-color 0.3s, background 0.3s;
    flex: 1;
    justify-content: center;
}

.payment-option:hover {
    border-color: #ccc;
}

.payment-option.selected {
    border-color: var(--primary-color);
    background: rgba(230, 74, 25, 0.03);
}

.payment-option input {
    display: none;
}

.option-radio {
    width: 18px;
    height: 18px;
    border: 2px solid var(--border-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.payment-option.selected .option-radio {
    border-color: var(--primary-color);
}

.payment-option.selected .option-radio::after {
    content: '';
    width: 10px;
    height: 10px;
    background: var(--primary-color);
    border-radius: 50%;
}

.option-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 32px;
    color: var(--text-light);
}

.option-icon img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

.payment-option.selected .option-icon {
    color: var(--primary-color);
}

.option-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-color);
}

.payment-secure svg {
    color: #2daa2d;
}

.payment-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.payment-secure {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-light);
}

@media (max-width: 768px) {
    .payment-page {
        padding: 20px 0;
    }

    .payment-breadcrumb {
        font-size: 12px;
        margin-bottom: 15px;
    }

    .payment-title {
        font-size: 22px;
        margin-bottom: 20px;
    }

    .payment-section {
        padding: 15px;
    }

    .payment-options {
        flex-direction: column;
    }

    .payment-option {
        justify-content: flex-start;
    }

    .card-form .form-row {
        grid-template-columns: 1fr;
    }
}

/* 支付同步回跳结果页 — pay-result- 前缀，根节点 .pay-result-page */
.pay-result-page {
    padding: 48px 0 64px;
}

.pay-result-page .pay-result-card {
    max-width: 640px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 32px 28px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}

.pay-result-page .pay-result-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 700;
    margin: 0 auto 16px;
}

.pay-result-page .pay-result-icon--success { color: #15803d; background: #dcfce7; }
.pay-result-page .pay-result-icon--pending { color: #b45309; background: #fef3c7; }
.pay-result-page .pay-result-icon--cancelled { color: #64748b; background: #f1f5f9; }
.pay-result-page .pay-result-icon--closed { color: #64748b; background: #f1f5f9; }
.pay-result-page .pay-result-icon--error { color: #b91c1c; background: #fee2e2; }

.pay-result-page .pay-result-title {
    margin: 0 0 8px;
    font-size: 24px;
    line-height: 1.35;
    text-align: center;
    color: #0f172a;
}

.pay-result-page .pay-result-desc {
    margin: 0 0 24px;
    text-align: center;
    color: #64748b;
    font-size: 14px;
    line-height: 1.65;
}

.pay-result-page .pay-result-info {
    border-top: 1px solid #eef2f7;
    padding-top: 18px;
}

.pay-result-page .pay-result-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 0;
    border-bottom: 1px dashed #eef2f7;
    font-size: 14px;
    line-height: 1.5;
}

.pay-result-page .pay-result-row:last-child {
    border-bottom: none;
}

.pay-result-page .pay-result-label {
    color: #64748b;
    flex-shrink: 0;
}

.pay-result-page .pay-result-value {
    color: #0f172a;
    text-align: right;
    word-break: break-all;
}

.pay-result-page .pay-result-value--price {
    color: #0f766e;
    font-weight: 600;
}

.pay-result-page .pay-result-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 28px;
}

.pay-result-page .pay-result-actions .btn {
    width: 100%;
    min-width: 0;
    padding: 10px 14px;
    font-size: 13px;
    line-height: 1.4;
    white-space: normal;
}

.pay-result-page .pay-result-tip {
    margin-top: 20px;
    padding: 12px 14px;
    border-radius: 8px;
    background: #f8fafc;
    color: #64748b;
    font-size: 13px;
    line-height: 1.6;
}

@media (max-width: 640px) {
    .pay-result-page .pay-result-card {
        padding: 24px 18px;
    }

    .pay-result-page .pay-result-title {
        font-size: 20px;
    }

    .pay-result-page .pay-result-actions {
        grid-template-columns: 1fr;
    }
}

.payment-methods {
    display: flex;
    gap: 15px;
    margin-bottom: 25px;
}

.payment-method {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 20px;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.3s, background 0.3s;
}

.payment-method:hover {
    border-color: #ccc;
}

.payment-method.active {
    border-color: var(--primary-color);
    background: rgba(230, 74, 25, 0.05);
}

.payment-method input {
    display: none;
}

.payment-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-light);
    border-radius: 8px;
    color: var(--text-light);
}

.payment-method.active .payment-icon {
    background: var(--primary-color);
    color: var(--white);
}

.payment-text {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-color);
}

.order-review-items {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.order-review-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    background: var(--bg-light);
    border-radius: 8px;
}

.review-item-image {
    width: 70px;
    height: 70px;
    object-fit: cover;
    border-radius: 6px;
}

.review-item-image-link {
    display: block;
    flex-shrink: 0;
    text-decoration: none;
    color: inherit;
}

.review-item-image-link:hover .review-item-image {
    opacity: 0.92;
}

.review-item-title-link {
    text-decoration: none;
    color: inherit;
}

.review-item-title-link:hover .review-item-name {
    color: var(--primary-color);
}

.review-item-info {
    flex: 1;
}

.review-item-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-color);
    margin: 0 0 5px 0;
}

.review-item-variant {
    display: block;
    font-size: 12px;
    color: var(--text-light);
    margin-bottom: 3px;
}

.review-item-qty {
    font-size: 12px;
    color: var(--text-light);
}

.review-item-price {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-color);
}

.checkout-sidebar {
    position: sticky;
    top: 20px;
    height: fit-content;
}

.order-summary {
    background: var(--white);
    padding: 25px;
    border-radius: 8px;
}

.summary-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-color);
    margin: 0 0 20px 0;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--border-color);
}

.summary-items {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}

.summary-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
}

.summary-item-shipping {
    align-items: flex-start;
}

.summary-label-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    max-width: 65%;
}

.summary-label-group .summary-label {
    margin: 0;
}

.btn-shipping-estimate {
    padding: 6px 12px;
    font-size: 12px;
    line-height: 1.2;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--white);
    color: var(--text-color);
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s;
}

.btn-shipping-estimate:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.btn-shipping-estimate:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.summary-shipping-block {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.checkout-inline-error {
    margin: 0;
    font-size: 13px;
    line-height: 1.4;
    color: #c84a32;
}

.checkout-inline-error--promo {
    margin-top: 8px;
}

.checkout-inline-error--place-order {
    margin-top: 10px;
    text-align: center;
}

.btn-shipping-estimate:disabled:hover {
    border-color: var(--border-color);
    color: var(--text-color);
}

.summary-label {
    color: var(--text-light);
}

.summary-value {
    color: var(--text-color);
    font-weight: 500;
}

.summary-item.discount .summary-value {
    color: #2daa2d;
}

.summary-label-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    max-width: 70%;
}

.summary-item-note {
    margin: 0;
    font-size: 12px;
    line-height: 1.35;
    color: var(--text-light);
}

.summary-item-hint {
    margin: -4px 0 0;
    font-size: 12px;
    line-height: 1.4;
    color: var(--text-light);
}

.summary-payment-breakdown {
    margin: 4px 0 16px;
    padding: 12px 14px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.03);
    border: 1px solid var(--border-color);
}

.summary-breakdown-heading {
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-color);
}

.summary-breakdown-equation {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    margin: 0 0 12px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-color);
}

.summary-breakdown-equation .eq-total {
    font-weight: 700;
    color: var(--primary-color, #1a5fb4);
}

.summary-breakdown-equation .eq-op {
    color: var(--text-light);
    font-weight: 500;
}

.summary-breakdown-equation .eq-part {
    font-weight: 500;
}

.summary-breakdown-equation .eq-part--muted {
    color: var(--text-light);
    font-weight: 400;
}

.summary-breakdown-detail {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.summary-breakdown-detail li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    font-size: 12px;
    line-height: 1.4;
}

.summary-breakdown-detail .breakdown-label {
    color: var(--text-light);
}

.summary-breakdown-detail .breakdown-value {
    font-weight: 500;
    color: var(--text-color);
    text-align: right;
}

.summary-breakdown-detail .breakdown-value--minus {
    color: #2daa2d;
}

.summary-breakdown-footnote {
    margin: 10px 0 0;
    font-size: 11px;
    line-height: 1.45;
    color: var(--text-light);
}

.summary-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 15px;
    border-top: 2px solid var(--border-color);
    margin-bottom: 20px;
}

.total-label {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-color);
}

.total-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--primary-color);
}

.summary-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}

.summary-secure {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-light);
}

.summary-secure svg {
    color: #2daa2d;
}

.order-review-items {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--border-color);
}

.order-review-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    background: var(--bg-light);
    border-radius: 6px;
}

.review-item-image {
    width: 55px;
    height: 55px;
    object-fit: cover;
    border-radius: 4px;
}

.review-item-image-link {
    display: block;
    flex-shrink: 0;
    text-decoration: none;
    color: inherit;
}

.review-item-image-link:hover .review-item-image {
    opacity: 0.92;
}

.review-item-title-link {
    text-decoration: none;
    color: inherit;
}

.review-item-title-link:hover .review-item-name {
    color: var(--primary-color);
}

.review-item-info {
    flex: 1;
    min-width: 0;
}

.review-item-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-color);
    margin: 0 0 3px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.review-item-variant {
    display: block;
    font-size: 11px;
    color: var(--text-light);
    margin-bottom: 2px;
}

.review-item-qty {
    font-size: 11px;
    color: var(--text-light);
}

.review-item-price {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-color);
    white-space: nowrap;
}

@media (max-width: 992px) {
    .checkout-layout {
        grid-template-columns: 1fr;
    }

    .checkout-sidebar {
        position: static;
    }
}

@media (max-width: 768px) {
    .checkout-page {
        padding: 20px 0;
    }

    .checkout-breadcrumb {
        font-size: 12px;
        margin-bottom: 15px;
    }

    .checkout-title {
        font-size: 22px;
        margin-bottom: 20px;
    }

    .checkout-steps {
        padding: 15px 10px;
        gap: 5px;
    }

    .checkout-step .step-text {
        display: none;
    }

    .checkout-step:not(:last-child)::after {
        width: calc(100% - 50px);
        margin-left: 45px;
    }

    .checkout-section {
        padding: 15px;
    }

    .checkout-section .section-title {
        font-size: 16px;
    }

    .checkout-form .form-row {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .payment-methods {
        flex-direction: column;
    }

    .payment-method {
        padding: 12px 15px;
    }

    .order-review-item {
        padding: 10px;
    }

    .review-item-image {
        width: 60px;
        height: 60px;
    }

    .review-item-name {
        font-size: 13px;
    }

    .order-summary {
        padding: 15px;
    }

    .summary-title {
        font-size: 16px;
    }

    .total-value {
        font-size: 18px;
    }
}

/* -------------------------------------------------------------------------
   cat-page-* : Category tree page (namespaced prefix, do not reuse globally)
   ------------------------------------------------------------------------- */
.cat-page {
    padding: 40px 0;
    min-height: calc(100vh - 200px);
}

.cat-page-breadcrumb {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    font-size: 14px;
    color: #666;
}

.cat-page-breadcrumb a {
    color: #666;
    text-decoration: none;
}

.cat-page-breadcrumb a:hover {
    color: var(--primary-color);
}

.cat-page-breadcrumb-sep {
    color: #ccc;
}

.cat-page-heading {
    font-size: 32px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 36px;
    color: var(--text-color);
}

.cat-page-tree {
    border-top: 1px solid var(--border-color);
}

.cat-page-l1 {
    padding: 28px 0 8px;
    border-bottom: 1px solid var(--border-color);
}

.cat-page-l1:last-child {
    border-bottom: none;
}

.cat-page-l1-intro {
    margin-bottom: 22px;
}

.cat-page-l1-title {
    font-size: 22px;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 8px;
}

.cat-page-l1-text {
    font-size: 14px;
    color: var(--text-light);
    line-height: 1.6;
    max-width: 920px;
}

.cat-page-l2 {
    margin-bottom: 28px;
    padding-left: 18px;
    border-left: 3px solid var(--primary-color);
    background: linear-gradient(90deg, rgba(120, 231, 35, 0.06), transparent 70%);
    padding-top: 12px;
    padding-bottom: 4px;
    padding-right: 12px;
    border-radius: 0 6px 6px 0;
}

.cat-page-l2-title {
    font-size: 17px;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 6px;
}

.cat-page-l2-text {
    font-size: 13px;
    color: var(--text-light);
    line-height: 1.55;
    margin-bottom: 14px;
    max-width: 880px;
}

.cat-page-l3-list {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cat-page-l3-link {
    display: block;
    flex: 1 1 200px;
    max-width: 280px;
    min-width: 160px;
    padding: 16px 14px;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    background: var(--white);
    text-decoration: none;
    color: inherit;
    transition: all 0.3s;
}

.cat-page-l3-link:hover {
    border-color: var(--primary-color);
    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.08);
}

.cat-page-l3-title {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 8px;
}

.cat-page-l3-text {
    font-size: 12px;
    color: var(--text-light);
    line-height: 1.5;
    margin: 0;
}

.cat-page-l1-title a,
.cat-page-l2-title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.cat-page-l1-title a:hover,
.cat-page-l2-title a:hover {
    color: var(--primary-color);
}

.cat-page-el-tree-name a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.cat-page-el-tree-name a:hover {
    color: var(--primary-color);
}

.cat-page-el-column-link {
    color: inherit;
    text-decoration: none;
    font-weight: inherit;
    font-size: inherit;
    transition: color 0.2s ease;
}

.cat-page-el-column-link:hover {
    color: var(--primary-color);
}

@media (max-width: 768px) {
    .cat-page-heading {
        font-size: 24px;
    }

    .cat-page-l1-title {
        font-size: 19px;
    }

    .cat-page-l2 {
        padding-left: 12px;
        margin-bottom: 22px;
    }

    .cat-page-l3-list {
        flex-direction: column;
    }

    .cat-page-l3-link {
        max-width: 100%;
    }
}

/* -------------------------------------------------------------------------
   cat-page-el-* : Category page — three-level layout examples only (prefixed)
   ------------------------------------------------------------------------- */
.cat-page-el-wrap {
    margin-bottom: 44px;
    padding: 28px 20px 32px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-light);
}

.cat-page-el-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-color);
    text-align: center;
    margin-bottom: 8px;
}

.cat-page-el-lead {
    font-size: 13px;
    color: var(--text-light);
    text-align: center;
    max-width: 720px;
    margin: 0 auto 28px;
    line-height: 1.55;
}

.cat-page-el-block {
    margin-bottom: 32px;
}

.cat-page-el-block:last-child {
    margin-bottom: 0;
}

.cat-page-el-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: 1px dashed var(--border-color);
}

/* Pattern A: nested L1 → L2 → L3 */
.cat-page-el-tree {
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 20px 20px 24px;
}

.cat-page-el-tree-node--d1 {
    position: relative;
}

.cat-page-el-tree-node--d2 {
    margin-top: 18px;
    margin-left: 0;
    padding-left: 20px;
    border-left: 2px solid rgba(120, 231, 35, 0.55);
}

.cat-page-el-tree-head {
    margin-bottom: 0;
}

.cat-page-el-tree-name {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-color);
    margin: 0 0 6px;
}

.cat-page-el-tree-node--d2 .cat-page-el-tree-name {
    font-size: 16px;
}

.cat-page-el-tree-desc {
    font-size: 13px;
    color: var(--text-light);
    line-height: 1.55;
    margin: 0;
    max-width: 640px;
}

.cat-page-el-tree-children {
    margin-top: 16px;
}

.cat-page-el-tree-l3 {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.cat-page-el-tree-l3 li {
    margin: 0;
    padding: 0;
}

.cat-page-el-tree-l3-item {
    display: block;
    max-width: 320px;
    padding: 12px 14px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-light);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.25s, box-shadow 0.25s;
}

.cat-page-el-tree-l3-item:hover {
    border-color: var(--primary-color);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}

.cat-page-el-tree-l3-body {
    flex: 1;
    min-width: 0;
}

.cat-page-el-tree-l3-name {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 4px;
}

.cat-page-el-tree-l3-desc {
    font-size: 12px;
    color: var(--text-light);
    line-height: 1.45;
    margin: 0;
    display: block;
}

/* Pattern B: three columns */
.cat-page-el-columns {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    align-items: stretch;
    gap: 0;
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
}

.cat-page-el-column {
    padding: 20px 18px 24px;
    min-height: 140px;
}

.cat-page-el-column-name {
    font-size: 17px;
    font-weight: 600;
    color: var(--text-color);
    margin: 0 0 8px;
}

.cat-page-el-column-desc {
    font-size: 13px;
    color: var(--text-light);
    line-height: 1.5;
    margin: 0;
}

.cat-page-el-column-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    background: var(--bg-light);
    color: #bbb;
    font-size: 20px;
    font-weight: 300;
    line-height: 1;
}

.cat-page-el-column-arrow::before {
    content: '\203A';
    /* single right angle quotation / chevron */
}

.cat-page-el-footnote {
    font-size: 12px;
    color: var(--text-light);
    text-align: center;
    margin-top: 14px;
    margin-bottom: 0;
}

@media (max-width: 900px) {
    .cat-page-el-columns {
        display: flex;
        flex-direction: column;
    }

    .cat-page-el-column-arrow {
        width: 100%;
        height: 32px;
        transform: none;
    }

    .cat-page-el-column-arrow::before {
        content: '\2304';
        /* downward arrowhead */
        font-size: 16px;
    }
}

/* Search page */
.search-page {
    padding: 24px 0 56px;
    min-height: 60vh;
}

.search-page-breadcrumb {
    margin-bottom: 20px;
}

.search-page-hero {
    text-align: center;
    padding: 28px 0 36px;
}

.search-page-title {
    font-size: 28px;
    font-weight: 600;
    color: var(--text-color);
    margin: 0 0 24px;
}

.search-page-form {
    max-width: 640px;
    margin: 0 auto;
}

.search-page-input-wrap {
    display: flex;
    align-items: stretch;
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    transition: border-color 0.25s, box-shadow 0.25s;
}

.search-page-input-wrap:focus-within {
    border-color: var(--primary-color);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
}

.search-page-input-icon {
    flex-shrink: 0;
    margin: 0 0 0 20px;
    align-self: center;
    color: var(--text-light);
}

.search-page-input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    padding: 14px 16px;
    font-size: 16px;
    color: var(--text-color);
    background: transparent;
}

.search-page-input::placeholder {
    color: #aaa;
}

.search-page-submit {
    flex-shrink: 0;
    border: none;
    padding: 0 28px;
    font-size: 15px;
    font-weight: 500;
    color: var(--white);
    background: var(--primary-color);
    cursor: pointer;
    transition: opacity 0.2s;
}

.search-page-submit:hover {
    opacity: 0.9;
}

.search-page-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-color);
}

.search-page-meta {
    margin: 0;
    font-size: 14px;
    color: var(--text-light);
}

.search-page-meta strong {
    color: var(--text-color);
    font-weight: 600;
}

.search-page-keyword {
    color: var(--primary-color);
}

.search-page-grid {
    margin-bottom: 8px;
}

.search-page-empty {
    text-align: center;
    padding: 48px 16px 64px;
}

.search-page-empty-hint {
    margin: 0 0 28px;
    font-size: 15px;
    color: var(--text-light);
}

.search-page-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.search-page-tags-label {
    font-size: 13px;
    color: var(--text-light);
    margin-right: 4px;
}

.search-page-tag {
    display: inline-block;
    padding: 8px 18px;
    font-size: 14px;
    color: var(--text-color);
    background: var(--bg-light);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    text-decoration: none;
    transition: all 0.2s;
}

.search-page-tag:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
    background: var(--white);
}

@media (max-width: 768px) {
    .search-page-hero {
        padding: 16px 0 28px;
    }

    .search-page-title {
        font-size: 22px;
        margin-bottom: 18px;
    }

    .search-page-input-wrap {
        border-radius: 12px;
        flex-wrap: wrap;
    }

    .search-page-input-icon {
        display: none;
    }

    .search-page-input {
        width: 100%;
        padding: 12px 16px;
    }

    .search-page-submit {
        width: 100%;
        padding: 12px;
        border-radius: 0;
    }

    .search-page-toolbar {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Guest order pages — scoped to avoid affecting other layouts */
.guest-order-page {
    padding: 32px 0 56px;
    min-height: 62vh;
    background: var(--bg-light);
}

.guest-order-page .guest-order-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
    font-size: 14px;
    color: #999;
}

.guest-order-page .guest-order-breadcrumb a {
    color: #999;
    text-decoration: none;
    transition: color 0.2s ease;
}

.guest-order-page .guest-order-breadcrumb a:hover {
    color: var(--primary-color);
}

.guest-order-page .guest-order-content {
    background: var(--white);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    padding: 30px;
}

.guest-order-page .guest-order-support {
    margin: 0;
    padding: 16px 20px;
    font-size: 14px;
    line-height: 1.6;
    color: #666;
    background: var(--bg-light);
    border-radius: 8px;
}

.guest-order-page .guest-order-support a {
    color: var(--primary-color);
    font-weight: 500;
    text-decoration: none;
}

.guest-order-page .guest-order-support a:hover {
    text-decoration: underline;
}

.guest-order-page .guest-order-logistics-actions {
    margin-top: 12px;
}

.guest-order-page .guest-order-logistics-actions .btn {
    min-height: 36px;
}

@media (max-width: 768px) {
    .guest-order-page {
        padding: 16px 0 32px;
        min-height: auto;
    }

    .guest-order-page .guest-order-breadcrumb {
        margin-bottom: 14px;
        font-size: 12px;
        gap: 6px;
    }

    .guest-order-page .guest-order-content {
        padding: 18px 14px;
        border-radius: 10px;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    }

    .guest-order-page .order-detail-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        margin-bottom: 22px;
        padding-bottom: 16px;
    }

    .guest-order-page .order-detail-info h2 {
        font-size: 18px;
        line-height: 1.35;
        word-break: break-word;
    }

    .guest-order-page .order-detail-info .order-date {
        font-size: 13px;
    }

    .guest-order-page .order-status {
        align-self: flex-start;
        font-size: 12px;
    }

    .guest-order-page .order-detail-section {
        margin-bottom: 22px;
    }

    .guest-order-page .order-detail-section h3 {
        font-size: 16px;
        margin-bottom: 12px;
    }

    .guest-order-page .order-detail-item {
        display: grid;
        grid-template-columns: 64px minmax(0, 1fr);
        grid-template-areas:
            "thumb product"
            "side side";
        gap: 12px 14px;
        align-items: start;
        padding: 14px;
    }

    .guest-order-page .order-detail-item img {
        grid-area: thumb;
        width: 64px;
        height: 64px;
    }

    .guest-order-page .order-detail-product {
        grid-area: product;
        min-width: 0;
    }

    .guest-order-page .order-detail-product .product-name {
        font-size: 14px;
        line-height: 1.4;
        word-break: break-word;
    }

    .guest-order-page .order-detail-product .product-variant,
    .guest-order-page .order-detail-product .product-qty {
        font-size: 13px;
    }

    .guest-order-page .order-detail-item-side {
        grid-area: side;
        width: 100%;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding-top: 10px;
        border-top: 1px solid var(--border-color);
    }

    .guest-order-page .order-detail-price {
        font-size: 15px;
    }

    .guest-order-page .order-detail-summary {
        margin-top: 14px;
        padding: 14px;
    }

    .guest-order-page .summary-row {
        font-size: 13px;
        padding: 6px 0;
    }

    .guest-order-page .summary-row.total {
        font-size: 15px;
        padding-top: 12px;
    }

    .guest-order-page .address-info {
        padding: 14px;
    }

    .guest-order-page .address-info p {
        font-size: 13px;
        word-break: break-word;
    }

    .guest-order-page .order-logistics-meta {
        padding: 14px;
    }

    .guest-order-page .order-logistics-meta__row {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .guest-order-page .order-logistics-meta__row + .order-logistics-meta__row {
        margin-top: 12px;
        padding-top: 12px;
    }

    .guest-order-page .order-logistics-meta__value {
        font-size: 14px;
    }

    .guest-order-page .order-logistics-meta__value--mono {
        font-size: 13px;
        word-break: break-all;
    }

    .guest-order-page .order-logistics-timeline {
        padding: 18px 14px 6px;
    }

    .guest-order-page .order-logistics-step {
        gap: 12px;
        padding-bottom: 18px;
    }

    .guest-order-page .order-logistics-step__title {
        font-size: 14px;
        word-break: break-word;
    }

    .guest-order-page .guest-order-logistics-actions .btn {
        width: 100%;
    }

    .guest-order-page .guest-order-support {
        padding: 14px;
        font-size: 13px;
        word-break: break-word;
    }

    .guest-order-page .order-detail-actions {
        flex-direction: column;
        gap: 10px;
        margin-top: 22px;
        padding-top: 16px;
    }

    .guest-order-page .order-detail-actions .btn {
        display: block;
        width: 100%;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .guest-order-page .container {
        padding-left: 12px;
        padding-right: 12px;
    }

    .guest-order-page .guest-order-content {
        padding: 16px 12px;
        border-radius: 8px;
    }

    .guest-order-page .order-detail-info h2 {
        font-size: 17px;
    }

    .guest-order-page .order-detail-item {
        grid-template-columns: 56px minmax(0, 1fr);
        gap: 10px 12px;
        padding: 12px;
    }

    .guest-order-page .order-detail-item img {
        width: 56px;
        height: 56px;
    }
}

/* Cookie notice */
.cookie-notice {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9900;
    padding: 16px 0 calc(16px + env(safe-area-inset-bottom, 0px));
    background: var(--white);
    border-top: 1px solid var(--border-color);
    box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.08);
    transform: translateY(0);
    transition: transform 0.35s ease, opacity 0.35s ease, visibility 0.35s ease;
}

.cookie-notice.is-hidden {
    transform: translateY(110%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.cookie-notice__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.cookie-notice__content {
    flex: 1 1 auto;
    min-width: 0;
}

.cookie-notice__content p {
    margin: 0;
    font-size: 13px;
    line-height: 1.65;
    color: var(--text-light);
}

.cookie-notice__link {
    color: var(--primary-color);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.cookie-notice__link:hover {
    color: #66cc1a;
}

.cookie-notice__actions {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 10px;
}

.cookie-notice__actions .btn {
    min-width: 96px;
    padding: 10px 20px;
    font-size: 13px;
}

@media (max-width: 768px) {
    .cookie-notice__inner {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
    }

    .cookie-notice__actions {
        width: 100%;
    }

    .cookie-notice__actions .btn {
        flex: 1 1 0;
        min-width: 0;
    }
}

/* Member — after-sales list */
.member-aftersales-page .aftersales-cards {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.member-aftersales-page .aftersales-card {
    border: 1px solid var(--border-color);
    border-radius: 10px;
    overflow: hidden;
    background: var(--white);
    transition: box-shadow 0.25s ease, border-color 0.25s ease;
}

.member-aftersales-page .aftersales-card:hover {
    border-color: rgba(200, 36, 36, 0.25);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
}

.member-aftersales-page .aftersales-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    background: linear-gradient(180deg, #fafafa 0%, var(--bg-light) 100%);
    border-bottom: 1px solid var(--border-color);
}

.member-aftersales-page .aftersales-card__head-main {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.member-aftersales-page .aftersales-card__sn-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #999;
}

.member-aftersales-page .aftersales-card__sn {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-color);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    word-break: break-all;
    line-height: 1.35;
}

.member-aftersales-page .aftersales-card__time {
    font-size: 12px;
    color: #999;
    line-height: 1.4;
}

.member-aftersales-page .aftersales-status-badge {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}

.member-aftersales-page .aftersales-status-badge--processing {
    background: #fff7e6;
    color: #d48806;
}

.member-aftersales-page .aftersales-status-badge--approved {
    background: #e6f4ff;
    color: #1677ff;
}

.member-aftersales-page .aftersales-status-badge--rejected {
    background: #fff1f0;
    color: #cf1322;
}

.member-aftersales-page .aftersales-status-badge--completed {
    background: #f6ffed;
    color: #389e0d;
}

.member-aftersales-page .aftersales-status-badge--cancelled {
    background: #f5f5f5;
    color: #8c8c8c;
}

.member-aftersales-page .aftersales-card__body {
    padding: 16px 18px;
}

.member-aftersales-page .aftersales-card__product {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.member-aftersales-page .aftersales-card__thumb {
    flex-shrink: 0;
    width: 72px;
    height: 72px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: linear-gradient(145deg, #f8f8f8 0%, #efefef 100%);
    position: relative;
}

.member-aftersales-page .aftersales-card__thumb::after {
    content: '';
    position: absolute;
    inset: 0;
    margin: auto;
    width: 28px;
    height: 28px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24' fill='none' stroke='%23bbb' stroke-width='1.5'%3E%3Cpath d='M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z'/%3E%3Cline x1='3' y1='6' x2='21' y2='6'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E") center / contain no-repeat;
    opacity: 0.85;
}

.member-aftersales-page .aftersales-card__product-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.member-aftersales-page .aftersales-card__product-name {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.45;
    color: var(--text-color);
    overflow-wrap: anywhere;
    word-break: break-word;
}

.member-aftersales-page .aftersales-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
}

.member-aftersales-page .aftersales-type-badge--list {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    background: #f0f5ff;
    color: #2f54eb;
    border: 1px solid rgba(47, 84, 235, 0.12);
}

.member-aftersales-page .aftersales-card__qty {
    font-size: 13px;
    color: #888;
    font-variant-numeric: tabular-nums;
}

.member-aftersales-page .aftersales-card__foot {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 12px 18px 14px;
    border-top: 1px solid var(--border-color);
    background: #fcfcfc;
}

.member-aftersales-page .aftersales-card__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

@media (max-width: 768px) {
    .member-aftersales-page .aftersales-cards {
        gap: 12px;
    }

    .member-aftersales-page .aftersales-card__head {
        flex-direction: column;
        align-items: stretch;
        padding: 14px 16px;
    }

    .member-aftersales-page .aftersales-status-badge {
        align-self: flex-start;
    }

    .member-aftersales-page .aftersales-card__body {
        padding: 14px 16px;
    }

    .member-aftersales-page .aftersales-card__thumb {
        width: 64px;
        height: 64px;
    }

    .member-aftersales-page .aftersales-card__product-name {
        font-size: 14px;
    }

    .member-aftersales-page .aftersales-card__foot {
        padding: 12px 16px 14px;
    }

    .member-aftersales-page .aftersales-card__actions {
        width: 100%;
        flex-direction: column-reverse;
    }

    .member-aftersales-page .aftersales-card__actions .btn {
        width: 100%;
        box-sizing: border-box;
    }
}

/* Member — after-sales detail */
.member-aftersales-detail .aftersales-status-badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}

.member-aftersales-detail .aftersales-status-badge--processing {
    background: #e6f4ff;
    color: #1677ff;
}

.member-aftersales-detail .aftersales-status-badge--approved {
    background: #f6ffed;
    color: #389e0d;
}

.member-aftersales-detail .aftersales-status-badge--rejected {
    background: #fff2f0;
    color: #cf1322;
}

.member-aftersales-detail .aftersales-status-badge--completed {
    background: #f6ffed;
    color: #389e0d;
}

.member-aftersales-detail .aftersales-status-badge--cancelled {
    background: #f5f5f5;
    color: #757575;
}

.member-aftersales-detail .aftersales-info-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 24px;
    padding: 20px;
    background: var(--bg-light);
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

.member-aftersales-detail .aftersales-info-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.member-aftersales-detail .aftersales-info-item--full {
    grid-column: 1 / -1;
    padding-top: 4px;
    border-top: 1px dashed var(--border-color);
}

.member-aftersales-detail .aftersales-info-item__label {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #999;
}

.member-aftersales-detail .aftersales-info-item__value {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-color);
    line-height: 1.5;
    word-break: break-word;
}

.member-aftersales-detail .aftersales-info-item__value--amount {
    color: var(--primary-color);
}

.member-aftersales-detail .aftersales-info-item__link {
    font-size: 15px;
    font-weight: 600;
    color: var(--primary-color);
    text-decoration: none;
}

.member-aftersales-detail .aftersales-info-item__link:hover {
    text-decoration: underline;
}

.member-aftersales-detail .aftersales-type-badge {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
}

.member-aftersales-detail .aftersales-type-badge--refund {
    background: #fff7e6;
    color: #d48806;
}

.member-aftersales-detail .aftersales-type-badge--exchange {
    background: #e6f4ff;
    color: #1677ff;
}

.member-aftersales-detail .aftersales-type-badge--only-refund {
    background: #f6ffed;
    color: #389e0d;
}

.member-aftersales-detail .aftersales-detail-product__thumb {
    flex: 0 0 80px;
    width: 80px;
    height: 80px;
    border-radius: 6px;
    background: linear-gradient(135deg, #eef2f7 0%, #dde4ee 100%);
    border: 1px solid var(--border-color);
}

.member-aftersales-detail .aftersales-reason-box {
    padding: 20px;
    background: var(--bg-light);
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

.member-aftersales-detail .aftersales-refuse-box {
    background: #fff2f0;
    border-color: #ffccc7;
}

.member-aftersales-detail .aftersales-refuse-text {
    margin-bottom: 0;
    color: #cf1322;
}

/* 退货地址（静态展示） */
.member-aftersales-detail .aftersales-return-section__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    margin-bottom: 12px;
}

.member-aftersales-detail .aftersales-return-section__title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-color);
    line-height: 1.35;
}

.member-aftersales-detail .aftersales-return-section__tag {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    background: #f6ffed;
    color: #389e0d;
    border: 1px solid #b7eb8f;
}

.member-aftersales-detail .aftersales-return-section__tip {
    margin: 0 0 16px;
    padding: 12px 14px;
    font-size: 13px;
    line-height: 1.65;
    color: #595959;
    background: #e6f4ff;
    border: 1px solid #91caff;
    border-radius: 8px;
}

.member-aftersales-detail .aftersales-return-address {
    padding: 20px;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.member-aftersales-detail .aftersales-return-address__list {
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 24px;
}

.member-aftersales-detail .aftersales-return-address__row {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.member-aftersales-detail .aftersales-return-address__row dt {
    margin: 0;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: #999;
}

.member-aftersales-detail .aftersales-return-address__row dd {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-color);
    line-height: 1.55;
    word-break: break-word;
}

.member-aftersales-detail .aftersales-return-address__row--full {
    grid-column: 1 / -1;
    padding-top: 4px;
    border-top: 1px dashed var(--border-color);
}

.member-aftersales-detail .aftersales-return-address__tel {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 600;
}

.member-aftersales-detail .aftersales-return-address__tel:hover {
    text-decoration: underline;
}

.member-aftersales-detail .aftersales-return-address__actions {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
}

.member-aftersales-detail .aftersales-return-section__notes {
    margin: 16px 0 0;
    padding: 14px 16px 14px 32px;
    font-size: 13px;
    line-height: 1.65;
    color: #8c8c8c;
    background: var(--bg-light);
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

.member-aftersales-detail .aftersales-return-section__notes li + li {
    margin-top: 6px;
}

.member-aftersales-detail .aftersales-reason-text {
    margin: 0 0 16px;
    font-size: 14px;
    line-height: 1.7;
    color: #666;
}

.member-aftersales-detail .aftersales-evidence-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.member-aftersales-detail .aftersales-evidence-item {
    aspect-ratio: 1;
    border-radius: 8px;
    background: linear-gradient(135deg, #eef2f7 0%, #dde4ee 100%);
    border: 1px solid var(--border-color);
    display: block;
    overflow: hidden;
}

.member-aftersales-detail .aftersales-evidence-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.member-aftersales-detail .aftersales-return-meta {
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

@media (max-width: 768px) {
    .member-aftersales-detail .order-detail-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .member-aftersales-detail .order-detail-info h2 {
        font-size: 20px;
    }

    .member-aftersales-detail .aftersales-info-grid {
        grid-template-columns: 1fr;
        gap: 14px;
        padding: 16px;
    }

    .member-aftersales-detail .aftersales-info-item--full {
        padding-top: 12px;
    }

    .member-aftersales-detail .aftersales-return-address {
        padding: 16px;
    }

    .member-aftersales-detail .aftersales-return-address__list {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .member-aftersales-detail .aftersales-return-section__head {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .member-aftersales-detail .order-detail-item {
        flex-wrap: wrap;
        gap: 14px;
        padding: 16px;
    }

    .member-aftersales-detail .aftersales-detail-product__thumb {
        flex: 0 0 64px;
        width: 64px;
        height: 64px;
    }

    .member-aftersales-detail .order-detail-product {
        flex: 1 1 calc(100% - 78px);
        min-width: 0;
    }

    .member-aftersales-detail .order-detail-price {
        width: 100%;
        padding-top: 8px;
        border-top: 1px dashed var(--border-color);
        text-align: right;
    }

    .member-aftersales-detail .aftersales-evidence-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .member-aftersales-detail .order-logistics-meta__row {
        grid-template-columns: 1fr;
    }

    .member-aftersales-detail .order-detail-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .member-aftersales-detail .order-detail-actions .btn {
        width: 100%;
        justify-content: center;
    }
}

/* Member — after-sales apply */
.member-aftersales-apply .aftersales-apply-form {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.member-aftersales-apply .aftersales-apply-section {
    padding: 20px;
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

.member-aftersales-apply .aftersales-apply-section__title {
    margin: 0 0 16px;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-color);
}

.member-aftersales-apply .aftersales-apply-product {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 16px;
    background: var(--bg-light);
    border-radius: 8px;
}

.member-aftersales-apply .aftersales-apply-product__thumb {
    flex: 0 0 80px;
    width: 80px;
    height: 80px;
    border-radius: 6px;
    background: linear-gradient(135deg, #eef2f7 0%, #dde4ee 100%);
    border: 1px solid var(--border-color);
    object-fit: cover;
}

.member-aftersales-apply .aftersales-apply-product__info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.member-aftersales-apply .aftersales-apply-product__label {
    font-size: 12px;
    color: #999;
}

.member-aftersales-apply .aftersales-apply-product__name {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-color);
    line-height: 1.4;
}

.member-aftersales-apply .aftersales-apply-product__variant {
    margin: 0;
    font-size: 13px;
    color: #999;
}

.member-aftersales-apply .aftersales-apply-product__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin: 6px 0 0;
    font-size: 13px;
    color: #666;
}

.member-aftersales-apply .aftersales-type-options {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
    gap: 12px;
}

.member-aftersales-apply .aftersales-type-option {
    display: block;
    cursor: pointer;
}

.member-aftersales-apply .aftersales-type-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.member-aftersales-apply .aftersales-type-option__box {
    display: flex;
    flex-direction: column;
    gap: 4px;
    height: 100%;
    padding: 12px 10px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--white);
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
    text-align: center;
}

.member-aftersales-apply .aftersales-type-option__title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-color);
}

.member-aftersales-apply .aftersales-type-option__desc {
    font-size: 11px;
    line-height: 1.45;
    color: #999;
}

.member-aftersales-apply .aftersales-type-option input:checked + .aftersales-type-option__box {
    border-color: var(--primary-color);
    background: rgba(120, 231, 35, 0.06);
    box-shadow: 0 0 0 1px rgba(120, 231, 35, 0.25);
}

.member-aftersales-apply .aftersales-type-option input:checked + .aftersales-type-option__box .aftersales-type-option__title {
    color: var(--primary-color);
}

.member-aftersales-apply .aftersales-type-option:hover .aftersales-type-option__box {
    border-color: #ccc;
}

.member-aftersales-apply .form-select-wrap {
    position: relative;
    display: block;
}

.member-aftersales-apply .form-select-wrap::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 16px;
    width: 8px;
    height: 8px;
    border-right: 2px solid #999;
    border-bottom: 2px solid #999;
    transform: translateY(-65%) rotate(45deg);
    pointer-events: none;
    transition: border-color 0.2s, transform 0.2s;
}

.member-aftersales-apply .form-select-wrap:focus-within::after {
    border-color: var(--primary-color);
    transform: translateY(-35%) rotate(225deg);
}

.member-aftersales-apply .form-select.form-select--styled {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 100%;
    min-height: 46px;
    padding: 12px 42px 12px 14px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background-color: var(--white);
    font-size: 14px;
    line-height: 1.4;
    color: var(--text-color);
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
}

.member-aftersales-apply .form-select.form-select--styled:hover {
    border-color: #ccc;
    background-color: #fafafa;
}

.member-aftersales-apply .form-select.form-select--styled:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(120, 231, 35, 0.15);
    background-color: var(--white);
}

.member-aftersales-apply .form-select.form-select--styled:invalid {
    color: #bbb;
}

.member-aftersales-apply .form-select.form-select--styled option {
    color: var(--text-color);
}

.member-aftersales-apply .form-select.form-select--styled option[disabled] {
    color: #bbb;
}

.member-aftersales-apply .aftersales-apply-form__textarea {
    min-height: 120px;
    resize: vertical;
}

.member-aftersales-apply .aftersales-apply-form__counter {
    text-align: right;
    font-size: 12px;
    color: #999;
}

.member-aftersales-apply .aftersales-apply-form__hint {
    margin: 0 0 10px;
    font-size: 12px;
    color: #999;
}

.member-aftersales-apply .aftersales-upload {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 10px;
}

.member-aftersales-apply .aftersales-upload__list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.member-aftersales-apply .aftersales-upload__add {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 88px;
    height: 88px;
    border: 1px dashed var(--border-color);
    border-radius: 8px;
    background: var(--bg-light);
    color: #999;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s, background 0.2s;
}

.member-aftersales-apply .aftersales-upload__add:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
    background: rgba(120, 231, 35, 0.04);
}

.member-aftersales-apply .aftersales-upload__add-icon {
    font-size: 24px;
    line-height: 1;
    font-weight: 300;
}

.member-aftersales-apply .aftersales-upload__add-text {
    font-size: 12px;
}

.member-aftersales-apply .aftersales-upload__item {
    position: relative;
    width: 88px;
    height: 88px;
    list-style: none;
}

.member-aftersales-apply .aftersales-upload__thumb {
    width: 100%;
    height: 100%;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    background: var(--bg-light);
}

.member-aftersales-apply .aftersales-upload__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.member-aftersales-apply .aftersales-upload__remove {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 22px;
    height: 22px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}

.member-aftersales-apply .aftersales-upload__add.is-hidden {
    display: none;
}

.member-aftersales-apply .aftersales-upload__add.is-uploading {
    opacity: 0.6;
    pointer-events: none;
}

.member-aftersales-apply .aftersales-refund-preview {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px 12px;
    margin-top: 4px;
    padding: 16px;
    background: var(--bg-light);
    border-radius: 8px;
}

.member-aftersales-apply .aftersales-refund-preview__label {
    font-size: 14px;
    color: #666;
}

.member-aftersales-apply .aftersales-refund-preview__amount {
    font-size: 20px;
    font-weight: 700;
    color: var(--primary-color);
}

.member-aftersales-apply .aftersales-refund-preview__note {
    flex: 1 1 100%;
    font-size: 12px;
    color: #999;
}

.member-aftersales-apply .aftersales-apply-notice {
    padding: 16px 18px;
    background: #fffbe6;
    border: 1px solid #ffe58f;
    border-radius: 8px;
}

.member-aftersales-apply .aftersales-apply-notice__title {
    margin: 0 0 10px;
    font-size: 14px;
    font-weight: 600;
    color: #ad6800;
}

.member-aftersales-apply .aftersales-apply-notice__list {
    margin: 0;
    padding-left: 18px;
    font-size: 13px;
    line-height: 1.7;
    color: #8c6d1f;
}

.member-aftersales-apply .aftersales-apply-notice__list li + li {
    margin-top: 4px;
}

.member-aftersales-apply .aftersales-apply-form__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding-top: 8px;
}

.member-aftersales-apply .req-mark {
    color: #cf1322;
}

@media (max-width: 992px) {
    .member-aftersales-apply .aftersales-type-options {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .member-aftersales-apply .aftersales-apply-section {
        padding: 16px;
    }

    .member-aftersales-apply .aftersales-apply-product {
        flex-direction: row;
        padding: 14px;
    }

    .member-aftersales-apply .aftersales-apply-product__thumb {
        flex: 0 0 64px;
        width: 64px;
        height: 64px;
    }

    .member-aftersales-apply .aftersales-apply-product__meta {
        flex-direction: column;
        gap: 4px;
    }

    .member-aftersales-apply .aftersales-type-options {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .member-aftersales-apply .aftersales-apply-form__actions {
        flex-direction: column;
    }

    .member-aftersales-apply .aftersales-apply-form__actions .btn {
        width: 100%;
        justify-content: center;
    }
}

/* 登录提示横幅 */
.checkout-login-banner {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background-color: #fffbf0;
    border: 1px solid #ffe599;
    border-radius: 8px;
    margin-bottom: 20px;
}

.login-banner-icon {
    font-size: 24px;
    flex-shrink: 0;
}

.login-banner-content {
    flex: 1;
}

.login-banner-title {
    font-size: 14px;
    font-weight: 600;
    color: #d46b08;
    margin: 0 0 4px 0;
}

.login-banner-desc {
    font-size: 13px;
    color: #666;
    margin: 0;
    line-height: 1.6;
}

.login-banner-btn {
    flex-shrink: 0;
    padding: 8px 16px;
    background-color: #78e723;
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    border-radius: 4px;
    transition: background-color 0.2s;
}

.login-banner-btn:hover {
    background-color: #66cc00;
}

@media (max-width: 768px) {
    .checkout-login-banner {
        flex-direction: column;
        text-align: center;
    }
    
    .login-banner-btn {
        width: 100%;
        text-align: center;
    }
}