/*
Theme Name: Blocksy Mongolia Child
Theme URI: https://example.com/blocksy-mongolia-child
Template: blocksy
Description: WooCommerce 蒙古站定制子主题 —— Noto Sans Mongolian（西里尔）+ Noto Sans（拉丁/英文）+ PingFang（中文）三语字体栈、品牌按钮、商品徽章、商品页信任行、语言切换器、订阅栏样式
Author: WorkBuddy
Version: 1.1.1
License: GPL-2.0-or-later
Text Domain: blocksy-mongolia-child
*/

/* ============================================================
   品牌变量 —— 双深浅主色（深色用于按钮/CTA、浅色用于背景）
   ============================================================ */
:root {
    --bmc-primary:        #1a4d80;   /* 深冰蓝 —— 用于按钮、CTA 按钮文字背景 */
    --bmc-primary-dark:   #0f3658;   /* 深冰蓝 hover */
    --bmc-primary-light:  #5b9bcb;   /* 中冰蓝 —— 用于浅色区块装饰、icon 边框 */
    --bmc-primary-soft:   #d6e6f1;   /* 极浅冰蓝 —— 用于 Hero / 大面积浅色背景 */
    --bmc-text-on-light:  #0a2540;   /* 深海军蓝 —— 用于浅色背景的正文 */
    --bmc-accent:         #c1272d;   /* 蒙古红 —— 节庆/CTA */
    --bmc-cta:            #c1272d;   /* 主 CTA 红 —— 加购/立即下单 */
    --bmc-cta-hover:      #9a1f24;   /* CTA hover 深红 */
    --bmc-cta-soft:       #fef2f2;   /* 浅红底 —— 次级 CTA 背景 */
    --bmc-text:           #2a2a2a;
    --bmc-muted:          #6b6b6b;
    --bmc-bg:             #fafaf7;   /* 米白底，避免冷感 */
    --bmc-border:         #e5e5e5;
    --bmc-radius:         4px;
}

/* ============================================================
   字体栈 —— 三语支持
   优先级：蒙文（西里尔）→ 英文（拉丁）→ 中文（汉字）→ 系统兜底
   ============================================================ */
body,
h1, h2, h3, h4, h5, h6,
p, span, a, button, li, small,
.wc-block-components-button,
.woocommerce-checkout,
.woocommerce-cart,
.product_title,
.single_add_to_cart_button,
.price {
    font-family: 'Noto Sans Mongolian',   /* 西里尔蒙文 */
                 'Noto Sans',             /* 拉丁英文 */
                 'PingFang SC',           /* 简体中文 */
                 'Microsoft YaHei',
                 system-ui,
                 -apple-system,
                 sans-serif !important;
}

/* 英文/拉丁字母强制走 Noto Sans —— 避免西里尔字体把它当英文写时出现字形退化 */
.bmc-lang a,
body:lang(en) *,
html[lang="en"] *,
html[lang="en-US"] * {
    font-family: 'Noto Sans', 'Noto Sans Mongolian', 'PingFang SC', system-ui, sans-serif !important;
}

/* 中文页强制走 PingFang */
html[lang="zh"] *,
html[lang="zh-CN"] * {
    font-family: 'PingFang SC', 'Microsoft YaHei', 'Noto Sans', sans-serif !important;
}

/* ============================================================
   主按钮 —— 用于「加入购物车」「去结算」「提交订单」
   蒙古红 #c1272d + 白字，对比度 5.94:1（过 AAA）
   加大字号 + 阴影 + hover 微下沉，视觉层级最强
   ============================================================ */
.wc-block-components-button:not(.is-outlined),
button.single_add_to_cart_button,
.woocommerce button.button.alt,
.woocommerce button.button.alt:hover,
.checkout-button {
    background: var(--bmc-cta) !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--bmc-radius) !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    padding: 14px 28px !important;
    text-transform: none !important;
    letter-spacing: .3px !important;
    box-shadow: 0 2px 8px rgba(193, 39, 45, .25) !important;
    transition: all .2s ease !important;
}
.wc-block-components-button:not(.is-outlined):hover,
button.single_add_to_cart_button:hover,
.woocommerce button.button.alt:hover,
.checkout-button:hover {
    background: var(--bmc-cta-hover) !important;
    box-shadow: 0 4px 12px rgba(193, 39, 45, .35) !important;
    transform: translateY(-1px);
}

