/*
Theme Name: Astra Child
Theme URI: https://wpastra.com/
Template: astra
Author: Brainstorm Force
Author URI: https://wpastra.com/about/?utm_source=theme_preview&utm_medium=author_link&utm_campaign=astra_theme
Description: The Astra WordPress theme is lightning-fast and highly customizable. It has over 1 million downloads and the only theme in the world with 5,700+ five-star reviews! It’s ideal for professional web designers, solopreneurs, small businesses, eCommerce, membership sites and any type of website. It offers special features and templates so it works perfectly with all page builders like Spectra, Elementor, Beaver Builder, etc. Fast performance, clean code, mobile-first design and schema markup are all built-in, making the theme exceptionally SEO-friendly. It’s fully compatible with WooCommerce, SureCart and other eCommerce plugins and comes with lots of store-friendly features and templates. Astra also provides expert support for free users. A dedicated team of fully trained WordPress experts are on hand to help with every aspect of the theme. Try the live demo of Astra: https://zipwp.org/themes/astra/
Tags: custom-menu,custom-logo,entertainment,one-column,two-columns,left-sidebar,e-commerce,right-sidebar,custom-colors,editor-style,featured-images,full-width-template,microformats,post-formats,rtl-language-support,theme-options,threaded-comments,translation-ready,blog
Version: 4.8.13.1741668056
Updated: 2025-03-10 20:40:56
*/

/* =============================
【全局修复项】
============================= */

/* 隐藏 Google reCAPTCHA 徽章 */
.grecaptcha-badge {
  visibility: hidden;
}

/* 防止 logo 文本换行导致 CLS */
@media (min-width: 768px) {
	.site-title {
  white-space: nowrap;
}
}

/* 修复图片基础样式 */
img {
  vertical-align: middle;
  border: 0;
  max-width: 100%;
  height: auto;
  display: block;
  box-sizing: border-box;
}

/* 修复支付方式logo换行问题 */
.woocommerce-checkout .payment_methods img {
    display: inline-block;
}


/* =============================
【WooCommerce 优化】
============================= */

/* 商品价格间距 */
.woocommerce-js div.product p.price,
.woocommerce-js div.product span.price {
  margin: 0 0 0.5em;
}

/* 商品缩略图占位 & CLS 修复 */
ul.products li.product .woocommerce-LoopProduct-link {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
ul.products li.product .woocommerce-LoopProduct-link img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  display: block;
}
.attachment-woocommerce_thumbnail {
  display: block;
  width: 100%;
  height: auto;
  sizes: (max-width: 420px) 100vw, 420px;
}

/* 结账页面PayPal按钮下方留白 */
body.woocommerce-checkout #ppc-button-ppcp-gateway {
  margin-bottom: 2em;
}

/* 结账页面布局调整（PC端） */
@media (min-width: 922px) {
  .woocommerce.woocommerce-checkout form #customer_details.col2-set,
  .woocommerce-page.woocommerce-checkout form #customer_details.col2-set {
    width: 48%;
    margin-right: 4%;
  }
  .woocommerce.woocommerce-checkout form #order_review,
  .woocommerce.woocommerce-checkout form #order_review_heading,
  .woocommerce-page.woocommerce-checkout form #order_review,
  .woocommerce-page.woocommerce-checkout form #order_review_heading {
    width: 48%;
  }
}

/* 评论排序下拉样式 */
.wc-block-components-review-sort-select label {
  margin-right: 5px;
}
.wc-block-components-review-sort-select select {
  padding: 8px;
  height: auto;
  width: 132px;
}
.wc-block-components-review-sort-select {
  margin-bottom: 30px;
}


/* =============================
【页面间距与模块微调】
============================= */

/* 单页内容间距调整 */
.yes-js.js_active .ast-plain-container.ast-single-post #primary {
  margin: 0;
}
@media (max-width: 921px) {
  .yes-js.js_active .ast-plain-container.ast-single-post #primary {
    padding: 0;
  }
}
.ast-separate-container .ast-woocommerce-container {
  padding: 0;
}
@media (min-width: 922px) {
  .ast-separate-container #primary,
  .ast-separate-container.ast-left-sidebar #primary,
  .ast-separate-container.ast-right-sidebar #primary {
    margin: 2.5em 0;
    padding: 0;
  }
}
#secondary {
  margin: 2.5em 0;
}

@media (max-width: 921px) {
  .ast-separate-container #primary {
    padding: 20px 0; /* 普通页稍微紧凑 */
  }
}

/* 页脚小部件间距 */
.widget {
  margin: 0 0 1.4em 0;
}

/* 顶部悬浮条价格对齐 */
span.ast-sticky-add-to-cart-action-price.price {
  margin: 0;
}


/* =============================
【移动端优化】
============================= */

/* logo 右边距调整 */
@media (max-width: 544px) {
  .site-logo-img {
    padding-right: 0.5em !important;
  }
}

