/*
Theme Name: Xin2 Theme
Theme URI: http://xin2.com/
Author: Your Name
Author URI: http://xin2.com/
Description: A custom theme for xin2.com to display WooCommerce products.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: custom-theme
*/

/* Footer Styles */
.site-footer {
    background-color: #fff; /* 改为白色背景，更简洁 */
    color: #666; /* 深灰色文字 */
    padding: 40px 20px;
    text-align: center;
    margin-top: 50px; /* 与上方内容保持距离 */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    border-top: 1px solid #eee; /* 添加顶部边框 */
}

.site-footer .site-info {
    font-size: 14px;
    letter-spacing: 0.5px;
}

.site-footer .site-info a {
    color: #49bc85; /* 统一使用主题绿色 */
    text-decoration: none;
    transition: color 0.3s;
}

.site-footer .site-info a:hover {
    color: #3da874; /* 悬停时稍微加深 */
}


/* Header Layout */
.showheader__header {
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.showheader__headerTop {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
}

.showheader__nickname {
    margin: 0;
    font-size: 24px;
    font-weight: normal;
    color: #333;
    display: block;
}

.showheader__menus {
    padding-left: 20px;
    margin-bottom: 15px;
}

/* Desktop Menu Styles - Simplified */
.showheader__menus .primary-menu {
    display: flex;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
}

.showheader__menus .primary-menu li {
    margin-right: 30px;
}

.showheader__menus .primary-menu a {
    color: #555;
    text-decoration: none;
    padding: 8px 0;
    transition: color 0.3s ease;
    font-size: 20px;
    font-weight: 500;
    position: relative;
}

.showheader__menus .primary-menu a:hover {
    color: #49bc85;
}

.showheader__menus .primary-menu .current-menu-item a {
    color: #49bc85;
    font-weight: 600;
}

.showheader__menus .primary-menu .current-menu-item a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #49bc85;
}

.showheader__menus .primary-menu .current-menu-item a:hover {
    color: #49bc85;
}

/* Search Bar Styles */
.showheader__search {
    width: 350px;
}

.showheader__searchInput .search__inputwrap {
    display: flex;
    border: 1px solid #49bc85;
    border-radius: 20px;
    overflow: hidden;
    background-color: #fff;
}

.showheader__searchInput .search__input {
    border: none;
    flex-grow: 1;
    padding: 8px 15px;
    background: transparent;
    outline: none;
}

.showheader__searchInput .search__searchBtn {
    background-color: #49bc85;
    color: white;
    border: none;
    padding: 0 25px;
    cursor: pointer;
    font-size: 15px;
}

/* Mobile Navigation Styles */
.showalbumheader__gallerysubtitle.htmlwrap__main .price {
    font-size: 24px;
    font-weight: bold;
    color: #c0392b;
}

.product-description {
    margin-top: 15px;
    font-size: 14px;
    line-height: 1.6;
    color: #666;
}

