/*
Theme Name: CCL Theme
Text Domain: ccltheme
*/

/* 1. 基础重置 */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { 
    font-family: 'Inter', sans-serif; 
    line-height: 1.6; 
    color: #2c2c2c; 
    background: #fff;
    -webkit-font-smoothing: antialiased;
    padding-top: 0; /* header 跟随页面滚动，不需要 padding */
}

/* 确保首页 hero 区域正常显示 */
.hero {
    padding-top: 0;
}

/* 2. 导航栏样式 (全局统一 header) - 跟随页面滚动 */
.site-header {
    position: relative; /* 跟随页面滚动 */
    width: 100% !important; /* 强制全屏宽 */
    z-index: 1000;
    transition: background 0.3s ease;
    margin-bottom: 40px; /* 在导航栏下方增加 40px 的间距，推开图片 */
}

/* 首页的 header - 半透明通透感 */
body.home .site-header {
    position: absolute; /* 仅在首页使用绝对定位，使其浮在海报上 */
    background: rgba(0, 0, 0, 0.2); /* 半透明背景，显示下面的图片 */
    backdrop-filter: blur(10px); /* 毛玻璃效果 */
    margin-bottom: 0;
}

body.home .site-header .main-nav {
    padding: 0 5%; /* 去掉上下padding，让内容垂直居中 */
    height: 80px;
    display: flex;
    align-items: center;
}

/* 非首页的 header - 深色背景，白色文字 */
body:not(.home) .site-header {
    background: #1a1a1a; /* 灰黑深色背景 */
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    border-bottom: none; /* 去掉下边框 */
}

body:not(.home) .site-header .main-nav {
    padding: 0 5%; /* 去掉上下padding，让内容垂直居中 */
    height: 80px;
    display: flex;
    align-items: center;
}

body:not(.home) .site-header .logo {
    color: #fff; /* 白色文字 */
}

body:not(.home) .site-header .nav-menu a {
    color: #fff; /* 白色文字 */
}

body:not(.home) .site-header .nav-menu a:hover {
    color: #A67C52; /* 悬停时主题色 */
}

body:not(.home) .site-header .user-name {
    color: #fff; /* 白色文字 */
}

body:not(.home) .site-header .user-name:hover {
    color: #A67C52;
}

body:not(.home) .site-header .cart-icon {
    color: #fff; /* 白色文字 */
}

body:not(.home) .site-header .cart-icon:hover {
    color: #A67C52;
}

body:not(.home) .site-header .book-now-btn {
    background: #A67C52; /* 主题色背景 */
    color: #fff; /* 白色文字 */
    border: 1px solid #A67C52;
}

body:not(.home) .site-header .book-now-btn:hover {
    background: #8f6a47;
    border-color: #8f6a47;
}

.logo {
    font-family: 'Playfair Display', serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    letter-spacing: 1px;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 30px;
}

.nav-links a,
.nav-links .nav-menu a {
    color: #fff;
    text-decoration: none;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    transition: opacity 0.3s;
}

.nav-links .nav-menu {
    display: flex;
    align-items: center;
    gap: 30px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-links .nav-menu li {
    margin: 0;
    padding: 0;
}

/* Book Now 按钮样式 */
.nav-links .book-now-btn {
    border: 1px solid #fff;
    padding: 8px 15px;
    border-radius: 2px;
    transition: all 0.3s;
}

.nav-links .book-now-btn:hover {
    background: #fff;
    color: #000;
    opacity: 1;
}

/* 3. Hero 海报区 (核心视觉) */
.hero {
    height: 100vh;
    background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), 
                url(https://www.chinacultureland.com/wp-content/uploads/2026/02/hero-banner.jpg) center/cover no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #fff;
}

.hero h1 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(2.5rem, 8vw, 4.5rem);
    margin-bottom: 20px;
    font-style: italic;
}

.hero p {
    font-size: 1.1rem;
    max-width: 600px;
    margin-bottom: 40px;
    font-weight: 300;
    letter-spacing: 1px;
}

.btn-explore {
    padding: 15px 40px;
    border: 1px solid #fff;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 3px;
    transition: all 0.3s;
}

.btn-explore:hover {
    background: #fff;
    color: #000;
}

/* =========================================
   4. 工坊列表网格 (Workshop Grid System)
   ========================================= */

/* 通用区块内边距 */
.section-padding {
    padding: 100px 5%;
}

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

/* 标题样式 */
.section-title {
    text-align: center;
    font-family: 'Playfair Display', serif;
    font-size: 2.5rem;
    margin-bottom: 10px;
}

.section-subtitle {
    text-align: center;
    color: #666;
    margin-bottom: 60px;
    font-weight: 300;
    letter-spacing: 1px;
}

/* --- 核心网格布局 (CSS Grid) --- */
.workshop-grid {
    display: grid;
    /* 魔法代码：自动适应列数，最小宽度350px，不够就换行。手机端自动变单列 */
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 40px; /* 卡片之间的间距 */
    row-gap: 60px; /* 行之间的间距大一点，更有呼吸感 */
}

/* --- 单个卡片设计 --- */
.workshop-card {
    text-decoration: none; /* 去掉链接下划线 */
    color: #2c2c2c;
    display: block;
}

/* 图片容器 - 固定纵横比，防止参差不齐 */
.card-image-wrapper {
    width: 100%;
    padding-top: 100%; /* 创造一个 1:1的正方形，非常适合展示体验类照片 */
    position: relative;
    overflow: hidden; /* 藏住放大时的溢出部分 */
    margin-bottom: 20px;
    background: #f4f4f4; /* 图片加载前的背景色 */
}

/* 实际背景图 */
.card-image {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.6s ease; /* 缓慢放大的动画 */
}

/* 鼠标悬停时的效果 */
.workshop-card:hover .card-image {
    transform: scale(1.05); /* 图片轻微放大 */
}

/* 卡片文字信息 */
.card-info h3 {
    font-family: 'Playfair Display', serif;
    font-size: 1.3rem;
    margin-bottom: 10px;
    font-weight: 600;
    line-height: 1.3;
}

/* 价格样式 */
.price-box {
    color: #A67C52; /* 使用我们定的古铜品牌色 */
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 1.1rem;
}