/* ============================================================
   次按钮 —— 描边款，用蒙古红强调
   ============================================================ */
.wc-block-components-button.is-outlined,
.is-outlined,
.woocommerce a.button,
.woocommerce button.button {
    border: 1.5px solid var(--bmc-accent) !important;
    color: var(--bmc-accent) !important;
    background: transparent !important;
    border-radius: var(--bmc-radius) !important;
}
.is-outlined:hover,
.woocommerce a.button:hover {
    background: var(--bmc-accent) !important;
    color: #fff !important;
}

/* ============================================================
   商品徽章 —— 角标 / Sale / 货到付款 / QPay / 蒙文包邮
   ============================================================ */
.onsale,
.bmc-badge {
    display: inline-block;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 3px;
    color: #fff;
    letter-spacing: .5px;
    line-height: 1.4;
}
.onsale            { background: #e85d04; }    /* Sale — 橙 */
.bmc-badge--new    { background: #2a9d8f; }    /* New — 青绿 */
.bmc-badge--cod    { background: #588157; }    /* 货到付款 — 草绿 */
.bmc-badge--qpay   { background: #1d4ed8; }    /* QPay — 蓝 */
.bmc-badge--mn     { background: var(--bmc-accent); } /* 蒙文包邮 — 蒙古红 */
.bmc-badge--free   { background: #6a4c93; }    /* 满额免运 — 紫 */

/* ============================================================
   商品页「信任行」 —— 价格下方插入，3 图标横排
   用法：将 .bmc-trust-row 放在价格模块下方
   ============================================================ */
.bmc-trust-row {
    display: flex;
    gap: 12px;
    margin: 16px 0 24px;
    padding: 14px 16px;
    background: var(--bmc-bg);
    border: 1px solid var(--bmc-border);
    border-radius: 6px;
    flex-wrap: wrap;
}
.bmc-trust-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--bmc-text);
    flex: 1 1 30%;
    min-width: 0;
}
.bmc-trust-item svg {
    width: 20px;
    height: 20px;
    color: var(--bmc-primary);
    flex-shrink: 0;
}
.bmc-trust-item strong {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--bmc-text);
    margin-bottom: 2px;
}
.bmc-trust-item small {
    color: var(--bmc-muted);
    font-size: 12px;
}

/* ============================================================
   首页 Hero 浅色背景 + 红色 CTA（WordPress 实际使用版）
   ============================================================ */
.hero {
    background: linear-gradient(135deg, var(--bmc-primary-soft) 0%, var(--bmc-primary-light) 100%);
    color: var(--bmc-text-on-light);
    padding: 80px 32px;
    text-align: center;
    position: relative;
}
.hero h1 { color: var(--bmc-text-on-light); }
.hero p  { color: var(--bmc-primary); opacity: .9; }

/* ============================================================
   首页 Hero CTA —— 大号红底白字阴影，最强视觉锚点
   ============================================================ */
.bmc-hero-cta {
    background: var(--bmc-cta);
    color: #fff !important;
    padding: 16px 40px;
    border-radius: var(--bmc-radius);
    display: inline-block;
    font-size: 18px;
    font-weight: 700;
    text-decoration: none;
    letter-spacing: .5px;
    box-shadow: 0 4px 14px rgba(193, 39, 45, .35);
    transition: all .2s ease;
}
.bmc-hero-cta:hover {
    background: var(--bmc-cta-hover);
    color: #fff !important;
    box-shadow: 0 6px 18px rgba(193, 39, 45, .45);
    transform: translateY(-1px);
}

/* ============================================================
   邮件订阅栏
   ============================================================ */
.bmc-newsletter {
    background: var(--bmc-bg);
    border-top: 3px solid var(--bmc-primary-light);
    padding: 48px 20px;
    text-align: center;
    margin-top: 64px;
}
.bmc-newsletter h3 {
    font-size: 22px;
    font-weight: 700;
    color: var(--bmc-text);
    margin: 0 0 8px;
}
.bmc-newsletter p {
    color: var(--bmc-muted);
    margin: 0 0 20px;
}
.bmc-newsletter form {
    display: flex;
    justify-content: center;
    gap: 8px;
    max-width: 480px;
    margin: 0 auto;
}
.bmc-newsletter input[type="email"] {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid var(--bmc-border);
    border-radius: var(--bmc-radius);
    font-size: 14px;
}
.bmc-newsletter button {
    background: var(--bmc-cta);
    color: #fff;
    border: none;
    border-radius: var(--bmc-radius);
    padding: 12px 24px;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(193, 39, 45, .25);
    transition: all .2s ease;
}
.bmc-newsletter button:hover {
    background: var(--bmc-cta-hover);
    box-shadow: 0 4px 12px rgba(193, 39, 45, .35);
}

/* ============================================================
   三语切换器 —— 顶部胶囊按钮组
   用法：[bmc_lang_switcher] 短代码 或 <?php echo do_shortcode('[bmc_lang_switcher]'); ?>
   ============================================================ */
.bmc-lang-switcher {
    display: inline-flex;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 4px;
    background: var(--bmc-bg);
    border: 1px solid var(--bmc-border);
    border-radius: 999px;
}
.bmc-lang-switcher li {
    margin: 0;
    padding: 0;
}
.bmc-lang-switcher li a {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 999px;
    color: var(--bmc-text);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    transition: all .2s ease;
    white-space: nowrap;
}
.bmc-lang-switcher li a:hover {
    color: var(--bmc-primary);
}
.bmc-lang-switcher li.is-active a {
    background: var(--bmc-primary-dark);
    color: #fff;
    font-weight: 600;
}

/* ============================================================
   三语排版微调 —— 蒙文/英文/中文三种文案的视觉平衡
   ============================================================ */
.bmc-trilingual {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.bmc-trilingual .mn { /* 蒙文 — 主色加粗 */
    font-weight: 600;
    color: var(--bmc-text);
}
.bmc-trilingual .en { /* 英文 — 次级 */
    font-size: 12px;
    color: var(--bmc-muted);
    letter-spacing: .2px;
}
.bmc-trilingual .zh { /* 中文 — 兜底 */
    font-size: 12px;
    color: var(--bmc-muted);
}

/* ============================================================
   商品卡片网格 —— 移动端单列、平板 2 列、桌面 4 列
   ============================================================ */
.bmc-product-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
@media (max-width: 1024px) {
    .bmc-product-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px)  {
    .bmc-product-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   移动端调整
   ============================================================ */
@media (max-width: 640px) {
    .bmc-trust-item { flex: 1 1 100%; }
    .bmc-newsletter form { flex-direction: column; }
    .bmc-newsletter button { width: 100%; }
}

/* ============================================================
   owek.shop · 分类显示修复 · 已实测验证版 2026-10-25
   A = 首页分类卡片（封面式）  B = 分类详情页头图（左题右图）
   ============================================================ */

/* ---------- A1. 首页卡片：移动端 2 列 ---------- */
@media (max-width: 899px) {
  .wc-block-product-categories-list {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 20px 0 0 !important;
  }
}

/* ---------- A2. 首页卡片：桌面 3 列 ---------- */
@media (min-width: 900px) {
  .wc-block-product-categories-list {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 18px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 28px 0 0 !important;
  }
}

/* ---------- A3. 卡片本体（高特异性 + !important，盖死 Woo 的 50px 锁） ---------- */
li.wc-block-product-categories-list-item {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #0f3658 !important;
  border: 0 !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  box-shadow: 0 6px 18px rgba(10, 37, 64, .12);
  transition: transform .22s ease, box-shadow .22s ease;
}
li.wc-block-product-categories-list-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(10, 37, 64, .22);
}
li.wc-block-product-categories-list-item > a {
  display: block !important;
  position: relative !important;
  text-decoration: none !important;
}

/* 关键：解锁 50px 小方块 → 图片铺满整卡 */
li.wc-block-product-categories-list-item .wc-block-product-categories-list-item__image {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  height: auto !important;
}
li.wc-block-product-categories-list-item .wc-block-product-categories-list-item__image img {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: clamp(220px, 24vw, 300px) !important;
  min-height: 220px !important;
  aspect-ratio: auto !important;
  object-fit: cover !important;
  margin: 0 !important;
  border: 0 !important;
  transition: transform .3s ease;
}
li.wc-block-product-categories-list-item:hover .wc-block-product-categories-list-item__image img {
  transform: scale(1.06);
}

/* 分类名压在底部渐变上 */
li.wc-block-product-categories-list-item .wc-block-product-categories-list-item__name {
  position: absolute !important;
  inset-inline: 0 !important;
  bottom: 0 !important;
  padding: 30px 14px 14px !important;
  text-align: center !important;
  font-weight: 700 !important;
  font-size: 17px !important;
  line-height: 1.35 !important;
  color: #ffffff !important;
  text-shadow: 0 1px 6px rgba(10, 37, 64, .55);
  background: linear-gradient(180deg,
    rgba(10, 37, 64, 0) 0%,
    rgba(10, 37, 64, .55) 45%,
    rgba(10, 37, 64, .9) 100%) !important;
}

/* 商品数 → 右上角徽章 */
li.wc-block-product-categories-list-item .wc-block-product-categories-list-item-count {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  z-index: 2 !important;
  background: rgba(255, 255, 255, .94) !important;
  color: #c1272d !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  padding: 4px 9px !important;
  border-radius: 999px !important;
  box-shadow: 0 2px 7px rgba(0, 0, 0, .14) !important;
}


/* ---------- B1. 详情页头图：桌面 左标题 + 右侧大图（完整不裁） ---------- */
@media (min-width: 900px) {
  .hero-section[data-type="type-2"] {
    display: grid !important;
    grid-template-columns: 42% 58% !important;
    align-items: center !important;
    min-height: 0 !important;
    padding-block: clamp(24px, 3vw, 40px) !important;
    padding-inline: clamp(16px, 4vw, 48px) !important;
    background-color: #0f3658 !important;
    background-image: linear-gradient(100deg, #0f3658 0%, #123f66 40%, #1a4d80 72%, #245f96 100%) !important;
  }
  .hero-section[data-type="type-2"] > figure {
    position: relative !important;
    inset: auto !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 100% !important;
    height: clamp(380px, 32vw, 460px) !important;
  }
  .hero-section[data-type="type-2"] > figure .ct-media-container {
    height: 100% !important;
  }
  /* 干掉 Woo/Blocksy 自带的 1:1 占位，否则高度撑爆 */
  .hero-section[data-type="type-2"] > figure .ct-media-container::before {
    display: none !important;
    padding-bottom: 0 !important;
  }
  .hero-section[data-type="type-2"] > figure .ct-media-container img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;    /* 完整显示，绝不裁切 */
    object-position: center !important;
  }
  .hero-section[data-type="type-2"] > header.entry-header {
    grid-column: 1 !important;
    grid-row: 1 !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    max-width: none !important;
    margin-inline: 0 !important;
    text-align: left !important;
    padding: 0 !important;
    min-height: 0 !important;
  }
  .hero-section[data-type="type-2"] .page-title {
    color: #ffffff !important;
    font-size: clamp(30px, 3.2vw, 44px) !important;
    line-height: 1.12;
    text-shadow: 0 2px 12px rgba(10, 37, 64, .4);
  }
  .hero-section[data-type="type-2"] .ct-breadcrumbs,
  .hero-section[data-type="type-2"] .entry-meta,
  .hero-section[data-type="type-2"] .page-description {
    color: rgba(255, 255, 255, .85) !important;
  }
}

/* ---------- B2. 详情页头图：移动端 图上题下 ---------- */
@media (max-width: 899px) {
  .hero-section[data-type="type-2"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    padding: 16px !important;
    background-color: #0f3658 !important;
    background-image: linear-gradient(180deg, #0f3658 0%, #1a4d80 100%) !important;
  }
  .hero-section[data-type="type-2"] > figure {
    position: relative !important;
    inset: auto !important;
    order: -1 !important;
    width: 100% !important;
    height: auto !important;
  }
  .hero-section[data-type="type-2"] > figure .ct-media-container { height: auto !important }
  .hero-section[data-type="type-2"] > figure .ct-media-container::before {
    display: none !important;
    padding-bottom: 0 !important;
  }
  .hero-section[data-type="type-2"] > figure .ct-media-container img {
    width: 100% !important;
    height: clamp(240px, 64vw, 340px) !important;
    object-fit: contain !important;
    object-position: center !important;
  }
  .hero-section[data-type="type-2"] > header.entry-header {
    order: 1 !important;
    text-align: center !important;
    padding: 0 !important;
    min-height: 0 !important;
  }
  .hero-section[data-type="type-2"] .page-title {
    color: #ffffff !important;
    font-size: 26px !important;
  }
}