@media (max-width: 768px) {
    .showheader__header {
        padding: 0;
        margin: 0;
    }
    
    .showheader__headerTop {
        display: block;
        padding: 10px 0;
        width: 100%;
    }

    .showheader__nickname {
        display: none !important;
    }

    .showheader__search {
        width: 100% !important;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    .showheader__searchInput {
        width: 100%;
    }

    .showheader__searchInput .search__inputwrap {
        width: 100%;
        border-radius: 25px;
        border: 1px solid #49bc85;
        display: flex;
        overflow: hidden;
        background-color: #fff;
        height: 40px;
        box-sizing: border-box;
    }

    .showheader__searchInput .search__input {
        flex: 1;
        padding: 0 15px;
        font-size: 14px;
        border: none;
        outline: none;
        background: transparent;
        min-width: 0;
        width: 0;
        box-sizing: border-box;
        height: 100%;
        line-height: 40px;
    }

    .showheader__searchInput .search__searchBtn {
        padding: 0 15px;
        font-size: 14px;
        background-color: #49bc85;
        color: white;
        border: none;
        cursor: pointer;
        white-space: nowrap;
        flex-shrink: 0;
        height: 100%;
        box-sizing: border-box;
    }

    .showheader__searchInput .search__searchBtn {
        padding: 0 20px;
        font-size: 16px;
    }

    .showheader__menus {
        padding: 0;
        margin: 10px 0 0 0;
        width: 100%;
        overflow-x: auto;
        white-space: nowrap;
        margin-left: -23px;
    }

    .showheader__menus .primary-menu {
        flex-direction: row;
        align-items: center;
        width: 100%;
        display: flex;
        padding: 0 10px;
        gap: 15px;
    }

    .showheader__menus .primary-menu li {
        margin: 0;
        flex-shrink: 0;
        border-bottom: none;
    }

    .showheader__menus .primary-menu a {
        display: inline-block;
        width: auto;
        margin: 0;
        padding: 8px 12px;
        border-radius: 0;
        font-size: 15px;
        transition: color 0.3s ease;
        border: none;
        text-align: center;
        background: transparent;
        white-space: nowrap;
    }

    .showheader__menus .primary-menu a:hover {
        transform: none;
        box-shadow: none;
        color: #49bc85;
        background: transparent;
    }

    /* Remove current menu item underline on mobile */
    .showheader__menus .primary-menu .current-menu-item a::after {
        display: none;
    }

    .showheader__menus .primary-menu .current-menu-item a {
        color: #49bc85;
        font-weight: 600;
    }
}

/* Override for very small screens, ensuring search is visible */
@media (max-width: 640px) {
    .showheader__search {
        display: block !important;
    }
}

/* Ensure hamburger menu is hidden on PC/tablet screens */
@media (min-width: 641px) {
    .yupoo-header-mobile-extra-btn-toggle {
        display: none !important;
    }
}

/* Product List Mobile Optimization */
@media (max-width: 768px) {
    .showindex__gallerycardwrap {
        padding: 0 5px 15px !important; /* Reduce padding for the specific card wrapper */
    }
}

/* Page Layout & Search Results Header */
.content-area, .showindex__gallerycardwrap {
    width: 100%;
    margin: 0 auto;
}

.content-area {
    padding: 0 20px;
}

.page-header {
    margin-bottom: 30px;
    border-bottom: 1px solid #eee;
    padding: 20px 20px 15px 20px; /* Added padding here */
}

.page-title {
    font-size: 28px;
    color: #333;
}

.page-title span {
    color: #49bc85;
}

.no-results {
    text-align: center;
    padding: 50px 20px;
}

/* WooCommerce Breadcrumbs */
.woocommerce-breadcrumb {
    padding: 10px 0 20px;
    margin: 0 auto;
    max-width: 1200px;
    font-size: 14px;
    color: #666;
}

.woocommerce-breadcrumb a {
    color: #666;
    text-decoration: none;
    margin: 0 5px;
}

.woocommerce-breadcrumb a:first-child {
    margin-left: 0;
}

.woocommerce-breadcrumb a:hover {
    color: #49bc85;
}

@media (max-width: 1240px) {
    .woocommerce-breadcrumb {
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* Single Product Page Styles - Redesigned Header */
.product-header {
    display: flex;
    align-items: flex-start;
    padding: 30px;
    background: #fff;
    margin-bottom: 20px;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    gap: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.product-header__image {
    width: 220px;
    flex-shrink: 0;
    border-radius: 8px;
    overflow: hidden;
    background: #f5f5f5;
}

.product-header__img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    aspect-ratio: 1/1;
}

.product-header__info {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0; /* Prevent flex item from overflowing */
}

.product-header__title-section {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    flex-wrap: wrap;
    gap: 15px;
}

.product-header__title {
    font-size: 24px;
    font-weight: 600;
    color: #333;
    margin: 0;
    line-height: 1.3;
}

.product-header__count {
    font-size: 13px;
    color: #666;
    background: #f0f0f0;
    padding: 4px 10px;
    border-radius: 20px;
    white-space: nowrap;
}

.product-header__price-section {
    margin-bottom: 20px;
    font-size: 20px;
    color: #e53935;
    font-weight: bold;
}

.product-header__description {
    color: #666;
    line-height: 1.6;
    margin-bottom: 25px;
    font-size: 15px;
}

.product-header__actions {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.product-header__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 25px;
    border-radius: 4px;
    text-decoration: none;
    font-size: 15px;
    transition: all 0.3s ease;
    cursor: pointer;
    font-weight: 500;
}

.product-header__btn--primary {
    background: #49bc85;
    color: #fff;
    border: 1px solid #49bc85;
}

.product-header__btn--primary:hover {
    background: #3da874;
    border-color: #3da874;
    color: #fff;
}

.product-header__btn--secondary {
    background: transparent;
    color: #666;
    border: 1px solid #ddd;
}

.product-header__btn--secondary:hover {
    border-color: #999;
    color: #333;
    background: #f9f9f9;
}

/* Mobile Responsive Styles */
@media (max-width: 768px) {
    .product-header {
        flex-direction: row; /* Side-by-side layout */
        padding: 10px; /* Reduced padding */
        gap: 10px; /* Tighter gap */
        align-items: flex-start;
        margin: 0 10px 15px;
    }

    .product-header__image {
        width: 40%;
        max-width: 40%;
        flex: 0 0 40%;
        margin: 0;
        display: flex;
        align-items: flex-start;
        justify-content: center;
        position: relative;
    }

    /* Ensure gallery class doesn't override width */
    .product-header__image.productgallery__item {
        width: 40% !important;
        max-width: 40% !important;
        flex: 0 0 40% !important;
    }
    
    /* Mobile click indicator */
    .product-header__image.productgallery__item {
        cursor: pointer;
        transition: transform 0.2s ease;
    }
    
    .product-header__image.productgallery__item:active {
        transform: scale(0.98);
    }
    
    /* Simplified tap indicator for small image */
    .product-header__image.productgallery__item::before {
        content: '🔍';
        position: absolute;
        bottom: 2px;
        right: 2px;
        width: 16px;
        height: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 10px;
        z-index: 1;
        color: #fff;
        background: rgba(0,0,0,0.5);
        border-radius: 50%;
        opacity: 0.8;
        pointer-events: none;
    }
    
    .product-header__image.productgallery__item::after {
        display: none; /* Remove the larger background circle */
    }
    
    .product-header__img {
        width: 100%;
        height: auto;
        aspect-ratio: 1/1;
        object-fit: cover;
        border-radius: 4px;
    }

    .product-header__info {
        width: 60%;
        flex: 0 0 60%;
        display: flex;
        flex-direction: column;
        padding-left: 10px; /* More spacing */
    }

    .product-header__title-section {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        margin-bottom: 5px;
    }
    
    .product-header__title {
        font-size: 16px;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        white-space: normal;
        line-height: 1.3;
        font-weight: 600;
        margin-bottom: 2px;
    }
    
    .product-header__count {
        font-size: 12px;
        color: #999;
        background: transparent;
        padding: 0;
        margin-bottom: 5px;
    }
    
    .product-header__price-section {
        font-size: 16px;
        margin-bottom: 8px; /* More space below */
        font-weight: 700;
        color: #e53935;
        display: flex;
        flex-direction: row; /* Horizontal price and switcher */
        align-items: center;
        flex-wrap: wrap;
        gap: 5px; /* Tighter gap */
    }
 
    .product-header__currency-switcher {
        transform: scale(0.8);
        transform-origin: left center;
        margin-bottom: 0;
    }
    
    .product-header__description {
        display: block;
        font-size: 12px;
        line-height: 1.4;
        margin: 0 0 5px 0;
        color: #666;
        display: -webkit-box;
        -webkit-line-clamp: 2; /* Limit to 2 lines */
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    
    .product-header__actions {
        width: 100%;
        gap: 8px;
        display: flex; /* Use flexbox */
        flex-direction: row; /* Buttons in a row */
        flex-wrap: nowrap; /* Prevent wrapping */
        margin-top: auto; /* Push to bottom */
    }
    
    .product-header__btn {
        flex: 1 1 50%; /* Each button takes up 50% of the space */
        text-align: center;
        padding: 12px 2px; /* Reduce horizontal padding to fit larger text */
        font-size: 14px; /* Adjusted font size */
        font-weight: 600; /* Make it bolder */
        border-radius: 4px;
        justify-content: center;
        border: 1px solid #49bc85;
        background: #fff;
        color: #49bc85;
        white-space: nowrap; /* Prevent text wrapping */
    }
    
    .product-header__btn:hover {
        background: #49bc85;
        color: #fff;
    }

    .mobile-product-description {
        margin: 0 15px 20px;
        font-size: 14px;
        line-height: 1.6;
        color: #666;
        overflow-wrap: break-word;
        word-wrap: break-word;
        word-break: break-word;
        max-width: 100%;
        box-sizing: border-box;
    }

    .mobile-product-description img,
    .mobile-product-description video,
    .mobile-product-description iframe {
        max-width: 100%;
        height: auto;
    }

    .mobile-product-description * {
        max-width: 100%;
        overflow-wrap: break-word;
    }
}

/* Utility Classes */
.desktop-only {
    display: block;
}
.mobile-only {
    display: none;
}

@media (max-width: 768px) {
    .desktop-only {
        display: none !important;
    }
    .mobile-only {
        display: block !important;
    }
}



.showalbum__imagecardwrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Additional responsive styles for product header */
@media (max-width: 480px) {
    .product-header {
        padding: 10px; /* Consistent padding */
    }
    
    /* Inherit 20/80 layout from 768px media query */
    
    .product-header__title {
        font-size: 15px; /* Slightly smaller font */
    }
    
    .product-header__price-section {
        font-size: 15px;
    }
    
    .product-header__btn {
        padding: 3px 8px; /* Slightly tighter buttons */
        font-size: 15px;
    }
}

.showalbum__parent {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -10px;
}

.showalbum__children {
    width: calc(16.666% - 20px);
    margin: 0 10px 20px;
}

.image__imagewrap {
    position: relative;
    padding-bottom: 100%;
    overflow: hidden;
    background: #f5f5f5;
}

.image__img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.image__decwrap {
    margin-top: 10px;
}

.image__decwrap h3 {
    font-size: 12px;
    color: #666;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.image__decwrap time {
    font-size: 12px;
    color: #999;
}

@media (max-width: 768px) {
    .showalbumheader__main {
        flex-direction: column;
    }
    
    .showalbumheader__gallerycover {
        margin: 0 auto 20px;
    }
    
    .showalbumheader__tabgroup {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .showalbumheader__btn-group {
        margin-top: 15px;
    }
    
    .showalbum__children {
        width: calc(50% - 20px);
    }
}

/* 新增：产品图集容器优化 */
.productgallery__gridwrap {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 30px;
    justify-content: flex-start;
}

/* Fix showalbum image cropping */
.showalbum__children .image__imagewrap {
    padding-bottom: 0; /* Remove forced aspect ratio */
    height: auto; /* Allow natural height */
    position: relative; /* Reset positioning */
    overflow: visible; /* Allow full image display */
}

.showalbum__children .autocover.image__img {
    position: static; /* Remove absolute positioning */
    width: 100%;
    height: auto;
    object-fit: contain; /* Show full image without cropping */
    transform: none !important;
    margin: 0 !important;
    max-width: 100% !important;
    max-height: none !important;
}

.productgallery__item {
    width: calc(25% - 20px); /* 四列布局 */
    background: #fff;
    border: 1px solid #eee;
    border-radius: 6px;
    overflow: hidden;
    transition: box-shadow 0.3s;
}

.productgallery__item:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.productgallery__thumbwrap {
    width: 100%;
    aspect-ratio: 1 / 1;
    background: #f9f9f9;
    overflow: hidden;
}

.productgallery__thumbwrap img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Show full image without cropping */
}

.productgallery__infowrap {
    padding: 10px;
    font-size: 13px;
    color: #444;
}

.productgallery__infowrap time {
    display: block;
    font-size: 12px;
    color: #999;
    margin-top: 5px;
}

/* 新增：标题与数量展示优化 */
.productgallery__titlecount {
    display: flex;
    align-items: center;
    font-size: 20px;
    font-weight: 600;
    color: #333;
    margin-bottom: 10px;
}

.productgallery__titlecount .count {
    font-size: 14px;
    color: #999;
    margin-left: 10px;
}

/* 新增：按钮组优化 */
.productgallery__actions {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.productgallery__actions .button {
    padding: 6px 18px;
    font-size: 14px;
    border-radius: 20px;
    border: 1px solid #49bc85;
    color: #49bc85;
    background: #fff;
    text-decoration: none;
    transition: all 0.3s;
}

.productgallery__actions .button:hover {
    background: #49bc85;
    color: #fff;
}

/* 响应式优化 */
@media (max-width: 768px) {
    .productgallery__item {
        width: calc(50% - 20px);
    }

    .productgallery__titlecount {
        font-size: 18px;
    }
}

/* Custom styles for single product page */

/* Header Buttons (Apply for Copy, Apply for Download, Share) */
.single-product .showalbumheader__tabgroup .button {
    background-color: #fff !important;
    border: 1px solid #49bc85 !important;
    color: #49bc85 !important;
    border-radius: 16px !important;
    padding: 6px 16px !important;
    font-size: 14px !important;
    transition: all 0.3s ease;
}

.single-product .showalbumheader__tabgroup .button:hover {
    background-color: #49bc85 !important;
    color: #fff !important;
}

/* Gallery Image Meta Data (ID and Date) */
.single-product .productgallery__infowrap {
    text-align: center;
    padding-top: 8px;
}

.single-product .productgallery__infowrap .image-id,
.single-product .productgallery__infowrap .image-date {
    display: block;
    font-size: 12px;
    color: #888;
    line-height: 1.4;
    text-align: center;
}

.single-product .productgallery__infowrap .image-id {
    font-weight: 500;
    color: #555;
}

/* Gallery Image Style */
.single-product .productgallery__thumbwrap {
    border: 1px solid #eee;
    border-radius: 4px;
    overflow: hidden; /* Ensures the image corners are rounded */
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.single-product .productgallery__thumbwrap:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.single-product .showalbum__imagecard {
    margin-bottom: 20px;
}

/* Product Description Styles */
.product-header__description {
    margin: 20px 0;
    font-size: 15px;
    line-height: 1.6;
    color: #666;
    border-top: 1px solid #f0f0f0;
    padding-top: 20px;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
    max-width: 100%;
}

.product-header__description p {
    margin-bottom: 15px;
}

.product-header__description ul,
.product-header__description ol {
    margin-bottom: 15px;
    padding-left: 20px;
}

.product-header__description li {
    margin-bottom: 5px;
}

/* Responsive Visibility Utilities */
.mobile-only {
    display: none;
}

.desktop-only {
    display: block;
}

.mobile-product-description {
    padding: 15px;
    font-size: 14px;
    line-height: 1.6;
    color: #666;
    background: #fff;
    margin: 0 10px 15px;
    border-radius: 4px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
    max-width: 100%;
    box-sizing: border-box;
}

.mobile-product-description img,
.mobile-product-description video,
.mobile-product-description iframe {
    max-width: 100%;
    height: auto;
}

.mobile-product-description * {
    max-width: 100%;
    overflow-wrap: break-word;
}

@media (max-width: 768px) {
    .desktop-only {
        display: none !important;
    }

    .mobile-only {
        display: block;
    }
}

/* Comments Section */
.comments-area {
    max-width: 800px;
    margin: 40px auto;
    padding: 30px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.comments-area .comments-title {
    font-size: 1.8rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 30px;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 20px;
}

.comment-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.comment-list .comment {
    padding: 20px 0;
    border-bottom: 1px solid #f0f0f0;
}

.comment-list .children {
    list-style: none;
    padding-left: 40px;
    margin-top: 20px;
}

.comment-body {
    display: flex;
    gap: 20px;
}

.comment-author .avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

.comment-content-wrap {
    flex: 1;
}

.comment-meta {
    margin-bottom: 10px;
    font-size: 14px;
    color: #666;
}

.comment-author .fn {
    font-weight: 700;
    color: #333;
    font-style: normal;
}

.comment-metadata a {
    color: #999;
    text-decoration: none;
}
.comment-metadata a:hover {
    text-decoration: underline;
}

.comment-content p {
    margin: 0 0 15px;
    line-height: 1.7;
    color: #444;
}

.reply .comment-reply-link {
    display: inline-block;
    padding: 5px 15px;
    background: #f5f5f5;
    color: #666;
    font-size: 13px;
    font-weight: 600;
    border-radius: 4px;
    text-decoration: none;
    transition: background 0.2s;
}

.reply .comment-reply-link:hover {
    background: #e0e0e0;
}

/* Comment Form */
.comment-respond {
    margin-top: 40px;
}

.comment-respond .comment-reply-title {
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 20px;
}

.comment-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.comment-form p {
    margin: 0;
}

.comment-form-comment textarea,
.comment-form-author input,
.comment-form-email input,
.comment-form-url input {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 15px;
    box-sizing: border-box;
}

.comment-form-cookies-consent {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
}

.form-submit .submit {
    background: #49bc85;
    color: #fff;
    border: none;
    padding: 12px 25px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s;
}

.form-submit .submit:hover {
    background: #3aa873;
}

.lazy-load {
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.lazy-load.loaded {
    opacity: 1;
}



/* Single Post Template Styles */
.single-post__wrap {
    max-width: 800px;
    margin: 0 auto;
    padding: 40px 20px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.single-post__article {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    overflow: hidden;
}

.single-post__header {
    padding: 40px 40px 20px;
    border-bottom: 1px solid #f0f0f0;
}

.single-post__title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #333;
    margin: 0 0 20px 0;
    line-height: 1.3;
}

.single-post__meta {
    display: flex;
    gap: 20px;
    font-size: 14px;
    color: #666;
}

.single-post__date,
.single-post__author {
    display: flex;
    align-items: center;
}

.single-post__content {
    padding: 40px;
    font-size: 16px;
    line-height: 1.8;
    color: #444;
}

.single-post__content h2,
.single-post__content h3,
.single-post__content h4 {
    color: #333;
    margin-top: 30px;
    margin-bottom: 15px;
}

.single-post__content p {
    margin-bottom: 20px;
}

.single-post__content img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    margin: 20px 0;
}

.single-post__footer {
    padding: 20px 40px 40px;
    border-top: 1px solid #f0f0f0;
}

.single-post__categories,
.single-post__tags {
    margin-bottom: 15px;
}

.single-post__categories a,
.single-post__tags a {
    display: inline-block;
    background: #f8f9fa;
    color: #666;
    padding: 5px 12px;
    border-radius: 20px;
    text-decoration: none;
    font-size: 13px;
    margin-right: 8px;
    margin-bottom: 8px;
    transition: all 0.3s;
}

.single-post__categories a:hover,
.single-post__tags a:hover {
    background: #49bc85;
    color: #fff;
}

.single-post__navigation {
    display: flex;
    justify-content: space-between;
    margin-top: 40px;
    padding: 0 40px;
}

.single-post__nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #49bc85;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s;
}

.single-post__nav-link:hover {
    color: #3da874;
}

.single-post__nav-link.prev {
    margin-right: auto;
}

.single-post__nav-link.next {
    margin-left: auto;
}

/* Page Template Styles */
.page__wrap {
    max-width: 1000px;
    margin: 0 auto;
    padding: 40px 20px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.page__container {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    overflow: hidden;
}

.page__article {
    padding: 40px;
}

.page__header {
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid #f0f0f0;
}

.page__title {
    font-size: 2.2rem;
    font-weight: 700;
    color: #333;
    margin: 0;
    line-height: 1.3;
}

.page__content {
    font-size: 16px;
    line-height: 1.8;
    color: #444;
}

.page__content h2,
.page__content h3,
.page__content h4 {
    color: #333;
    margin-top: 30px;
    margin-bottom: 15px;
}

.page__content p {
    margin-bottom: 20px;
}

.page__content img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    margin: 20px 0;
}

.page__content ul,
.page__content ol {
    margin-bottom: 20px;
    padding-left: 20px;
}

.page__content li {
    margin-bottom: 8px;
}

.page__content a {
    color: #49bc85;
    text-decoration: none;
    transition: color 0.3s;
}

.page__content a:hover {
    color: #3da874;
    text-decoration: underline;
}

/* Responsive Design for Posts and Pages */
@media (max-width: 768px) {
    .single-post__wrap,
    .page__wrap {
        padding: 20px 15px;
    }
    
    .single-post__header,
    .single-post__content,
    .single-post__footer,
    .page__article {
        padding: 25px;
    }
    
    .single-post__title {
        font-size: 2rem;
    }
    
    .page__title {
        font-size: 1.8rem;
    }
    
    .single-post__meta {
        flex-direction: column;
        gap: 10px;
    }
    
    .single-post__navigation {
        flex-direction: column;
        gap: 15px;
        padding: 0 25px;
    }
    
    .single-post__nav-link.prev,
    .single-post__nav-link.next {
        margin: 0;
    }
}

/* Comments Section Styles */
.comments-area {
    max-width: 800px;
    margin: 40px auto;
    padding: 0 20px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.comments-title {
    font-size: 1.8rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 30px;
    text-align: center;
}

.comment-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.comment {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    margin-bottom: 20px;
    padding: 25px;
    transition: box-shadow 0.3s ease;
}

.comment:hover {
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.comment-author {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.comment-author .avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-right: 15px;
    border: 2px solid #f0f0f0;
}

.comment-author .fn {
    font-weight: 600;
    color: #333;
    font-size: 16px;
}

.comment-author .says {
    color: #999;
    font-size: 14px;
    margin-left: 5px;
}

.comment-metadata {
    font-size: 13px;
    color: #999;
    margin-bottom: 15px;
}

.comment-metadata a {
    color: #999;
    text-decoration: none;
    transition: color 0.3s;
}

.comment-metadata a:hover {
    color: #49bc85;
}

.comment-content {
    font-size: 15px;
    line-height: 1.7;
    color: #444;
    margin-bottom: 15px;
}

.comment-content p {
    margin-bottom: 15px;
}

.comment-content p:last-child {
    margin-bottom: 0;
}

.reply {
    text-align: right;
}

.reply a {
    color: #49bc85;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    padding: 5px 12px;
    border: 1px solid #49bc85;
    border-radius: 20px;
    transition: all 0.3s;
    display: inline-block;
}

.reply a:hover {
    background: #49bc85;
    color: #fff;
}

/* Comment Form Styles */
.comment-respond {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    padding: 30px;
    margin-top: 40px;
}

.comment-reply-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 20px;
    text-align: center;
}

.comment-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.comment-form p {
    margin: 0;
}

.comment-form label {
    display: block;
    font-weight: 500;
    color: #333;
    margin-bottom: 8px;
    font-size: 14px;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    font-size: 15px;
    font-family: inherit;
    transition: border-color 0.3s, box-shadow 0.3s;
    box-sizing: border-box;
}

.comment-form input[type="text"]:focus,
.comment-form input[type="email"]:focus,
.comment-form input[type="url"]:focus,
.comment-form textarea:focus {
    outline: none;
    border-color: #49bc85;
    box-shadow: 0 0 0 3px rgba(73, 188, 133, 0.1);
}

.comment-form textarea {
    min-height: 120px;
    resize: vertical;
}

.form-submit {
    text-align: center;
    margin-top: 10px;
}

.form-submit input[type="submit"] {
    background: #49bc85;
    color: #fff;
    border: none;
    padding: 12px 30px;
    border-radius: 25px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.3s, transform 0.2s;
    min-width: 120px;
}

.form-submit input[type="submit"]:hover {
    background: #3da874;
    transform: translateY(-1px);
}

.form-submit input[type="submit"]:active {
    transform: translateY(0);
}

/* Nested Comments */
.children {
    list-style: none;
    padding-left: 40px;
    margin-top: 20px;
}

.children .comment {
    background: #f9f9f9;
    border-left: 3px solid #49bc85;
}

/* Comment Navigation */
.comment-navigation {
    margin: 30px 0;
    text-align: center;
}

.comment-navigation .nav-links {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.comment-navigation a {
    color: #49bc85;
    text-decoration: none;
    padding: 8px 16px;
    border: 1px solid #49bc85;
    border-radius: 20px;
    transition: all 0.3s;
    font-size: 14px;
}

.comment-navigation a:hover {
    background: #49bc85;
    color: #fff;
}

/* No Comments Message */
.no-comments {
    text-align: center;
    color: #999;
    font-size: 16px;
    margin: 40px 0;
    padding: 40px;
    background: #f9f9f9;
    border-radius: 8px;
}

/* Responsive Comments */
@media (max-width: 768px) {
    .comments-area {
        margin: 30px auto;
        padding: 0 15px;
    }
    
    .comment {
        padding: 20px;
        margin-bottom: 15px;
    }
    
    .comment-author .avatar {
        width: 40px;
        height: 40px;
        margin-right: 12px;
    }
    
    .comment-author .fn {
        font-size: 15px;
    }
    
    .comment-content {
        font-size: 14px;
    }
    
    .comment-respond {
        padding: 25px;
        margin-top: 30px;
    }
    
    .children {
        padding-left: 20px;
    }
    
    .comment-navigation .nav-links {
        flex-direction: column;
        gap: 10px;
    }
}