/* 修改WooCommerce默认价格的删除线颜色 */
.price-box del {
    color: #999;
    font-weight: 400;
    font-size: 0.9rem;
    margin-right: 10px;
}

#reviews .woocommerce-Reviews-title {
    font-size: 2.5rem;
    margin-bottom: 60px;
    text-transform: none; /* 保持优雅的小写感 */
}

/* 评价列表：三列等宽布局（已在上方统一定义） */

/* --- 细节修饰 --- */
.woocommerce-product-details__short-description {
    font-size: 1.1rem;
    color: #666;
    font-style: italic; /* 简报式风格 */
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 30px;
    margin-bottom: 30px;
}

/* ---------------------------------------------- 产品详情页样式--------------------------------------------- */
    

/* 1. 图片区域------------------------------------------------------------------- */    

/* 确保只有当前激活的图片显示 */
    .woocommerce div.product div.images .woocommerce-product-gallery .flex-viewport .slides li:not(.flex-active-slide) {
        display: none;
    }
    
    .woocommerce div.product div.images .woocommerce-product-gallery .flex-viewport .slides li.flex-active-slide {
        display: block;
    }
    
    /* 主图样式 - 固定宽高比，禁用点击跳转 */
    .woocommerce div.product div.images .woocommerce-product-gallery__image {
        width: 100%;
        margin: 0;
        padding: 0;
        cursor: default; /* 默认光标，不显示手型 */
    }
    
    .woocommerce div.product div.images .woocommerce-product-gallery__image a {
        pointer-events: none; /* 禁用链接点击 */
        cursor: default;
        display: block;
    }
    
    .woocommerce div.product div.images .woocommerce-product-gallery__image img {
        width: 100%;
        height: auto;
        display: block;
        aspect-ratio: 4/3;
        object-fit: cover;
        cursor: default; /* 不显示手型光标 */
    }
    
    /* 缩略图区域 - 2排，每排5张，总共显示10张 */
    .woocommerce div.product div.images .flex-control-thumbs {
        display: grid;
        grid-template-columns: repeat(5, 1fr); /* 每排5个，自动换行成2排 */
        gap: 12px;
        margin-top: 20px;
        padding: 0;
        list-style: none;
    }
    
    /* 限制只显示前10张缩略图 */
    .woocommerce div.product div.images .flex-control-thumbs li:nth-child(n+11) {
        display: none !important;
    }
    
    .woocommerce div.product div.images .flex-control-thumbs li {
        width: 100% !important;
        margin: 0 !important;
        aspect-ratio: 1; /* 正方形缩略图 */
        cursor: pointer;
        position: relative;
    }
    
    .woocommerce div.product div.images .flex-control-thumbs li a {
        display: block;
        width: 100%;
        height: 100%;
        cursor: pointer;
    }
    
    .woocommerce div.product div.images .flex-control-thumbs li img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 0;
        border: 2px solid transparent;
        transition: all 0.3s ease;
        display: block;
        cursor: pointer;
    }
    
    /* 缩略图悬停和激活状态 */
    .woocommerce div.product div.images .flex-control-thumbs li:hover img,
    .woocommerce div.product div.images .flex-control-thumbs li img.flex-active {
        border-color: #A67C52;
        opacity: 1;
    }
    
    /* 非激活状态的缩略图稍微降低透明度 */
    .woocommerce div.product div.images .flex-control-thumbs li:not(.flex-active-slide) img {
        opacity: 0.7;
    }
    
    .woocommerce div.product div.images .flex-control-thumbs li:not(.flex-active-slide):hover img {
        opacity: 1;
    }

/* 2. 预定区域------------------------------------------------------------------- */    

    
    
 /* 产品标题样式 - 与左侧主图上端对齐，字体放大 */
.woocommerce div.product .product_title {
        font-family: 'Playfair Display', serif;
        font-size: 2.2rem; /* 稍微减小，确保第一屏完整显示 */
        font-weight: 600;
        line-height: 1.3;
        margin-top: 0; /* 确保标题顶部与主图对齐 */
        margin-bottom: 10px; /* 缩小间距 */
        padding-top: 0;
        color: #2c2c2c;
    }
    
    /* 评分区域 */
 .woocommerce div.product .woocommerce-product-rating {
        margin-bottom: 12px; /* 缩小间距 */
        display: flex;
        align-items: center;
        gap: 10px;
    }

/* --- 右侧预订框内部元素精修 --- */

/* 价格样式 - 不放大，保持默认大小 */
.woocommerce div.product p.price {
    color: #2c2c2c;
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 8px; /* 缩小间距 */
    font-family: 'Inter', sans-serif;
    line-height: 1.4;
}

.woocommerce div.product p.price .woocommerce-Price-amount {
    color: #2c2c2c;
}

.woocommerce div.product p.price del {
    color: #999;
    font-size: 1rem;
    font-weight: 400;
    margin-right: 12px;
}


/* 按钮通用样式 */
.single_add_to_cart_button.button,
.single_buy_now_button {
    width: 100%;
    padding: 18px 30px !important;
    font-size: 0.9rem !important;
    letter-spacing: 1px;
    font-weight: 600 !important;
    border-radius: 4px !important;
    text-align: center;
    transition: all 0.3s;
    margin-bottom: 10px; /* 缩小按钮之间的间距 */
    cursor: pointer;
}

/* ----------------------以下是整个预定环节的样式 --------------- */


/* ================================================================
   202602081530 预订选项行内布局（日期+时间+数量）
   ================================================================ */

/* 1. 让表单容器变为弹性盒，允许子元素并排 */
.woocommerce div.product form.cart {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-end !important; /* 确保所有输入框底部对齐 */
    gap: 8px !important;            /* 缩小元素之间的间距 */
    width: 100% !important;
    margin-top: 0 !important; /* 移除表单上方的额外间距 */
    margin-bottom: 0 !important; /* 移除表单下方的额外间距 */
}

/* 2. 统一调整日期和时间输入框的宽度 */
.woocommerce div.product form.cart input[type="date"],
.woocommerce div.product form.cart input[type="time"],
.woocommerce div.product form.cart .wc-bookings-date-picker {
    flex: 1 1 120px !important;    /* 允许伸缩，最小宽度120px */
    width: auto !important;         /* 覆盖之前的 100% */
    margin-bottom: 8px !important; /* 缩小间距 */
    height: 50px !important;        /* 与数量框高度对齐 */
}

