/*
Theme Name:     Astra Child
Theme URI:      https://wpastra.com/
Description:    Astra 子主题 - Kalos Jewellery定制版
Author:         Your Name
Author URI:     https://www.kalosjewellery.com
Template:       astra
Version:        1.0.0
Text Domain:    astra-child
*/

/**********************************************************************************************************************************/

/* 所有产品项容器的主图+hover图容器 */
.woocommerce ul.products li.product .woocommerce-loop-product__link {
  position: relative;
  display: block;
  overflow: hidden;
}

/* 主图样式 */
.woocommerce ul.products li.product .main-image {
  display: block;
  width: 100%;
  height: auto;
  transition: opacity 0.4s ease;
  backface-visibility: hidden;
}

/* hover图样式，初始隐藏 */
.woocommerce ul.products li.product .hover-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 1;
  backface-visibility: hidden;
}

/* 鼠标悬停时切换主图与hover图 */
.woocommerce ul.products li.product .woocommerce-loop-product__link:hover .main-image {
  opacity: 0;
}
.woocommerce ul.products li.product .woocommerce-loop-product__link:hover .hover-image {
  opacity: 1;
}





/**********************************************************************************************************************************/
/* 这是产品浮现add to cart按钮的代码 */
/* 产品图区域设为定位容器 */
/* 设置图片容器为定位容器 */
.woocommerce ul.products li.product .astra-shop-thumbnail-wrap {
  position: relative;
}

/* 按钮初始完全隐藏状态 */
/*原*/
.woocommerce-loop-product__buttons {
  display: none !important;
  opacity: 0;
  visibility: hidden;
}



/* 移动成功后，允许按钮参与动画显示 */
.woocommerce-loop-product__buttons.kalos-moved {
  display: block !important;
  opacity: 0;
  visibility: hidden;
  position: absolute;
  bottom: 5%;
  left: 50%;
  transform: translateX(-50%) translateY(100%);
  transition: all 0.3s ease;
  z-index: 5;
  width: 80%;
  text-align: center;
}

/* 鼠标悬停时显示按钮 */
.woocommerce ul.products li.product:hover .woocommerce-loop-product__buttons.kalos-moved {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* 按钮自身样式不变 */
.woocommerce-loop-product__buttons .button {
  display: inline-block;
}





/**********************************************************************************************************************************/
/* 一行显示几个产品*/
/* 手机 */
@media (max-width: 767px) {
  /* 手机端样式 */
/* 一行显示 2 个 */
ul.products.elementor-grid.columns-4 {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 30px; /* 可选：添加列之间的间距 */
}
}

/* 平板 */
@media (min-width: 768px) and (max-width: 1024px) {
  /* 平板样式 */
/* 一行显示 2 个 */
ul.products.elementor-grid.columns-4 {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 30px; /* 可选：添加列之间的间距 */
}
}

/* 桌面 */
@media (min-width: 1025px) {
  /* 桌面样式 */
/* 一行显示 4 个 */
ul.products.elementor-grid.columns-4 {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 30px; /* 可选：添加列之间的间距 */
}
}

/**********************************************************************************************************************************/
/* 让每个产品卡片内容顶部对齐 */
.woocommerce ul.products li.product {
  display: flex;
  flex-direction: column;
  justify-content: flex-start !important; /* 顶部对齐 */
  height: 100%;
}



/*****************************************************************************************************************/
/* ✅ 产品详情页隐藏 warranty_info */
.single-product .warranty_info {
  display: none !important;
}

/* ✅ 购物车弹窗隐藏 warranty dt/dd 信息 */
.elementor-menu-cart__product dt.variation-Returnsacceptedwithin7daysofdelivery,
.elementor-menu-cart__product dd.variation-Returnsacceptedwithin7daysofdelivery {
  display: none !important;
}

/*****************************************************************************************************************/
/* 完全隐藏数量输入框及其容器 */
form.cart .quantity {
  display: none !important;
}

/* 让 Add to Cart 按钮独占整行 */
form.cart {
  display: flex;
  flex-direction: column;
}

form.cart button.single_add_to_cart_button {
  width: 100%;
}

/* 隐藏 WooCommerce 默认 SVG 图标，只保留 Elementor 的 */
.single_add_to_cart_button svg + svg {
    display: none !important;
}


/*****************************************************************************************************************/
/* 订单退货页面申请栏和状态栏间距 */
.kalos-warranty-wrapper h2 {
    font-size: 22px;
    font-weight: 600;
    margin-top: 40px !important;
}
/* 让按钮靠右显示 */
.kalos-warranty-wrapper form {
    text-align: right;
}
.kalos-warranty-wrapper .warranty-button.button {
    display: inline-block;
    text-transform: uppercase; /* 按钮文字全部大写 */
    margin-top: 15px;
}

/* 退货页面的照片尺寸修改 */
.woocommerce .warranty-table td img {
    width: 100px;
    height: auto;
    /* border-radius: 4px !important; */
}
/* ✅ checkbox 所在的单元格居中 */
.warranty-table td.check-column {
    vertical-align: middle;
            }
/* ✅ checkbox 本身水平居中显示 */
.warranty-table td.check-column input[type="checkbox"] {
    display: inline-block;
    margin: auto 10px;
    float: none;
    width: 12px;
    height: 12px;
    transform: scale(1.4);
    cursor: pointer;
}
/* ✅ Price 和 Details 单元格中的文字水平居中 */
.warranty-table td:nth-child(3),
.warranty-table td:nth-child(4) {
    vertical-align: middle;
}

/* ✅ 限定作用于第一个 warranty-table 表格 */
.kalos-warranty-wrapper form:first-of-type table.warranty-table tbody tr:not(:first-child) {
    cursor: pointer;
    transition: background-color 0.3s;
}

/* ✅ hover 状态高亮，排除标题行 */
.kalos-warranty-wrapper form:first-of-type table.warranty-table tbody tr:not(:first-child):hover {
    background-color: #f6efe6;
}

/* ✅ 被选中的行背景高亮 */
.kalos-warranty-wrapper form:first-of-type table.warranty-table tbody tr.selected-row {
    background-color: #f6efe6;
}

/* ✅ 禁用表头 hover 效果 */
.kalos-warranty-wrapper form:first-of-type table.warranty-table thead tr,
.kalos-warranty-wrapper form:first-of-type table.warranty-table tbody tr:first-child {
    background-color: #fff; /* 可自定义背景色 */
    cursor: default;
}

