/*
Theme Name: POLA AI Child
Description: 由 POLA AI WPTOOL 自动生成的区块主题子主题，继承父主题 twentytwentyfive 的设计体系。
Author: POLA
Template: twentytwentyfive
Version: 1.0.0
Text Domain: pola-ai-child
*/
/* ==========================================================================
   Market Promo Child Theme - style.css
   Parent: Twenty Twenty-Five (block theme)
   Design: 集市促销（东南亚电商/Shopee 风）
   仅使用主题预设变量，禁止写死颜色/像素值
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 全局基础：紧凑排版、粗标题
   -------------------------------------------------------------------------- */
.wp-site-blocks {
  font-family: var(--wp--preset--font-family--body);
  line-height: 1.5;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

/* --------------------------------------------------------------------------
   2. 价格前置：促销红、字号明显大于正文
   -------------------------------------------------------------------------- */
.price,
.woocommerce-Price-amount,
.wp-block-woocommerce-product-price {
  color: var(--wp--preset--color--primary);
  font-weight: 800;
}

.price del,
.woocommerce-Price-amount del,
.wp-block-woocommerce-product-price del {
  color: var(--wp--preset--color--muted);
  font-weight: 400;
  font-size: var(--wp--preset--font-size--small);
  text-decoration: line-through;
}

.price ins,
.woocommerce-Price-amount ins,
.wp-block-woocommerce-product-price ins {
  color: var(--wp--preset--color--primary);
  font-weight: 800;
  text-decoration: none;
}

/* 价格区块整体放大 */
.wp-block-woocommerce-product-price {
  font-size: var(--wp--preset--font-size--x-large);
}

/* --------------------------------------------------------------------------
   3. 折扣徽标（-30% 角标）
   -------------------------------------------------------------------------- */
.badge-diskon {
  display: inline-block;
  background: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--surface);
  font-size: var(--wp--preset--font-size--small);
  font-weight: 800;
  line-height: 1;
  padding: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--sm);
  border-radius: var(--wp--preset--spacing--sm);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* 商品卡片上的角标定位 */
.wp-block-woocommerce-product-image .badge-diskon,
.woocommerce-loop-product__link .badge-diskon {
  position: absolute;
  top: var(--wp--preset--spacing--sm);
  left: var(--wp--preset--spacing--sm);
  z-index: 2;
}

/* --------------------------------------------------------------------------
   4. 标签：Terlaris / Original
   -------------------------------------------------------------------------- */
.label-terlaris,
.label-original {
  display: inline-block;
  font-size: var(--wp--preset--font-size--small);
  font-weight: 700;
  line-height: 1;
  padding: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--sm);
  border-radius: var(--wp--preset--spacing--sm);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.label-terlaris {
  background: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--contrast);
}

.label-original {
  background: var(--wp--preset--color--base);
  color: var(--wp--preset--color--contrast);
  border: 1px dashed var(--wp--preset--color--accent);
}

/* --------------------------------------------------------------------------
   5. 促销条：虚线边框 + 橙字，像优惠券
   -------------------------------------------------------------------------- */
.promo-bar {
  border: 1px dashed var(--wp--preset--color--accent);
  border-radius: var(--wp--preset--spacing--sm);
  color: var(--wp--preset--color--accent);
  font-weight: 700;
  padding: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--md);
  background: var(--wp--preset--color--surface);
}

/* 优惠券样式 */
.coupon {
  display: inline-flex;
  align-items: center;
  gap: var(--wp--preset--spacing--sm);
  border: 1px dashed var(--wp--preset--color--accent);
  border-radius: var(--wp--preset--spacing--sm);
  color: var(--wp--preset--color--accent);
  font-weight: 700;
  padding: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--md);
  background: var(--wp--preset--color--surface);
}

/* --------------------------------------------------------------------------
   6. 信任条：Gratis Ongkir / COD / 正品保障
   -------------------------------------------------------------------------- */
.trust-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wp--preset--spacing--md);
  justify-content: center;
  align-items: center;
  background: var(--wp--preset--color--base);
  padding: var(--wp--preset--spacing--md);
  border-radius: var(--wp--preset--spacing--sm);
}

.trust-bar > * {
  font-weight: 700;
  color: var(--wp--preset--color--contrast);
}

/* --------------------------------------------------------------------------
   7. CTA 按钮：橙色主行动按钮
   -------------------------------------------------------------------------- */