/* 3. 数量选择器组的布局处理 */
/* 确保减号、输入框、加号作为一个整体不被拆散 */
.woocommerce div.product form.cart > .ccl-qty-minus,
.woocommerce div.product form.cart > .quantity,
.woocommerce div.product form.cart > .ccl-qty-plus {
    margin-bottom: 8px !important; /* 缩小间距 */
}

/* 4. 强制所有按钮（加入购物车、立即购买、WhatsApp）独占一行 */
.single_add_to_cart_button.button,
.single_buy_now_button,
.single_whatsapp_button {
    flex: 0 0 100% !important;    /* 强制占据 100% 宽度实现换行 */
    margin-top: 8px !important; /* 缩小与上方元素的间距 */
}

/* 5. 调整标签样式（如果存在），确保它们留在输入框上方 */
.woocommerce div.product form.cart label {
    display: block;
    width: 100%;
    font-size: 0.8rem;
    margin-bottom: 5px; /* 缩小标签与输入框的间距 */
}


/* --- 数量选择区域优化 --- */

/* 1. Quantity 标签样式 - 独占一行，区分大小写，字体变小，间距缩短 */
.ccl-quantity-label {
    display: block; /* 让它独占一行 */
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    color: #272626;
    margin-bottom: 4px; /* 缩短标签和输入框之间的距离 */
    font-size: 0.8rem; /* 字体变小 */
    letter-spacing: 0.3px;
    text-transform: none; /* 区分大小写，不转大写 */
}

/* 2. 表单容器 - 不添加边框，纵向布局 */
form.cart {
    display: block;
    border: none !important; /* 去掉整个表单的边框 */
    width: 100%;
    margin-bottom: 0;
    border-radius: 0;
    overflow: visible;
    padding: 0;
}

/* 确保数量选择器区域按正确顺序显示 */
.woocommerce div.product form.cart {
    font-size: 0; /* 移除 inline-block 元素之间的空白 */
}

.woocommerce div.product form.cart > * {
    font-size: 1rem; /* 恢复字体大小 */
}

/* 3. 数量选择器容器 - 用一个统一边框框住减号、输入框、加号 */
.woocommerce div.product form.cart > .ccl-qty-minus,
.woocommerce div.product form.cart > .quantity,
.woocommerce div.product form.cart > .ccl-qty-plus {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    margin-bottom: 8px !important; /* 缩小间距 */
    float: none !important;
    font-size: 1rem;
}

/* 减号按钮 - 左侧，只有左边框、上边框、下边框 */
.woocommerce div.product form.cart > .ccl-qty-minus {
    border: 1px solid #e0e0e0;
    border-right: none !important; /* 去掉右边框，与输入框连接 */
    border-radius: 4px 0 0 4px;
    margin-right: 0 !important;
    margin-left: 0 !important;
}

/* 数量输入框 - 中间，只有上边框、下边框 */
.woocommerce div.product form.cart > .quantity {
    border: 1px solid #e0e0e0;
    border-left: none !important; /* 去掉左边框，与减号连接 */
    border-right: none !important; /* 去掉右边框，与加号连接 */
    border-radius: 0;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* 加号按钮 - 右侧，只有右边框、上边框、下边框 */
.woocommerce div.product form.cart > .ccl-qty-plus {
    border: 1px solid #e0e0e0;
    border-left: none !important; /* 去掉左边框，与输入框连接 */
    border-radius: 0 4px 4px 0;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* WooCommerce 原本的输入框容器 */
.woocommerce .quantity {
    margin: 0 !important;
    border: none !important; /* 去掉 quantity 本身的边框，由外层容器提供 */
}

/* 4. 输入框本体 - 确保与按钮同一行 */
.woocommerce .quantity .qty {
    width: 60px !important; /* 固定宽度 */
    height: 50px !important; /* 固定高度，与按钮一致 */
    padding: 0 !important; /* 去掉内边距 */
    border: none !important; /* 去掉自带边框 */
    background-color: #fff; /* 白色背景 */
    font-size: 1.1rem;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    color: #2c2c2c;
    text-align: center !important; /* 文字居中 */
    vertical-align: middle;
    box-sizing: border-box;
    /* 再次隐藏默认箭头 */
    -moz-appearance: textfield;
    appearance: textfield;
}
.woocommerce .quantity .qty::-webkit-outer-spin-button,
.woocommerce .quantity .qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}

/* 5. 加减按钮通用样式 - 去掉背景色和单独边框 */
.ccl-qty-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px; /* 按钮宽度 */
    height: 50px; /* 固定高度，与输入框一致 */
    background-color: transparent !important; /* 去掉背景色 */
    border: none !important; /* 去掉单独边框 */
    cursor: pointer;
    font-size: 0.9rem;
    color: #555;
    transition: all 0.2s;
    vertical-align: middle;
    box-sizing: border-box;
}

/* 按钮悬停效果 */
.ccl-qty-btn:hover {
    background-color: #f5f5f5 !important; /* 悬停时轻微背景色 */
    color: #000;
}

/* 按钮点击效果 */
.ccl-qty-btn:active {
    background-color: #ddd;
}

/* 6. 确保下方的黑色按钮和金色按钮独占一行，不在数量框内 */
.single_add_to_cart_button.button,
.single_buy_now_button,
.single_whatsapp_button,
.whatsapp-contact-box {
    flex-basis: 100%; /* 强制换行 */
    width: 100%;
    margin-top: 0; /* 确保按钮不在数量框内 */
}

/* 7. 达到最大值时的反馈动画 */
.is-max-reached {
    animation: shake 0.3s;
    color: #d9534f !important; /* 变红色提示 */
}
@keyframes shake {
    0% { transform: translateX(0); }
    25% { transform: translateX(-2px); }
    50% { transform: translateX(2px); }
    75% { transform: translateX(-1px); }
    100% { transform: translateX(0); }
}




