/* 3D Icon in Shop Loop */
.woocommerce ul.products li.product {
    /* Ensure relative positioning so the icon can be absolute positioned relative to the card */
    position: relative; 
}

/* Fix for some themes that might not have relative positioning on the product li */
.woocommerce ul.products li.product .woocommerce-loop-product__link {
    position: relative;
    display: block;
}

/* Fix for Gutenberg / Block Themes (wc-block-product) */
.wc-block-product {
    position: relative;
}

.wc-block-product .wc-block-components-product-image {
    position: relative;
}

.three-d-loop-icon-link {
    position: absolute;
    /* Position relative to the image container */
    bottom: 10px;
    right: 10px;
    z-index: 20; /* Ensure it's above the image */
    display: block;
    width: 35px;
    height: 35px;
    transition: all 0.3s ease;
    opacity: 0.9;
    /* Reset margins that might be set by global styles */
    margin: 0 !important;
}

/* Ensure the icon is positioned correctly inside the block image container if possible, 
   otherwise it falls back to the product container */
.wc-block-components-product-image .three-d-loop-icon-link {
    bottom: 10px;
    right: 10px;
}

.three-d-loop-icon-link:hover {
    transform: scale(1.1) rotate(5deg);
    opacity: 1;
}

.three-d-loop-icon {
    width: 100%;
    height: 100%;
    display: block;
    /* Optional: Add a subtle shadow or background to make it stand out on any image */
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
    /* Ensure image resets */
    margin: 0;
    padding: 0;
    border: none;
    background: none;
}

/* 保证两个按钮为行内元素，并垂直居中 */
.woocommerce div.product form.cart .single_add_to_cart_button,
.woocommerce div.product form.cart .three-d-design-button {
  display: inline-flex !important; /* 覆盖主题可能的 block/inline-block 差异 */
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  height: auto; /* 允许高度自适应或由 padding 决定 */
  min-height: 40px; /* 设置最小高度以匹配大多数主题按钮 */
  line-height: 1.2; /* 防止行高过大导致高度不一致 */
  box-sizing: border-box;
}

/* 3D 按钮与加入购物车之间的间距 */
.woocommerce div.product form.cart .three-d-design-button {
  margin-left: 10px;
  cursor: pointer;
  /* 匹配 .woocommerce a.button.alt 样式 */
  background: #0d5ef4 !important; /* 强制使用主题定义的橙色 */
  color: #fff !important; /* 强制使用主题定义的蓝色文字 */
  border-radius: 30px !important; /* 圆角 */
  padding: 10px 20px !important;
  border: none;
  /* font-weight: 700; */
  text-decoration: none;
  opacity: 1 !important;
}

.woocommerce div.product form.cart .three-d-design-button:hover {
    /* 简单的 hover 效果，加深一点或改变透明度 */
    background-color: #3957f5 !important; 
    color: #fff !important;
}

/* 变量商品表单按钮容器横向排列（含数量、加入购物车、3D 按钮） */
/* 针对非 Block Theme */
.woocommerce div.product form.cart .variations_button,
.woocommerce div.product form.cart .single_variation_wrap .variations_button {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* 针对 Block Theme (wp-block-woocommerce-add-to-cart-form) 的 Grid 布局修复 */
/* 将 3D 按钮插入到 grid 布局中，使其与 Add to Cart 按钮并排 */
/* 通常 Grid 定义了 3 列：min-content (quantity) auto (button) auto (extra) */
/* 我们需要确保 3D 按钮在 Grid 中也能正常显示，或者改变容器布局为 Flex */

/* 强制将 variations_button 改为 Flex 布局，覆盖 Grid */
.wp-block-woocommerce-add-to-cart-form .variations_button, 
.wp-block-woocommerce-add-to-cart-form form.cart {
    display: flex !important;
    align-items: center !important; /* 确保所有子元素垂直居中 */
    flex-wrap: wrap !important;
    gap: 10px !important;
    /* 重置 Grid 相关属性 */
    grid-auto-flow: unset !important;
    grid-template-columns: unset !important;
}

/* 修复 Flex 布局下 Quantity 输入框可能被拉伸或对齐问题 */
.wp-block-woocommerce-add-to-cart-form .quantity {
    display: inline-flex !important;
    align-items: center !important;
    height: auto !important; /* 让高度由内部 input 决定，或设为 100% */
    min-height: 40px; /* 匹配按钮高度 */
    margin: 0 !important; /* 移除多余 margin */
}

/* 确保 input 本身高度合适 */
.wp-block-woocommerce-add-to-cart-form .quantity .input-text.qty {
    height: 40px !important; /* 强制匹配按钮高度 */
    min-height: 40px !important;
    line-height: 1 !important;
    padding: 0 10px !important;
    box-sizing: border-box !important;
    /* 垂直对齐 */
    vertical-align: middle !important;
}

/* 数量输入与按钮保持对齐 */