/*
Theme Name: Astra Child
Template: astra
*/

/* ====== Backup of Additional CSS – Part 1（通用布局、商品卡片、WhatsApp） ======
* 源：外观 → 自定义 → 额外 CSS
*/

/* 固定 Astra Above Header 区域 */
.ast-above-header-wrap {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    z-index: 99999 !important;
    background: #fff !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
    transform: translateZ(0) !important;
}

/* 防止内容被遮住，数值请根据实际 Above Header 高度调整 */
body {
    padding-top: 60px !important;
}




/* 让产品卡片整体采用flex垂直布局 */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
    display: flex;
    flex-direction: column;
    height: 380px; /* 可根据实际需求调整 */
    box-sizing: border-box;
}

/* 产品内容区flex列布局，自动分配空间 */
.woocommerce ul.products li.product .astra-shop-thumbnail-wrap,
.woocommerce-page ul.products li.product .astra-shop-thumbnail-wrap {
    flex-shrink: 0;
}

.woocommerce ul.products li.product .astra-shop-summary-wrap,
.woocommerce-page ul.products li.product .astra-shop-summary-wrap {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    justify-content: flex-start;
    padding: 0 10px;
}

/* 标题固定两行，多余部分省略号 */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce-page ul.products li.product .woocommerce-loop-product__title {
    min-height: 2.8em; /* 两行高度，按实际字体微调 */
    max-height: 2.8em;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin-bottom: 0.5em;
}

/* 价格始终单独占一行，无论有没有价格内容 */
.woocommerce ul.products li.product .price,
.woocommerce-page ul.products li.product .price {
    min-height: 1.5em;
    display: block;
    margin-bottom: 0.5em;
}

/* 没有价格时，强制显示空白价格行 */
.woocommerce ul.products li.product .price:empty::before,
.woocommerce-page ul.products li.product .price:empty::before {
    content: '';
    display: inline-block;
    min-height: 1.5em;
    width: 100%;
}

/* 按钮始终底部对齐 */
.woocommerce ul.products li.product .button,
.woocommerce-page ul.products li.product .button {
    margin-top: auto;
}

/* 可选：让卡片内容有内边距 */
.woocommerce ul.products li.product .astra-shop-summary-wrap,
.woocommerce-page ul.products li.product .astra-shop-summary-wrap {
    padding-bottom: 10px;
}
/* 主页产品区卡片高度与内容对齐 */
.ast-woo-shop-product {
    display: flex !important;
    flex-direction: column;
    height: 500px; /* 与/shop页面一致，可微调 */
    box-sizing: border-box;
}

/* 内容区flex列布局 */
.ast-woo-shop-product .astra-shop-summary-wrap {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    justify-content: flex-start;
    padding: 0 10px;
}

/* 标题固定两行，多余部分省略号 */
.ast-woo-shop-product .woocommerce-loop-product__title {
    min-height: 2.8em;
    max-height: 2.8em;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin-bottom: 0.5em;
}

/* 价格始终单独占一行，无论有没有价格内容 */
.ast-woo-shop-product .price {
    min-height: 1.5em;
    display: block;
    margin-bottom: 0.5em;
}

/* 没有价格时，强制显示空白价格行 */
.ast-woo-shop-product .price:empty::before {
    content: '';
    display: inline-block;
    min-height: 1.5em;
    width: 100%;
}

/* 按钮始终底部对齐 */
.ast-woo-shop-product .button {
    margin-top: auto;
}




/* 仅针对主页特色产品区的产品卡片 */
.home ul.products li.product {
    display: flex !important;
    flex-direction: column;
    justify-content: flex-start;
    min-height: 450px;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
}

.home ul.products li.product .astra-shop-thumbnail-wrap {
    flex-shrink: 0;
}

.home ul.products li.product .astra-shop-summary-wrap {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 0 10px;
}

.home ul.products li.product .woocommerce-loop-product__title {
    min-height: 2.8em;
    max-height: 2.8em;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin-bottom: 0.5em;
}

.home ul.products li.product .price {
    min-height: 1.5em;
    display: block;
    margin-bottom: 0.5em;
}

.home ul.products li.product .price:empty::before {
    content: '';
    display: inline-block;
    min-height: 1.5em;
    width: 100%;
}

.home ul.products li.product .button {
    margin-top: 10px;
    width: 100%;
    position: relative;
    z-index: 2;
}