.wp-block-button.is-style-cta-orange .wp-block-button__link,
.wp-block-button .wp-block-button__link.cta-orange {
  background: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--contrast);
  font-weight: 800;
  border-radius: var(--wp--preset--spacing--sm);
  padding: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--lg);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  border: none;
}

.wp-block-button.is-style-cta-orange .wp-block-button__link:hover,
.wp-block-button .wp-block-button__link.cta-orange:hover {
  background: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--surface);
}

/* --------------------------------------------------------------------------
   8. 商品卡片：白底、圆角、轻阴影、紧凑
   -------------------------------------------------------------------------- */
.wp-block-woocommerce-product-template,
.wc-block-product-template .wc-block-product {
  background: var(--wp--preset--color--surface);
  border-radius: var(--wp--preset--spacing--sm);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  padding: var(--wp--preset--spacing--md);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--sm);
}

.wc-block-product-template .wc-block-product:hover {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* 商品标题紧凑 */
.wc-block-product .wp-block-post-title,
.wc-block-product .woocommerce-loop-product__title {
  font-size: var(--wp--preset--font-size--medium);
  font-weight: 700;
  margin: 0;
}

/* --------------------------------------------------------------------------
   9. 响应式商品网格
   -------------------------------------------------------------------------- */
.wc-block-product-template,
.wp-block-woocommerce-product-template {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--wp--preset--spacing--md);
  list-style: none;
  padding: 0;
  margin: 0;
}

@media (min-width: 600px) {
  .wc-block-product-template,
  .wp-block-woocommerce-product-template {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 900px) {
  .wc-block-product-template,
  .wp-block-woocommerce-product-template {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* --------------------------------------------------------------------------
   10. 闪购条：高密度信息、促销黄渐变
   -------------------------------------------------------------------------- */
.flash-sale-bar {
  background: linear-gradient(90deg, var(--wp--preset--color--accent), var(--wp--preset--color--primary));
  color: var(--wp--preset--color--surface);
  font-weight: 800;
  padding: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--md);
  border-radius: var(--wp--preset--spacing--sm);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--wp--preset--spacing--sm);
}

/* --------------------------------------------------------------------------
   11. Sticky CTA WhatsApp（无 inline style）
   -------------------------------------------------------------------------- */
.sticky-wa {
  position: fixed;
  bottom: var(--wp--preset--spacing--md);
  right: var(--wp--preset--spacing--md);
  z-index: 999;
  display: inline-flex;
  align-items: center;
  gap: var(--wp--preset--spacing--sm);
  background: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--contrast);
  font-weight: 800;
  font-size: var(--wp--preset--font-size--small);
  padding: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--md);
  border-radius: var(--wp--preset--spacing--sm);
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  border: none;
}

.sticky-wa:hover {
  background: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--surface);
}

/* 移动端全宽底部固定 */
@media (max-width: 599px) {
  .sticky-wa {
    left: var(--wp--preset--spacing--md);
    right: var(--wp--preset--spacing--md);
    justify-content: center;
  }
}

/* --------------------------------------------------------------------------
   12. 区块节奏统一：相邻区块间距
   -------------------------------------------------------------------------- */
.wp-site-blocks > * + * {
  margin-block-start: var(--wp--preset--spacing--lg);
}

/* --------------------------------------------------------------------------
   13. 辅助：浅灰底分区
   -------------------------------------------------------------------------- */
.section-alt {
  background: var(--wp--preset--color--base);
  padding: var(--wp--preset--spacing--lg) var(--wp--preset--spacing--md);
  border-radius: var(--wp--preset--spacing--sm);
}

/* 折扣角标在卡片右上角的变体 */
.badge-diskon.is-top-right {
  left: auto;
  right: var(--wp--preset--spacing--sm);
}

/* 价格行：原价划线 + 现价并排 */
.price-row {
  display: flex;
  align-items: baseline;
  gap: var(--wp--preset--spacing--sm);
  flex-wrap: wrap;
}

.price-row .price-current {
  color: var(--wp--preset--color--primary);
  font-weight: 800;
  font-size: var(--wp--preset--font-size--large);
}

.price-row .price-original {
  color: var(--wp--preset--color--muted);
  text-decoration: line-through;
  font-size: var(--wp--preset--font-size--small);
}