/* header 边距 */
@media (max-width: 544px) {
  .ast-header-break-point #masthead .ast-mobile-header-wrap .ast-primary-header-bar,
  .ast-header-break-point #masthead .ast-mobile-header-wrap .ast-below-header-bar,
  .ast-header-break-point #masthead .ast-mobile-header-wrap .ast-above-header-bar {
    padding-left: 10px;
    padding-right: 10px;
  }
  .ast-separate-container #primary {
    padding: 10px 0; /* 普通页稍微紧凑 */
  }
}

/* logo SVG 高度修复（PC端） */
@media (min-width: 922px) {
  .astra-logo-svg:not(.sticky-custom-logo .astra-logo-svg,
  .transparent-custom-logo .astra-logo-svg,
  .advanced-header-logo .astra-logo-svg) {
    height: auto;
  }
}


/* =============================
【菜单相关 CLS 修复】
============================= */
/* 桌面端（922px及以上）隐藏移动端头部 */
@media (min-width: 922px) {
  .ast-header-break-point .ast-mobile-header-wrap {
    display: none !important;
    height: 0 !important;
    overflow: hidden !important;
  }
}

/* 移动端（767px及以下）隐藏桌面头部 */
@media (max-width: 767px) {
  .ast-header-break-point .ast-desktop-header {
    display: none !important;
    height: 0 !important;
    overflow: hidden !important;
  }
}

/* ✅ 子菜单默认隐藏 */
.main-header-menu .sub-menu {
  display: none;
  position: absolute;
  opacity: 0;
  visibility: hidden;
  top: 100%;
  left: 0;
  z-index: 9999;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  transition: opacity 0.2s ease;
}
.main-header-menu .sub-menu .sub-menu {
  left: 100%;
  top: 0;
}
.main-header-menu li:hover > .sub-menu {
  display: block;
  opacity: 1;
  visibility: visible;
}
.main-header-menu .menu-item-has-children {
  position: relative;
}

/* ✅ 子菜单箭头悬停旋转 */
.main-header-menu li.menu-item-has-children:hover > a .ast-arrow-svg {
  transform: rotate(180deg);
}


/* =============================
【轮播图样式】
============================= */

.my-slider {
  max-width: 1200px;
  aspect-ratio: 1200 / 500;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  contain: layout paint;
}
.my-slider .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Swiper 必备基础样式 —— 需手动补上 */
.swiper-container {
  width: 100%;
  height: 100%;
}

.swiper-wrapper {
  display: flex;
  transition-timing-function: ease;
  will-change: transform;
}

.swiper-slide {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
} 
/* 确保轮播容器是定位参考 */
.swiper-container {
  position: relative;
}

/* 只清除默认非自定义箭头的 ::after 内容，保留自定义箭头 */
.swiper-button-prev.swiper-button-disabled::after,
.swiper-button-next.swiper-button-disabled::after,
.swiper-button-prev:not(.custom-arrow)::after,
.swiper-button-next:not(.custom-arrow)::after {
  content: none;
}

/* 自定义箭头伪元素样式，用 !important 确保覆盖 */
.swiper-button-prev.custom-arrow::after,
.swiper-button-next.custom-arrow::after {
  content: '' !important;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 24px;
  border-style: solid;
  border-color: white;
  transform-origin: center center;
  transition: border-color 0.3s ease;
  transform: translate(-50%, -50%);
}

/* 左箭头 */
.swiper-button-prev.custom-arrow::after {
  border-width: 3px 3px 0 0;
  transform: translate(-50%, -50%) rotate(-135deg);
}

/* 右箭头 */
.swiper-button-next.custom-arrow::after {
  border-width: 0 3px 3px 0;
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* 重写箭头定位逻辑 */
.swiper-button-next,
.swiper-button-prev {
  top: 50% !important;
  transform: translateY(-50%) !important;
  margin-top: 0 !important;
  height: 60px !important;
  width: 60px !important;
  background: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 0 1px black);
}

/* 左右箭头位置 */
.swiper-button-prev {
  left: 10px;
}
.swiper-button-next {
  right: 10px;
}

/* hover 变色 */
.swiper-button-prev.custom-arrow:hover::after,
.swiper-button-next.custom-arrow:hover::after {
  border-color: #e00000;
}

/* 移动端隐藏箭头 */
@media (max-width: 768px) {
  .swiper-button-prev,
  .swiper-button-next {
    display: none !important;
  }
}

/* 隐藏整个箭头容器，避免用户误操作 */
.swiper-button-prev.custom-arrow,
.swiper-button-next.custom-arrow {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

/* 轮播初始化完成后，显示箭头 */
.my-slider.initialized .swiper-button-prev.custom-arrow,
.my-slider.initialized .swiper-button-next.custom-arrow {
  opacity: 1;
  pointer-events: auto;
}


/* =============================
【UAG 图片模块 CLS 修复】
============================= */

/* 外层占位容器 */
figure.wp-block-uagb-image__figure {
  width: 100%;
  aspect-ratio: 1.66957 / 1;
  max-width: 384px;
  margin: 0 auto;
}
figure.wp-block-uagb-image__figure img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  display: block;
}