/* 按钮1：加入购物车 (Add to cart) - 深灰色框，白色背景，主题色文字 */
.single_add_to_cart_button.button {
    background-color: #fff !important; /* 白色背景 */
    color: #A67C52 !important; /* 主题色文字 */
    border: 2px solid #A67C52 !important; /* 深灰色框 */
    margin-top: 0px !important; /* 与上方数量输入框的距离 */
}
.single_add_to_cart_button.button:hover { 
    background-color: #f5f5f5 !important; 
    border-color: #1a1a1a !important;
}

/* 按钮2：立即购买 (Buy it now) - 主题色背景，白色文字 */
.single_buy_now_button {
    display: block; /* 让A标签变成块级独占一行 */
    background-color: #A67C52 !important; /* 主题色背景 */
    color: #fff !important; /* 白色文字 */
    border: 1px solid #A67C52 !important;
    text-decoration: none;
}
.single_buy_now_button:hover {
    background-color: #8f6a47 !important; /* 悬停时稍深的主题色 */
    color: #fff !important;
    border-color: #8f6a47 !important;
}

/* --- WhatsApp 专用按钮样式 --- */

.single_whatsapp_button {
    /* 确保它是一个块级弹性盒子，让图标和文字居中对齐 */
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px; /* 图标和文字之间的间距 */
    
    /* WhatsApp 官方品牌绿 */
    background-color: #198f44 !important; 
    color: #fff !important;
    border: none !important;
    
    /* 保持和其他按钮一致的尺寸和间距 */
    width: 100%;
    padding: 18px 30px !important;
    font-size: 0.9rem !important;
    letter-spacing: 1px;
    font-weight: 600 !important;
    border-radius: 4px !important;
    text-decoration: none; /* 去掉链接下划线 */
    margin-top: 10px !important; /* 缩小间距 */
    transition: all 0.3s;
}

/* 鼠标悬停效果：颜色变深一点 */
.single_whatsapp_button:hover {
    background-color: #128C7E !important; /* WhatsApp 深绿色 */
    color: #fff !important;
}

/* 调整图标大小 */
.single_whatsapp_button i {
    font-size: 1.2rem;
}

/* 隐藏一些不需要的元素 */
.product_meta { display: none; } /* 再次确保SKU等隐藏 */

/* 隐藏促销标签 */
.woocommerce span.onsale,
.woocommerce .sale-flash,
.woocommerce div.product .onsale {
    display: none !important;
}


/* =========================================
   6. 产品详细内容区域优化 (参考 realchinatrip.com)
   ========================================= */

/* 长描述区域 - 第二行，精美排版，滚动显示 */
.ccl-long-description {
    max-width: 900px;
    margin: 80px auto 0;
    padding: 0 5%;
    clear: both;
}

.ccl-long-description .story-title {
    font-family: 'Playfair Display', serif;
    font-size: 2.25rem;
    font-weight: 600;
    margin-bottom: 30px;
    color: #2c2c2c;
}

.ccl-long-description .story-content {
    font-family: 'Inter', sans-serif;
    font-size: 1.05rem;
    line-height: 1.8;
    color: #555;
}

.ccl-long-description .story-content h2,
.ccl-long-description .story-content h3 {
    font-family: 'Playfair Display', serif;
    font-weight: 600;
    margin-top: 40px;
    margin-bottom: 20px;
    color: #2c2c2c;
}

.ccl-long-description .story-content h2 {
    font-size: 1.75rem;
}

.ccl-long-description .story-content h3 {
    font-size: 1.5rem;
}

.ccl-long-description .story-content p {
    margin-bottom: 20px;
}

.ccl-long-description .story-content ul,
.ccl-long-description .story-content ol {
    margin: 20px 0;
    padding-left: 30px;
}

.ccl-long-description .story-content li {
    margin-bottom: 12px;
    line-height: 1.7;
}

/* 产品图片优化 - 去掉圆角，添加间距 */
.woocommerce div.product div.images img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 0;
    margin-bottom: 15px;
}

.woocommerce div.product div.images img:last-child {
    margin-bottom: 0;
}

/* 确保图片轮播区域有足够的空间 */
.woocommerce-product-gallery__image {
    margin-bottom: 0;
}

/* 简短描述样式优化 */
.woocommerce div.product .woocommerce-product-details__short-description {
    font-size: 1.05rem;
    line-height: 1.7;
    color: #666;
    margin-bottom: 15px; /* 缩小间距 */
    padding-bottom: 15px; /* 缩小间距 */
    border-bottom: 1px solid #f0f0f0;
}

/* 评论区域 - 第三行，精美排版，左右对齐拉满 */
.woocommerce-tabs {
    width: 100%;
    max-width: 100%;
    margin: 80px 0 0;
    padding: 0;
    clear: both;
    grid-column: 1 / -1;
}

/* 隐藏标签页导航，直接显示所有内容 */
.woocommerce-tabs ul.tabs {
    display: none !important;
}

.woocommerce-tabs .panel {
    display: block !important;
    padding: 0;
    border: none;
    margin-bottom: 60px;
    width: 100%;
}

.woocommerce-tabs .panel h2 {
    font-family: 'Playfair Display', serif;
    font-size: 2.5rem;
    font-weight: 600;
    margin-bottom: 50px;
    text-align: center;
    color: #2c2c2c;
}

#reviews {
    margin-top: 80px;
    padding-top: 80px;
    border-top: 1px solid #eee;
    width: 100%;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 5%;
    padding-right: 5%;
}

#reviews .woocommerce-Reviews-title {
    font-family: 'Playfair Display', serif;
    font-size: 2.5rem;
    font-weight: 600;
    margin-bottom: 50px;
    text-align: center;
    color: #2c2c2c;
}

#commentform {
    max-width: 100%;
}

#commentform input[type="text"],
#commentform input[type="email"],
#commentform textarea {
    width: 100%;
    padding: 15px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    margin-bottom: 20px;
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    background: #fff;
    transition: border-color 0.3s;
    box-sizing: border-box;
}

#commentform input[type="text"]:focus,
#commentform input[type="email"]:focus,
#commentform textarea:focus {
    outline: none;
    border-color: #A67C52;
}

#commentform textarea {
    min-height: 150px;
    resize: vertical;
}

#commentform #submit {
    background: #2c2c2c;
    color: #fff;
    padding: 15px 40px;
    border: none;
    border-radius: 4px;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 2px;
    cursor: pointer;
    transition: all 0.3s;
    font-size: 0.85rem;
}

