/*
Theme Name: xiezhu-travel
Description: A responsive WordPress theme with video banner, sticky menu, and custom menu overlay.
Version: 1.0
Author: Your Name
*/
html, body {
    margin: 0; padding: 0; width: 100vw; max-width: 100vw; box-sizing: border-box; font-family: 'Segoe UI', Arial, sans-serif;
}
#main-content, .container {
    width: 100vw; max-width: 100vw; margin: 0 auto; box-sizing: border-box; padding: 2% 6%;
}
.banner {
    position: relative; width: 100vw; max-width: 100vw; overflow: hidden; margin-top: 38px;
}
.banner video, .banner img {
    width: 100vw; max-width: 100vw; height: auto; display: block;
}
.banner-center-content {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; pointer-events: none; z-index: 2;
}
.banner-title {
    color: #fff; font-size: 2.2rem; font-weight: 600; text-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.banner-btn {
    margin-top: 24px; background: rgba(255,255,255,0.2); color: #fff; border: 2px solid #fff; border-radius: 24px; padding: 12px 36px; font-size: 1.1rem; cursor: pointer; pointer-events: auto; transition: background 0.2s;
}
.banner-btn:hover { background: rgba(255,255,255,0.4); }

.site-header {
    position: fixed; top: 48px; left: 0; width: 100vw; z-index: 1000; transition: background 0.3s;
    background: transparent;
}
.site-header.scrolled { background: #b6d44b;top: 0; }
.header-inner {
    display: flex; align-items: center; justify-content: space-between; padding: 0 32px; height: 64px;
}
.header-left { display: flex; align-items: center; }
.site-logo img, .site-logo svg {
    height: 40px; max-height: 40px; width: auto; display: block;
}
@media (max-width: 900px) {
    .site-logo img, .site-logo svg { height: 32px; max-height: 32px; }
}
.menu-toggle {
    display: none; flex-direction: column; justify-content: center; width: 40px; height: 40px; background: none; border: none; cursor: pointer; position: relative; z-index: 2001;
}
.menu-toggle span {
    display: block; height: 4px; width: 28px; margin: 4px 0; background: #000; border-radius: 2px; transition: 0.3s;
}
.menu-toggle.active span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.menu-toggle.active span:nth-child(2) { opacity: 0; }
.menu-toggle.active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.main-navigation { flex: 1; }
.menu { display: flex; gap: 32px; list-style: none; margin: 0; padding: 0; align-items: center; }
.menu li { position: relative; }
.menu li a { color: #222; text-decoration: none; font-size: 1.1rem; padding: 8px 0; display: block; }
.menu li.menu-item-has-children > a:after { content: '\203A'; margin-left: 8px; font-size: 1.2em; }
.header-cart { margin-left: 24px; }
.cart-icon { font-size: 1.5em;display: inline; color: #000;width: auto; height: auto; background: none;vertical-align: middle; }
.cart-count { font-size: 0.9em; color: #fff; background: #7ca526; border-radius: 50%; padding: 2px 7px; margin-left: -10px; position: relative; top: -10px; }

/* 顶部社交栏 */
.top-social-bar { width: 100vw; background: #7ca526; padding: 12px 32px; display: flex; justify-content: flex-end; align-items: center; position: fixed; top: 0; left: 0; z-index: 1100; transition: opacity 0.3s; height: 38px;}
.top-social-bar.hide { opacity: 0; pointer-events: none; }
/* 当菜单弹窗激活时隐藏社交栏 */
.menu-overlay.active ~ .top-social-bar,
.menu-overlay.active + .top-social-bar,
body:has(.menu-overlay.active) .top-social-bar {
    opacity: 0;
    pointer-events: none;
}
.social-icons { display: flex; gap: 24px; align-items: center; padding-right: 96px; }
.social-icons img { height: 32px; width: 32px; }
.wechat-icon { position: relative; }
.wechat-qr { display: none; position: absolute; top: 36px; left: 0; background: #fff; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.15); padding: 8px; }
.wechat-icon:hover .wechat-qr { display: block; }
.whatsapp-icon { position: relative; }
.whatsapp-qr { display: none; position: absolute; top: 36px; left: 0; background: #fff; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.15); padding: 8px; }
.whatsapp-icon:hover .whatsapp-qr { display: block; }
.wechat-qr img {
  width: 120px;
  height: auto;
  display: block;
}
.whatsapp-qr img {
  width: 120px;
  height: auto;
  display: block;
}
.email-icon {
  position: relative;
}

.email-popup {
  display: none;
  position: absolute;
  top: 36px;
  left: 100%;
  transform: translateX(-100%);
  background: #fff;
  color: #333;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  padding: 8px 16px;
  white-space: nowrap;
  font-size: 1rem;
  z-index: 100;
  border: 1px solid #eee;
}

.email-icon:hover .email-popup {
  display: block;
}

/* 菜单弹窗样式 */
.menu-overlay { display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.3); z-index: 1200; }
.menu-overlay.active { display: block; }
.menu-top-bar { height: 56px; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; font-size: 1.2rem; color: #fff; background: #b6d44b; border-radius: 0 0 16px 16px; }
.menu-content { background: #fff; width: 100vw; max-width: 420px; height: calc(100vh - 56px); overflow-y: auto; box-shadow: 2px 0 16px rgba(0,0,0,0.08); }
.menu-vertical { list-style: none; margin: 0; padding: 0; }
.menu-vertical li { border-bottom: 1px solid #eee; }
.menu-vertical li a { color: #222; font-size: 1.1rem; padding: 20px 24px; display: flex; justify-content: space-between; align-items: center; text-decoration: none; }
.menu-vertical li.menu-item-has-children > a:after { content: '\203A'; font-size: 1.2em; }
.menu-vertical li ul { display: none; padding-left: 0; }
.menu-vertical li.open > ul { display: block; }
.menu-vertical li ul li a { padding-left: 48px; }
#menu-close { background: none; border: none; color: #fff; font-size: 2rem; cursor: pointer; }

/* 响应式布局和菜单/汉堡切换 */
@media (max-width: 1100px) {
    .main-navigation { display: none !important; }
    .menu-toggle { display: flex !important; }
}
@media (min-width: 1101px) {
    .main-navigation { display: flex !important; }
    .menu-toggle { display: none !important; }
}
@media (max-width: 900px) {
    .header-inner { padding: 0 12px; }
    .site-logo img, .site-logo svg { height: 32px; max-height: 32px; }
    .header-cart { margin-left: 8px; }
}
@media (max-width: 600px) {
    .banner-title { font-size: 1.2rem; }
    .banner-btn { font-size: 1rem; padding: 8px 18px; }
    .footer-inner { flex-direction: column; gap: 8px; }
}

/* 页脚 */
.site-footer { width: 100vw; background: #7ca526; padding: 24px 0; }
.footer-inner { display: flex; justify-content: space-between; align-items: center; max-width: 1200px; margin: 0 auto; padding: 16px 32px; }
.footer-left { color: #fff; font-size: 1rem; }
.footer-right img { height: 40px; }

/* 其他辅助样式 */
.mobile-logo, .mobile-cart { display: none; }
@media (max-width: 900px) {
    .mobile-logo, .mobile-cart { display: block; position: fixed; z-index: 1300; }
    .mobile-logo { left: 50%; transform: translateX(-50%); top: 12px; }
    .mobile-cart { right: 16px; top: 12px; }
}


.menu-vertical li.open > .sub-menu {
    display: block;
}
.menu-vertical li.current-menu-ancestor > .sub-menu,
.menu-vertical li.current-menu-parent > .sub-menu,
.menu-vertical li.current-menu-item > .sub-menu {
    display: none !important;
}

.menu li.menu-item-has-children .sub-menu {
    display: none;
}
.menu li.menu-item-has-children.open > .sub-menu {
    display: block;
}
.menu li.menu-item-has-children:hover > .sub-menu {
    display: none;
}
/* 恢复横向菜单 hover 下拉 */
.menu li.menu-item-has-children .sub-menu {
    display: none;
    position: absolute;
    left: 0;
    top: 100%;
    min-width: 180px;
    background: #fff;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    z-index: 100;
    padding: 0;
    margin: 0;
}

.menu li.menu-item-has-children {
    position: relative;
}

.menu li.menu-item-has-children:hover > .sub-menu {
    display: block;
}

/* 子菜单项样式 */
.menu li.menu-item-has-children .sub-menu li a {
    color: #222;
    padding: 12px 24px;
    white-space: nowrap;
    font-size: 1rem;
    background: #fff;
    border-bottom: 1px solid #eee;
    display: block;
}

.menu li.menu-item-has-children .sub-menu li:last-child a {
    border-bottom: none;
}

.menu > li > a:hover,
.menu > li.current-menu-item > a {
    background: transparent !important;
    color: inherit !important;
}
.menu li.menu-item-has-children .sub-menu {
    list-style: none;
    padding-left: 0;
}

.menu li.menu-item-has-children .sub-menu li {
    list-style: none;
}
.mobile-logo img {
    max-width: 120px;
    max-height: 40px;
    width: auto;
    height: auto;
    display: block;
}
@media (max-width: 900px) {
  .header-inner {
    justify-content: center;
    position: relative;
    height: 56px;
  }
  .site-logo {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
  }
  .header-cart {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
  }
  .menu-toggle {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    display: flex !important;
    z-index: 2;
  }
  .main-navigation {
    display: none !important;
  }
}
@media (min-width: 901px) {
  .header-inner {
    justify-content: space-between;
    position: static;
    height: 64px;
  }
  .site-logo, .header-cart, .main-navigation {
    position: static;
    transform: none;
    z-index: auto;
  }
  .menu-toggle {
    display: none !important;
  }
  .main-navigation {
    display: flex !important;
  }
}
.banner-title {
    font-size: clamp(1.1rem, 4vw, 2.2rem);
    font-weight: 600;
    text-shadow: 0 2px 8px rgba(0,0,0,0.3);
    color: #fff;
}

.banner-btn {
    margin-top: 24px;
    font-size: clamp(0.95rem, 2vw, 1.1rem);
    padding: clamp(8px, 2vw, 12px) clamp(16px, 5vw, 36px);
    background: rgba(255,255,255,0.2);
    color: #fff;
    border: 2px solid #fff;
    border-radius: 24px;
    cursor: pointer;
    pointer-events: auto;
    transition: background 0.2s;
}

.banner-btn:hover {
    background: rgba(255,255,255,0.4);
}
/* 商品详情页 */
.tour-product-container {
    max-width: 1100px;
    margin: 40px auto 40px auto;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 4px 32px rgba(0,0,0,0.07);
    padding: 32px 24px;
}
.tour-product-main {
    display: flex;
    gap: 40px;
    flex-wrap: wrap;
}
.tour-product-gallery {
    flex: 1 1 340px;
    min-width: 280px;
}
.tour-product-summary {
    flex: 1 1 340px;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
.tour-product-title {
    font-size: 2.1rem;
    color: #2a3a1c;
    margin-bottom: 12px;
    font-weight: 700;
}
.woocommerce-Price-amount {
    color: #7ca526;
    font-size: 1.6rem;
    font-weight: 600;
}
.woocommerce-product-rating {
    margin-bottom: 12px;
}
.tour-product-summary .price {
    margin-bottom: 10px;
}
.tour-product-summary .button {
    background: #b6d44b;
    color: #fff;
    border: none;
    border-radius: 24px;
    padding: 14px 36px;
    font-size: 1.1rem;
    font-weight: 600;
    margin: 18px 0 12px 0;
    cursor: pointer;
    transition: background 0.2s;
}
.tour-product-summary .button:hover {
    background: #7ca526;
}
.tour-product-details {
    margin-top: 40px;
}
.woocommerce-tabs {
    background: #f8fbe9;
    border-radius: 12px;
    padding: 24px;
}
.woocommerce-Tabs-panel h2 {
    color: #7ca526;
    font-size: 1.3rem;
    margin-top: 0;
}
@media (max-width: 900px) {
    .tour-product-main {
        flex-direction: column;
        gap: 24px;
    }
    .tour-product-container {
        padding: 12px 4vw;
    }
}
@media (max-width: 600px) {
    .tour-product-title {
        font-size: 1.2rem;
    }
    .tour-product-summary .button {
        font-size: 1rem;
        padding: 10px 18px;
    }
    .tour-product-details {
        margin-top: 24px;
    }
}
/* 商品详情页内容样式 */
.tour-feature-images {
    display: flex;
    flex-direction: row;
    gap: 16px;
    flex: 0 0 60%;
    max-width: 60%;
    min-width: 200px;
    justify-content: center;
    align-items: stretch;
}
.tour-feature-imgbox {
    width: 45%;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border-radius: 14px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.04);
    background: #eee;
    display: flex;
    align-items: center;
    justify-content: center;
}
.tour-feature-imgbox img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
@media (max-width: 900px) {
    .tour-feature-images {
        flex-direction: row;
        gap: 12px;
        margin-bottom: 12px;
        min-height: unset;
        max-width: 100%;
        order: 1 !important;
    }
    .tour-feature-imgbox {
        width: 48%;
        aspect-ratio: 1/1;
    }
}
.tour-feature-row {
    display: flex !important;
    flex-direction: row !important;
}
.tour-feature-row.reverse {
    flex-direction: row-reverse !important;
}
@media (max-width: 900px) {
    .tour-feature-row,
    .tour-feature-row.reverse {
        display: flex !important;
        flex-direction: column !important;
    }
    .tour-feature-images {
        order: 1 !important;
    }
    .tour-feature-text {
        order: 2 !important;
    }
}
body div.tour-feature-row.reverse {
    flex-direction: row-reverse !important;
}
.tour-feature-row {
    display: flex !important;
    flex-direction: row !important;
}
.tour-feature-row.reverse {
    flex-direction: row-reverse !important;
}
@media (max-width: 900px) {
    .tour-feature-row,
    .tour-feature-row.reverse {
        display: flex !important;
        flex-direction: column !important;
    }
    .tour-feature-images {
        order: 1 !important;
    }
    .tour-feature-text {
        order: 2 !important;
    }
}
@media (max-width: 900px) {
    body div.tour-feature-row.reverse,
    body div.tour-feature-row {
        display: flex !important;
        flex-direction: column !important;
    }
    .tour-feature-images {
        order: 1 !important;
    }
    .tour-feature-text {
        order: 2 !important;
    }
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
    display: none !important;
}
ul.tabs.wc-tabs {
    display: none !important;
}
.flex-control-thumbs {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;   /* 允许自动换行 */
    gap: 8px;                     /* 缩略图之间的间隔更小 */
    justify-content: flex-start;
    align-items: center;
    margin-top: 8px;              /* 主图和副图间距更小 */
}
.flex-control-thumbs li {
    margin: 0 !important;
    width: 60px !important;
    height: 60px !important;
    flex: 0 0 60px;
    list-style: none;
}
.flex-control-thumbs img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.flex-control-thumbs {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;   /* 允许自动换行 */
    gap: 8px;                     /* 缩略图之间的间隔更小 */
    justify-content: flex-start;
    align-items: center;
    margin-top: 8px;              /* 主图和副图间距更小 */
}
.flex-control-thumbs li {
    margin: 0 !important;
    width: 60px !important;
    height: 60px !important;
    flex: 0 0 60px;
    list-style: none;
}
.flex-control-thumbs img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
@media (max-width: 600px) {
    .flex-control-thumbs li {
        width: 40px !important;
        height: 40px !important;
        flex: 0 0 40px;
    }
}
.my-product-content-wrapper {
  max-width: 900px;
  margin: 0 auto;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.08);
  padding: 2rem 1rem;
}
.my-product-content-wrapper * {
  box-sizing: border-box;
}

/* 悬浮按钮样式 */
.floating-btn {
  position: fixed;
  left: 30px;
  bottom: 30px;
  width: 70px;
  height: 70px;
  background: #e53935;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  text-decoration: none;
  z-index: 9999;
  transition: background 0.2s;
  text-align: center;
  padding: 0;
}
.floating-btn:hover {
  background: #ff5252;
}
.floating-btn-text {
  font-size: 0.7rem;
  line-height: 1.1;
  font-weight: bold;
  display: block;
  word-break: break-word;
  padding: 0 6px;
}

/* 页脚优势介绍样式 */
.footer-advantages {
  width: 100%;
  background: transparent;
  padding: 32px 16px 32px 0;
  display: flex;
  justify-content: center;
}
.advantages-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, auto);
  gap: 16px 20px;
  width: 100%;
  box-sizing: border-box;
  overflow-wrap: break-word;
  max-width: 900px;
}

.advantage-item {
  display: flex;
  align-items: center;
  font-size: 0.8rem;
  word-break: break-word;
  font-weight: 500;
  color: #222;
}

.checkmark {
  color: orange;
  font-size: 0.8em;
  margin-right: 8px;
}

@media (max-width: 600px) {
  .advantage-item {
    font-size: 0.5rem;
  }
}
@media (max-width: 600px) {
  .checkmark {
    font-size: 0.5rem;
  }
}
@media (max-width: 600px) {
  .footer-left {
    font-size: 0.6rem;
  }
}
@media (max-width: 600px) {
  .footer-right img {
     height: 20px;
  }
}

/* 我的账户页样式 */
.myaccount-tabs {
    display: flex;
    flex-direction: column;      
    gap: 16px;
    background: #f7f7f7;
    padding: 24px 16px;          
    border-radius: 12px;
    margin-bottom: 0;            
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    justify-content: flex-start; 
    max-width: 220px;            
    margin-left: 0;              
    margin-right: 32px;          
}
.myaccount-tab {
    display: block;
    padding: 10px 24px;
    border-radius: 8px;
    background: #fff;
    color: #333;
    text-decoration: none;
    font-weight: 500;
    transition: background 0.2s, color 0.2s, box-shadow 0.2s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}
.myaccount-tab.is-active,
.myaccount-tab:hover {
    background: #b6d44b;
    color: #fff;
    box-shadow: 0 2px 8px rgba(182,212,75,0.15);
}
.woocommerce-MyAccount-content, .myaccount-content {
    background: #fff;
    border-radius: 12px;
    padding: 32px 24px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.04);
    max-width: 900px;
    margin: 0;
    flex: 1 1 0;
}
.myaccount-layout {
    display: flex;
    align-items: flex-start;
    max-width: 1100px;
    margin: 0 auto 48px auto;
    gap: 0;
}
@media (max-width: 800px) {
    .myaccount-layout {
        flex-direction: column;
        max-width: 100%;
    }
    .myaccount-tabs {
        flex-direction: row;
        max-width: 100%;
        margin-right: 0;
        margin-bottom: 24px;
        padding: 8px;
        gap: 8px;
        overflow-x: auto;         /* 允许横向滚动 */
        white-space: nowrap;      /* 防止换行 */
        -webkit-overflow-scrolling: touch; /* iOS流畅滚动 */
    }
    .myaccount-tab {
        flex: 0 0 auto;           /* 防止被压缩 */
    }
    .woocommerce-MyAccount-content, .myaccount-content {
        padding: 16px 8px;
        max-width: 100%;
    }
}
/* 让自定义PayPal按钮和Add to cart左对齐，大小更协调 */


.my-paypal-fake-btn {
    display: block;                /* 让按钮独占一行 */
    background: #ffc439;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    transition: box-shadow 0.2s, background 0.2s;
    font-size: 0;
    height: 40px;
    margin-top: 12px;              /* 与上方按钮间距 */
    margin-left: 0;
    margin-bottom: 0;
    width: fit-content;            /* 让按钮宽度自适应内容 */
}

.my-paypal-fake-btn img {
    height: 20px;
    width: auto;
    display: block;
}

.my-paypal-fake-btn:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    background: #ffb347;
}

.single-product .cart {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0 !important;
}
.single-product .cart .single_add_to_cart_button,
.single-product .cart .my-paypal-fake-btn {
    width: fit-content;
    margin: 0 0 0 0 !important;
}
.my-paypal-fake-btn {
    margin-top: 12px;
}