/* Utility classes */
.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Fixed header spacing */
body {
    padding-top: 64px !important; /* 为固定导航栏留出空间 */
}

/* Image placeholders */
.img-placeholder {
    background-color: #BFD8A7 !important;
    color: #1F2D24 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    position: relative;
    overflow: hidden;
}

.img-placeholder::before {
    content: '图片加载中...';
}

.img-placeholder.product { height: 250px; }
.img-placeholder.banner { height: 400px; }
.img-placeholder.avatar {
    height: 60px;
    width: 60px;
    border-radius: 50%;
}
.img-placeholder.logo { height: 80px; }
.img-placeholder.gallery { height: 150px; }

/* Navigation styles */
.nav-link,
.mobile-nav-link {
    color: #E9E4D7 !important;
}

/* Theme color utility classes */
.bg-brand-primary {
    background-color: #1F2D24 !important;
}

.bg-brand-secondary {
    background-color: #3A2F25 !important;
}

.bg-brand-accent {
    background-color: #6C8B57 !important;
}

.bg-brand-light {
    background-color: #f6f1e9 !important;
}

.bg-brand-pale {
    background-color: #BFD8A7 !important;
}

.bg-brand-white {
    background-color: #fefefa !important;
}

.text-brand-primary {
    color: #1F2D24 !important;
}

.text-brand-secondary {
    color: #3A2F25 !important;
}

.text-brand-accent {
    color: #6C8B57 !important;
}

.text-brand-light {
    color: #F3E9DA !important;
}

.text-brand-pale {
    color: #BFD8A7 !important;
}

.text-brand-text {
    color: #E9E4D7 !important;
}

.text-brand-muted {
    color: #A8A8A8 !important;
}

.border-brand-primary {
    border-color: #1F2D24 !important;
}

.border-brand-secondary {
    border-color: #3A2F25 !important;
}

.border-brand-accent {
    border-color: #6C8B57 !important;
}

/* Hover states */
.hover\:bg-brand-primary:hover {
    background-color: #1F2D24 !important;
}

.hover\:bg-brand-accent:hover {
    background-color: #6C8B57 !important;
}

.hover\:bg-brand-light:hover {
    background-color: #F3E9DA !important;
}

.hover\:bg-brand-pale:hover {
    background-color: #BFD8A7 !important;
}

.hover\:text-brand-primary:hover {
    color: #1F2D24 !important;
}

.hover\:text-brand-accent:hover {
    color: #6C8B57 !important;
}

.hover\:text-brand-light:hover {
    color: #F3E9DA !important;
}

.hover\:text-brand-text:hover {
    color: #E9E4D7 !important;
}

/* Tailwind color overrides */
/* Background colors */
.bg-green-700 {
    background-color: #1F2D24 !important; /* brand-primary */
}

.bg-green-600 {
    background-color: #6C8B57 !important; /* brand-accent */
}

.bg-green-100 {
    background-color: #BFD8A7 !important; /* brand-pale */
}

.bg-gray-50 {
    background-color: #F3E9DA !important; /* brand-light */
}

.bg-gray-800 {
    background-color: #1F2D24 !important; /* brand-primary */
}

/* Text colors */
.text-green-800 {
    color: #1F2D24 !important; /* brand-primary */
}

.text-green-700 {
    color: #1F2D24 !important; /* brand-primary */
}

.text-green-600 {
    color: #6C8B57 !important; /* brand-accent */
}

.text-green-500 {
    color: #6C8B57 !important; /* brand-accent */
}

.text-gray-600 {
    color: #3A2F25 !important; /* brand-secondary */
}

.text-white {
    color: #E9E4D7 !important; /* brand-text */
}

.text-gray-400 {
    color: #A8A8A8 !important; /* brand-muted */
}

/* Border colors */
.border-white {
    border-color: #E9E4D7 !important; /* brand-text */
}

.border-gray-700 {
    border-color: #3A2F25 !important; /* brand-secondary */
}

/* Hover states for Tailwind colors */
.hover\:bg-gray-100:hover {
    background-color: #BFD8A7 !important; /* brand-pale */
}

.hover\:bg-green-700:hover {
    background-color: #1F2D24 !important; /* brand-primary */
}

.hover\:bg-green-600:hover {
    background-color: #6C8B57 !important; /* brand-accent */
}

.hover\:bg-white:hover {
    background-color: #F3E9DA !important; /* brand-light */
}

.hover\:text-green-700:hover {
    color: #1F2D24 !important; /* brand-primary */
}

.hover\:text-green-500:hover {
    color: #6C8B57 !important; /* brand-accent */
}

.hover\:text-white:hover {
    color: #E9E4D7 !important; /* brand-text */
}