/* 移动端响应式占位调整 */
@media only screen and (max-width: 767px) {
  figure.wp-block-uagb-image__figure {
    width: 32vw;
    aspect-ratio: 384 / 230;
  }
}

/* Pad端三图布局修复 */
@media (min-width: 546px) and (max-width: 768px) {
  [class*="uagb-block-"].wp-block-uagb-image {
    margin: 0 !important;
  }
}


/* =============================
【wishlist删除图标修改】
============================= */

/* 调整删除按钮图标大小和位置 */
.fa {
    font-size: 24px !important;
    padding-right:35px;
}


/* ==============================
   统一 User Registration 表单样式
   与 WooCommerce 登录表单一致
   ============================== */

/* 注册框宽度铺满 */
body.user-registration-page .user-registration:not(.user-registration-MyAccount) {
    max-width: 100% !important;
}

/* 表单容器 */
body.user-registration-page .user-registration.ur-frontend-form {
	background-color: var(--ast-widget-bg-color) !important; /* Astra 定义的浅灰 */
	border: 1px solid var(--ast-border-color) !important;    /* 和登录框保持一致的边框 */
	padding: 20px !important;                                /* 保持内边距 */
	border-radius: 5px !important;                           /* 圆角和登录框一致 */
}

/* 输入框 Label 样式 */
body.user-registration-page .user-registration:not(.user-registration-MyAccount) .ur-form-row .ur-form-grid .ur-field-item label:not(.user-registration-error) { 
	font-weight: 700 !important; 
	line-height: 2 !important; 
	color: #111827 !important; 
	font-size: .9rem !important; 
}

/* 必填星号 */
body.user-registration-page .user-registration .ur-frontend-form .ur-form-row .ur-form-grid label .required {
    color: red !important;
}

/* 输入框样式 */
body.user-registration-page .user-registration:not(.user-registration-MyAccount) .ur-form-row .ur-form-grid .ur-field-item .input-wrapper input,
body.user-registration-page .user-registration:not(.user-registration-MyAccount) .ur-form-row .ur-form-grid .ur-field-item .input-wrapper textarea {
    background-color: var(--ast-widget-bg-color) !important; /* 和 WooCommerce 一致 */
    border: 1px solid var(--ast-border-color) !important;
    padding: 0.75em 1em !important;
    border-radius: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    color: var(--ast-form-input-text) !important;
    line-height: 1 !important;
    box-shadow: none !important;
    transition: all 0.2s linear !important;
    min-height: 40px !important;
    max-height: 40px !important;
}

/* 输入框聚焦效果 */
body.user-registration-page .user-registration .ur-frontend-field:focus {
    border-color: var(--ast-global-color-3) !important;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.05) !important;
    outline: none !important;
}

/* 提交按钮 */
body.user-registration-page .user-registration button,
body.user-registration-page .user-registration input[type="submit"] {
    color: var(--ast-global-color-3) !important;
    border-color: var(--ast-global-color-0) !important;
    background-color: var(--ast-global-color-0) !important;
    border: none !important;
    padding: 0.75em 1.5em !important;
    border-radius: 3px !important;
    cursor: pointer !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    transition: all 0.2s linear !important;
    line-height: 20px !important;
    text-transform: uppercase !important;
    letter-spacing: 0 !important;
}

/* 提交按钮 hover */
body.user-registration-page .user-registration button:hover,
body.user-registration-page .user-registration input[type="submit"]:hover {
	color: var(--ast-global-color-4) !important;
	background-color: var(--ast-global-color-1) !important;
	border-color: var(--ast-global-color-1) !important;
}


/* 解决产品列表页排版被按钮撑开问题 */
/* 父容器允许内部选项换行 */
.cfvsw-swatches-container.cfvsw-shop-container {
  display: flex;
  flex-wrap: wrap;
  gap: 6px; /* 选项之间的间距 */
  justify-content: flex-start;
  align-items: flex-start;
}

/* 每个选项盒子：限制宽度，允许换行 */
.cfvsw-swatches-option.cfvsw-label-option {
  white-space: normal !important; /* 允许换行 */
  word-break: break-word; /* 长英文或连续字符自动断行 */
  box-sizing: border-box;
  max-width: 100%; /* 防止撑破父级 */
  /*flex: 1 1 auto;  让选项根据内容自动调整宽度 */
  min-width: 120px; /* 给按钮最小宽度，可按需调 */
  border-radius: 3px;
  padding: 4px 6px;
  text-align: center;
}

/* 文字区域内部样式 */
.cfvsw-swatch-inner {
  display: block;
  text-align: center;
  line-height: 1.3;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* 修复按钮被强制宽度导致换行 */
.cfvsw-swatches-option .cfvsw-swatch-inner {
  width: auto !important;
  max-width: 100%;
  padding: 4px 6px;
  box-sizing: border-box;
}

/* 锁死横向滚动，防止页面右侧空白 */
html, body {
    overflow-x: hidden !important;
}