#commentform #submit:hover {
    background: #A67C52;
}


/* =========================================
   7. 整体页面留白和间距优化
   ========================================= */

/* 优化产品摘要区域内部间距 */
.woocommerce div.product div.summary > * {
    margin-bottom: 10px; /* 缩小间距 */
}

.woocommerce div.product div.summary > *:last-child {
    margin-bottom: 0;
}

/* 确保图片区域不会过宽 */
@media (min-width: 992px) {
    .woocommerce div.product div.images {
        max-width: 100%;
    }
}


.main-nav {
    height: 80px;
    display: flex;
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 确保内容垂直居中 */
}

.nav-container {
    width: 90%;
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Logo 样式 */
.nav-container .logo {
    font-family: 'Playfair Display', serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff; /* 默认白色 */
    text-decoration: none;
    letter-spacing: 1px;
    white-space: nowrap;
    flex-shrink: 0; /* 防止logo被压缩 */
}

/* 右侧导航区域 - 靠右对齐 */
.nav-right {
    display: flex;
    align-items: center;
    gap: 40px;
    margin-left: auto; /* 靠右对齐 */
}

.nav-menu {
    display: flex;
    list-style: none;
    gap: 35px; /* 减小间距，确保About Us在同一行 */
    margin: 0;
    padding: 0;
    align-items: center;
    flex-wrap: nowrap; /* 防止换行 */
}

.nav-menu li {
    margin: 0;
    padding: 0;
    white-space: nowrap; /* 防止文字换行 */
}

.nav-menu a {
    text-decoration: none;
    color: #fff; /* 首页白色，非首页也是白色 */
    font-weight: 500;
    font-size: 0.85rem; /* 稍微减小字体，确保About Us在同一行 */
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: color 0.3s;
    position: relative;
}

.nav-menu a:hover { 
    color: #A67C52; 
}

.nav-menu a::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background: #A67C52;
    transition: width 0.3s;
}

.nav-menu a:hover::after {
    width: 100%;
}

/* 用户动作区 - 统一样式 */
.user-actions {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-shrink: 0; /* 防止被压缩 */
}

.user-name {
    color: #fff; /* 首页白色，非首页也是白色 */
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: color 0.3s;
    white-space: nowrap;
}

.user-name:hover {
    color: #A67C52;
}

.book-now-btn {
    background: transparent; /* 首页透明背景 */
    color: #fff; /* 白色文字 */
    padding: 10px 20px;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: all 0.3s;
    border-radius: 2px;
    border: 1px solid #fff; /* 首页白色边框 */
    white-space: nowrap;
}

/* 首页的Book Now按钮 */
body.home .book-now-btn:hover { 
    background: #fff;
    color: #000;
}

.cart-icon {
    position: relative;
    color: #fff; /* 首页白色，非首页也是白色 */
    font-size: 1.2rem;
    text-decoration: none;
    transition: color 0.3s;
}

.cart-icon:hover {
    color: #A67C52;
}

.cart-count {
    position: absolute;
    top: -10px;
    right: -10px;
    background: #A67C52;
    color: #fff;
    font-size: 0.7rem;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}

/* =========================================
   10. Tips & News 列表页样式 (Archive Design)
   ========================================= */

/* 顶部标题区 */
.archive-header {
    background-color: #fcfaf7; /* 淡淡的米黄色，增加人文感 */
    padding: 100px 0 60px;
    text-align: center;
}

.archive-title {
    font-family: 'Playfair Display', serif;
    font-size: 3.5rem;
    color: #2c2c2c;
    margin-bottom: 20px;
}

.archive-description {
    max-width: 700px;
    margin: 0 auto;
    color: #666;
    font-size: 1.1rem;
    line-height: 1.6;
}

/* 博客网格布局 */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    gap: 50px;
    row-gap: 70px;
}

/* 博客卡片设计 */
.blog-card {
    transition: transform 0.4s ease;
}

.blog-card .card-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

/* 缩略图容器：固定 16:9 比例 */
.blog-thumbnail {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 Aspect Ratio */
    overflow: hidden;
    margin-bottom: 25px;
    background: #f0f0f0;
}

.blog-thumbnail img {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.2, 1, 0.3, 1);
}

.blog-card:hover .blog-thumbnail img {
    transform: scale(1.1);
}

/* 分类标签：浮在图片上 */
.category-tag {
    position: absolute;
    top: 20px;
    left: 20px;
    background: rgba(255, 255, 255, 0.9);
    padding: 5px 15px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #2c2c2c;
}

/* 文字内容区 */
.blog-meta {
    font-size: 0.85rem;
    color: #A67C52; /* 品牌金色 */
    margin-bottom: 12px;
    font-weight: 500;
}

.blog-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.6rem;
    line-height: 1.3;
    margin-bottom: 15px;
    color: #2c2c2c;
    transition: color 0.3s;
}

.blog-card:hover .blog-title {
    color: #A67C52;
}

.blog-excerpt {
    color: #666;
    line-height: 1.7;
    font-size: 0.95rem;
    margin-bottom: 20px;
}

/* "Read More" 箭头链接 */
.read-more {
    font-size: 0.9rem;
    font-weight: 700;
    color: #2c2c2c;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.read-more i {
    transition: transform 0.3s;
}

.blog-card:hover .read-more i {
    transform: translateX(10px);
}

/* 分页美化 */
.pagination {
    margin-top: 80px;
    text-align: center;
}