.single-product .product .price,
.single-product .product .shipping-info {
    display: block;
    margin-bottom: 10px;
}


.whatsapp-float {
 position: fixed;
 right: 20px;
 bottom: 120px;
 z-index: 9999;
 display: flex;
 flex-direction: column;
 gap: 10px;
}
.whatsapp-float a {
 background: #25D366;
 color: white;
 border-radius: 50px;
 padding: 10px 15px;
 text-decoration: none;
 font-weight: bold;
 box-shadow: 0 2px 8px rgba(0,0,0,0.2);
 display: flex;
 align-items: center;
}
.whatsapp-float img {
 width: 24px;
 height: 24px;
 margin-right: 8px;
}





.custom-coupon-list {
  display: flex;
  flex-direction: column;
  gap: 25px;
  align-items: center;
  width: 130%;
  margin: 0 auto;
}

@media (max-width: 900px) {
  .custom-coupon-list {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

.custom-coupon {
  position: relative;
  width: 100%;
  min-width: 360px;
  max-width: 600px;
  /* height: 23vw; */       /* 移除固定高度 */
  min-height: 100px;
  max-height: 250px;
  margin: 0;
  display: flex;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  border-radius: 20px;
  overflow: hidden;
  background: #fff;
  align-items: flex-start;
}


@media (max-width: 900px) {
  .custom-coupon {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: auto;
  }
}

/* 打孔半圆均匀分布（只左边） */
.coupon-hole {
  position: absolute;
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 2px #eee;
  z-index: 2;
  transform: translateY(-50%);
}
.coupon-hole.left { left: -8px; }

.coupon-left {
  width: 20%;
  background: #94143a;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  min-height: 100%;
}

.coupon-code {
  writing-mode: vertical-lr;
  font-size: 1.7vw;
  color: #fff;
  letter-spacing: 0.2vw;
  cursor: pointer;
  user-select: all;
  font-weight: bold;
  transition: background 0.2s;
  padding: 0.5vw 0;
}
.coupon-code:hover {
  background: rgba(255,255,255,0.1);
}

.coupon-right {
  width: 80%;
  background: #fff;
  padding: 2vw 2vw 1vw 2vw;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  height: 100%;
  box-sizing: border-box;
  position: relative;
}

.coupon-header {
  text-align: center;
  font-weight: bold;
  font-size: 2vw;
  color: #94143a;
  margin-bottom: 1vw;
  margin-top: 0.8vw;
  width: 100%;
}

@media (max-width: 900px) {
  .coupon-header { font-size: 5vw; }
}

.coupon-amount {
  position: absolute;
  right: 1vw;
  top: 55%;
  transform: translateY(-50%);
  font-size: 1.8vw;
  font-weight: bold;
  color: #94143a;
  text-align: right;
  min-width: 80px;
  z-index: 2;
}

@media (max-width: 900px) {
  .coupon-amount {
    font-size: 7vw;
    right: 3vw;
    min-width: 50px;
  }
}

.coupon-info {
  width: 90%;
  display: flex;
  flex-direction: column;
  gap: 0.6vw;
  align-items: flex-start;
  margin-right: 16vw; /* 给金额留出空间 */
}

.coupon-date,
.coupon-usage,
.coupon-desc {
  font-size: 0.8vw;
  color: #333;
  line-height: 1.7;
  font-weight: 500;
  word-break: break-word;
}
.coupon-desc {
  display: block;
  width: 100%;
  align-self: stretch;
}
@media (max-width: 900px) {
  .coupon-date, .coupon-usage, .coupon-desc { font-size: 2.6vw; }
}

.coupon-info {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.6vw;
  align-items: flex-start;
  margin-right: 16vw; /* 给金额留出空间 */
  margin-top: 2vw;    /* 新增：整体往下移2vw */
}

.custom-coupon-list {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 一行两个卡片 */
  gap: 32px;
  align-items: stretch;
  width: 100%;
  margin: 0 auto;
}

/* 卡片列表容器，两列均分宽度，间距适中 */
.custom-coupon-list {
  display: grid;
  grid-template-columns: 1fr 1fr;  /* 一行两列，每张卡片自动填满各自空间 */
  gap: 32px;                       /* 卡片间距，可根据需要调整 */
  width: 100%;
  margin: 0 auto;
}