.pagination .nav-links {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.pagination a, .pagination .current {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #2c2c2c;
    border: 1px solid #eee;
    transition: all 0.3s;
}

.pagination .current, .pagination a:hover {
    background: #2c2c2c;
    color: #fff;
    border-color: #2c2c2c;
}

/* =========================================
   11. 文章详情页样式 (Single Post)
   ========================================= */

.single-post-page {
    padding-top: 100px;
}

.post-header {
    padding: 60px 0 40px;
    text-align: center;
    border-bottom: 1px solid #f0f0f0;
}

.post-meta {
    margin-bottom: 20px;
    font-size: 0.9rem;
    color: #A67C52;
    font-weight: 500;
}

.post-meta .post-category {
    text-transform: uppercase;
    letter-spacing: 1px;
}

.post-meta .post-date {
    margin-left: 15px;
    color: #666;
}

.post-title {
    font-family: 'Playfair Display', serif;
    font-size: 3rem;
    font-weight: 700;
    line-height: 1.2;
    color: #2c2c2c;
    max-width: 900px;
    margin: 0 auto;
}

.post-featured-image {
    margin: 40px 0;
}

.post-featured-image img {
    width: 100%;
    height: auto;
    display: block;
}

.post-content {
    padding: 60px 0;
}

.post-body {
    max-width: 800px;
    margin: 0 auto;
    font-size: 1.1rem;
    line-height: 1.8;
    color: #333;
}

.post-body p {
    margin-bottom: 25px;
}

.post-body h2,
.post-body h3 {
    font-family: 'Playfair Display', serif;
    margin-top: 40px;
    margin-bottom: 20px;
    color: #2c2c2c;
}

.post-body h2 {
    font-size: 2rem;
}

.post-body h3 {
    font-size: 1.5rem;
}

.post-body img {
    width: 100%;
    height: auto;
    margin: 30px 0;
}

.post-footer {
    padding: 40px 0;
    border-top: 1px solid #f0f0f0;
}

.post-tags {
    text-align: center;
}

.post-tags a {
    display: inline-block;
    padding: 5px 15px;
    margin: 5px;
    background: #f5f5f5;
    color: #2c2c2c;
    text-decoration: none;
    font-size: 0.85rem;
    border-radius: 20px;
    transition: all 0.3s;
}

.post-tags a:hover {
    background: #A67C52;
    color: #fff;
}

/* =========================================
   12. 全局页脚样式 (参考 realchinatrip.com)
   ========================================= */

.site-footer {
    background: #2c2c2c;
    color: #fff;
    padding: 60px 0 30px;
    margin-top: 100px;
}

.footer-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 5%;
}

.footer-content {
    display: grid;
    grid-template-columns: 2fr 1.5fr 1.5fr;
    gap: 60px;
    margin-bottom: 50px;
}

.footer-brand {
    max-width: 400px;
}

.footer-logo {
    font-family: 'Playfair Display', serif;
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 15px;
    color: #fff;
}

.footer-tagline {
    font-size: 1.1rem;
    font-style: italic;
    margin-bottom: 15px;
    color: #A67C52;
}

.footer-description {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #ccc;
}

.footer-heading {
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 20px;
    color: #fff;
}

.footer-links ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: 12px;
}

.footer-links a {
    color: #ccc;
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.3s;
}

.footer-links a:hover {
    color: #A67C52;
}

.footer-contact .contact-item {
    margin-bottom: 20px;
    font-size: 0.9rem;
    line-height: 1.6;
    color: #ccc;
}

.footer-contact .contact-item strong {
    color: #fff;
    display: block;
    margin-bottom: 5px;
}

.footer-contact .contact-item a {
    color: #A67C52;
    text-decoration: none;
}

.footer-contact .contact-item a:hover {
    text-decoration: underline;
}

.social-links {
    display: flex;
    gap: 15px;
    margin-top: 20px;
}

.social-links a {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.1);
    color: #fff;
    border-radius: 50%;
    text-decoration: none;
    transition: all 0.3s;
    font-size: 1.1rem;
}

.social-links a:hover {
    background: #A67C52;
    transform: translateY(-2px);
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 30px;
    border-top: 1px solid rgba(255,255,255,0.1);
    font-size: 0.85rem;
    color: #999;
}

.footer-legal {
    display: flex;
    align-items: center;
    gap: 15px;
}

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

.footer-legal a:hover {
    color: #A67C52;
}

.footer-legal span {
    color: #666;
}

/* =========================================
   13. 静态页面样式 (Page Template)
   ========================================= */

.page-template {
    padding-top: 100px;
}

.page-header {
    padding: 60px 0 40px;
    text-align: center;
    border-bottom: 1px solid #f0f0f0;
    background: #fcfaf7;
}

.page-title {
    font-family: 'Playfair Display', serif;
    font-size: 3rem;
    font-weight: 700;
    line-height: 1.2;
    color: #2c2c2c;
    max-width: 900px;
    margin: 0 auto;
}

.page-body {
    padding: 60px 0;
}

.page-content-wrapper {
    max-width: 800px;
    margin: 0 auto;
    font-size: 1.1rem;
    line-height: 1.8;
    color: #333;
}

.page-content-wrapper p {
    margin-bottom: 25px;
}

.page-content-wrapper h2,
.page-content-wrapper h3 {
    font-family: 'Playfair Display', serif;
    margin-top: 40px;
    margin-bottom: 20px;
    color: #2c2c2c;
}

.page-content-wrapper h2 {
    font-size: 2rem;
}

.page-content-wrapper h3 {
    font-size: 1.5rem;
}

.page-content-wrapper img {
    width: 100%;
    height: auto;
    margin: 30px 0;
}

/* 响应式设计 */
@media (max-width: 991px) {
    .footer-content {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .footer-bottom {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
    
    .nav-right {
        gap: 20px;
    }
    
    .nav-menu {
        gap: 20px;
    }
    
    .nav-menu a {
        font-size: 0.75rem; /* 移动端更小字体，确保About Us在同一行 */
    }
    
    .page-title {
        font-size: 2rem;
    }
}

/* =========================================
   12. About Us 页面样式
   ========================================= */

   .about-us-page .page-header {
    text-align: center;
    background: #fcfaf7;
    border-bottom: 1px solid #eee;
}

.about-us-page .page-title {
    font-family: 'Playfair Display', serif;
    font-size: 4rem;
    margin-bottom: 15px;
}

.about-us-page .subtitle {
    font-size: 1.2rem;
    color: #A67C52;
    letter-spacing: 1px;
}

/* 两栏布局 */
.grid-2-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.story-content h2 {
    font-family: 'Playfair Display', serif;
    font-size: 2.5rem;
    margin-bottom: 30px;
}

.story-content p {
    line-height: 1.8;
    color: #555;
    margin-bottom: 20px;
    font-size: 1.1rem;
}

.story-image img {
    width: 100%;
    height: 500px;
    object-fit: cover;
    border-radius: 4px;
    box-shadow: 20px 20px 0px #f4eee8; /* 增加一个装饰性背景色块 */
}

/* 手机端适配 */
@media (max-width: 991px) {
    .grid-2-cols {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .story-image img { height: 350px; }
}

/* =========================================
   14. Tours 商店页面美化 - 参考 realchinatrip.com
   ========================================= */

.woocommerce-shop-page {
    padding-top: 0;
    min-height: calc(100vh - 80px);
}

/* 隐藏商店页面的标题和面包屑 */
.woocommerce-products-header,
.woocommerce-breadcrumb {
    display: none !important;
}

/* 修改后的全宽商店布局 */
.shop-layout {
    display: block; /* 取消网格布局，改为块级布局 */
    width: 100%;
}

.shop-main-content {
    width: 100%; /* 确保内容占据 100% 宽度 */
}

/* 商店页面产品网格 - 3列大图显示 */
.woocommerce ul.products {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 50px !important;
    list-style: none;
    padding: 0;
    margin: 0 !important;
    width: 100%;
}

/* 消除 Tours 页面第一个格子为空的问题 */
.woocommerce ul.products::before,
.woocommerce ul.products::after {
    display: none !important; /* 强制隐藏清除浮动的伪元素 */
    content: none !important;
}

.woocommerce ul.products li.product {
    margin: 0 !important;
    width: 100% !important;
    display: flex !important; /* 改为 flex 布局确保内容充满高度 */
    flex-direction: column;
    background: #fff;
    border: none;
    box-shadow: none;
    padding: 0;
    text-align: left;  
}

.woocommerce ul.products li.product .woocommerce-loop-product__link {
    text-decoration: none;
    color: inherit;
    display: block;
    width: 100%;
}

.woocommerce ul.products li.product img {
    width: 100%;
    height: auto;
    aspect-ratio: 3/2; /* 放大图片比例，更大气 */
    object-fit: cover;
    margin-bottom: 15px;
    transition: transform 0.6s ease;
    display: block;
}

.woocommerce ul.products li.product:hover img {
    transform: scale(1.05);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-family: 'Playfair Display', serif;
    font-size: 1.2rem; /* 缩小字体 */
    font-weight: 600;
    margin-bottom: 8px;
    color: #2c2c2c;
    line-height: 1.3;
}

.woocommerce ul.products li.product .price {
    color: #A67C52;
    font-size: 1.1rem; /* 稍微缩小价格字体 */
    font-weight: 600;
}

.woocommerce ul.products li.product .button {
    display: none; /* 隐藏列表页的按钮 */
}

/* 商店页面排序和结果计数 */
.woocommerce-result-count,
.woocommerce-ordering {
    margin: 30px 0;
    font-size: 0.9rem;
    color: #666;
}

.woocommerce-ordering select {
    padding: 8px 15px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
}

/* =========================================
   15. 用户评价系统美化 (WooCommerce Reviews)
   ========================================= */

/* 1. 评价区域容器 */
#reviews {
    margin-top: 80px;
    padding-top: 80px;
    border-top: 1px solid #eee;
}

#reviews h2.woocommerce-Reviews-title {
    font-family: 'Playfair Display', serif;
    font-size: 2.2rem;
    margin-bottom: 40px;
    text-align: center;
}

/* 2. 评价列表样式 - 默认3条评论一行，点击后显示9条（3行3列） */
.commentlist {
    list-style: none;
    padding: 0;
    max-width: 1000px;
    margin: 0 auto 60px;
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 30px !important;
    width: 100%;
    grid-auto-rows: minmax(400px, auto); /* 确保每行高度一致 */
}
/* 消除评价区域第一个格子为空的问题 */
.commentlist::before,
.commentlist::after {
    display: none !important; /* 强制隐藏伪元素 */
    content: none !important;
}

/* 默认只显示前3条评论 */
.commentlist li.review {
    margin: 0 !important;
    display: flex !important; /* 确保评价卡片也是弹性布局 */
    flex-direction: column;
    padding: 0 !important; /* 取消内边距 */
    border: none !important; /* 隐藏边框 */
    border-radius: 4px;
    background: #fff;
    gap: 0;
    height: 100%; /* 确保等高等宽 */
    min-height: 300px; /* 设置最小高度 */
    overflow: hidden; /* 隐藏溢出内容 */
    position: relative;
}

/* 默认只显示前3条评论 */
.commentlist li.review:nth-child(n+4) {
    display: none !important;
}

/* 显示9条评论时的样式（点击Read More后） */
.commentlist.show-more li.review:nth-child(n+4):nth-child(-n+12) {
    display: flex !important;
}

/* 显示9条评论时，隐藏第13条及以后的评论 */
.commentlist.show-more li.review:nth-child(n+13) {
    display: none !important;
}

/* Read More 按钮 */
.reviews-read-more-wrapper {
    text-align: center;
    margin: 40px 0;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 5%;
}

.reviews-read-more-btn {
    display: inline-block;
    padding: 15px 40px;
    background: #fff;
    color: #A67C52;
    border: 2px solid #A67C52;
    border-radius: 4px;
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 1px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s;
}

.reviews-read-more-btn:hover {
    background: #A67C52;
    color: #fff;
}

/* Read More按钮始终显示（用于切换显示/隐藏） */
.reviews-read-more-wrapper {
    display: block !important;
}

/* 头像圆角化 */
.commentlist li.review img.avatar {
    width: 50px !important;
    height: 50px !important;
    border-radius: 50%;
    border: 1px solid #eee;
    flex-shrink: 0;
}

/* 确保评论卡片等高等宽 */
.commentlist li.review {
    height: 400px; /* 固定高度，确保等高等宽 */
    display: grid !important;
    grid-template-rows: auto 1fr; /* 头部固定，内容区域可滚动 */
    align-items: stretch;
}

/* 评价内容区 - 三列布局时的样式，可滚动 */
.commentlist li.review .comment-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 20px; /* 内容区域的内边距 */
    overflow-y: auto; /* 内容过长时可滚动 */
    overflow-x: hidden;
    min-height: 0; /* 允许flex子元素缩小 */
}

/* 评价卡片内的头像和内容布局 */
.commentlist li.review .comment-container {
    display: flex;
    gap: 15px;
    width: 100%;
    padding: 20px 20px 15px 20px; /* 头部区域的内边距 */
    border-bottom: 1px solid #f0f0f0;
    flex-shrink: 0; /* 防止头部被压缩 */
}

.commentlist li.review .star-rating {
    margin-bottom: 10px;
    padding: 0 20px;
    flex-shrink: 0;
}

.commentlist li.review .description {
    font-size: 0.95rem;
    line-height: 1.7;
    color: #555;
    margin: 0;
}

.comment-text .meta {
    margin-bottom: 0;
    padding: 0;
}

.comment-text .woocommerce-review-name {
    font-weight: 700;
    color: #2c2c2c;
    font-size: 1rem; /* 稍微缩小 */
    display: block;
    margin-bottom: 5px;
}

.comment-text .woocommerce-review-dash { display: none; } /* 隐藏丑陋的短横线 */

.comment-text .woocommerce-review-published-date {
    font-size: 0.85rem;
    color: #999;
}

/* 星级美化 */
.star-rating {
    color: #A67C52; /* 品牌金 */
    font-size: 0.9rem;
    margin-bottom: 15px;
}

.description {
    line-height: 1.8;
    color: #555;
    font-size: 1rem;
}

/* 3. "添加评价"表单美化 - 隐藏式设计 */
#review_form_wrapper {
    max-width: 1000px;
    margin: 60px auto 0;
    padding: 0;
}

/* 添加评价按钮 */
#review_form_wrapper .review-form-toggle {
    display: block;
    width: 100%;
    padding: 18px 30px;
    background: #fff;
    color: #A67C52;
    border: 2px solid #A67C52;
    border-radius: 4px;
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 1px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s;
    margin-bottom: 0;
}

#review_form_wrapper .review-form-toggle:hover {
    background: #A67C52;
    color: #fff;
}

/* 评价表单容器 - 默认隐藏 */
#review_form_wrapper #review_form {
    display: none;
    background: #fcfaf7;
    padding: 50px;
    margin-top: 30px;
    border-radius: 8px;
    border: 1px solid #f0f0f0;
}

/* 显示表单时 */
#review_form_wrapper.show-form #review_form {
    display: block;
}

/* 隐藏产品页面底部的系统内容（分类、标签、归档等） */
.woocommerce div.product .product_meta,
.woocommerce div.product .entry-meta,
.woocommerce div.product .entry-footer,
.woocommerce div.product .post-tags,
.woocommerce div.product .post-categories,
.woocommerce div.product .product-tags {
    display: none !important;
}

/* =========================================
   评价区域响应式设计
   ========================================= */

@media (max-width: 992px) {
    /* 移动端评价区域改为单列 */
    .commentlist {
        grid-template-columns: 1fr !important;
        gap: 20px;
    }
    
    #reviews {
        padding-left: 4% !important;
        padding-right: 4% !important;
    }
    
    .reviews-read-more-wrapper {
        padding: 0 4% !important;
    }
    
    #review_form_wrapper {
        padding: 0 4%;
    }
    
    #review_form_wrapper #review_form {
        padding: 30px 20px;
    }
}

#reply-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.6rem;
    margin-bottom: 30px;
    display: block;
}

/* 输入框样式 */
#commentform input[type="text"],
#commentform input[type="email"],
#commentform textarea {
    width: 100%;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-bottom: 20px;
    font-family: 'Inter', sans-serif;
}

/* 提交按钮 */
#commentform #submit {
    background: #2c2c2c;
    color: #fff;
    padding: 15px 40px;
    border: none;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 2px;
    cursor: pointer;
    transition: all 0.3s;
}

#commentform #submit:hover {
    background: #A67C52;
}

/* ================================================================
   202602081515 最终解决方案：全方位解决贴边、间距与排版
   ================================================================ */

/* 1. 强制产品页主容器居中并增加侧边保护间距 */
body.single-product div.product {
    max-width: 1300px !important;    /* 限制整体最大宽度，防止在大屏幕上拉得太开 */
    margin: 0 auto !important;       /* 整体水平居中 */
    padding-left: 5% !important;     /* 强制左侧留白，防止贴边 */
    padding-right: 5% !important;    /* 强制右侧留白，防止贴边 */
    padding-top: 20px !important;    /* 增加顶部间距，彻底推开导航栏 */
}

@media (min-width: 992px) {
    /* 2. 左右排版包装层 */
    .product-top-wrapper {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: flex-start !important;
        gap: 60px;                   /* 图片和预定区的间距 */
        width: 100% !important;      /* 占据父容器 100% 宽度（受父容器 5% padding 保护） */
        margin-bottom: 80px !important;
    }

    /* 3. 左侧图片区域：固定 52% */
    .product-top-wrapper .product-images-wrapper {
        flex: 0 0 52% !important; 
        max-width: 52% !important;
        width: 52% !important;
    }

    /* 4. 右侧预定区域（summary）：固定 42% */
    .product-top-wrapper .summary.entry-summary {
        flex: 0 0 42% !important; 
        max-width: 42% !important;
        width: 42% !important;
        float: none !important;
        position: sticky !important; /* 滚动时悬浮 */
        top: 0px; 
    }

    /* 5. 修复下方的长描述和评价区域 */
    .ccl-long-description, 
    #reviews {
        clear: both;
        width: 100% !important;      /* 随主容器宽度 */
        max-width: 1000px !important; /* 文字区域窄一点更好阅读 */
        margin: 100px auto !important;
        display: block !important;
    }
}

/* 移动端适配：确保手机上也有间距 */
@media (max-width: 991px) {
    body.single-product div.product {
        padding-top: 40px !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    
    .product-top-wrapper {
        display: block !important;
    }
    
    .product-top-wrapper .product-images-wrapper,
    .product-top-wrapper .summary.entry-summary {
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 30px;
    }
}

/* 强力隐藏所有系统自带的侧边栏小工具容器 */
.shop-sidebar, 
.widget_pages, 
.widget_archive, 
.widget_categories, 
#secondary {
    display: none !important;
}

/* 确保详情页容器依然保持居中全宽 */
body.single-product .product-top-wrapper {
    margin-left: auto !important;
    margin-right: auto !important;
}