/*
Theme Name: CrossBorder Theme
Theme URI: https://example.com
Author: Your Company
Author URI: https://example.com
Description: 新加坡宠物品牌奢侈风格主题 - OnyeaBluz Style
Version: 2.0.0
Requires at least: 6.0
Tested up to: 6.4
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: crossborder-theme
*/

/* ========================================
   CSS变量系统（设计系统）
   ======================================== */
:root {
  /* 配色方案（从OnyeaBluz设计提取） */
  --color-primary: #bc994b;        /* 金色 - 主要强调色 */
  --color-secondary: #192a44;      /* 深蓝 - 次要色/文字 */
  --color-bg: #ebe9e3;             /* 米灰 - 主背景 */
  --color-bg-light: #f7f1e8;       /* 奶油色 - 卡片背景 */
  --color-bg-alt: #f7f3ee;         /* 浅米色 - 区块背景 */
  --color-white: #ffffff;
  --color-text: #192a44;           /* 主文字 */
  --color-text-light: #666666;     /* 次要文字 */
  --color-text-lighter: #999999;   /* 辅助文字 */
  --color-text-muted: #cccccc;     /* 禁用文字 */
  --color-text-white: #ffffff;
  --color-border: #e8e6e3;

  /* 按钮背景色 */
  --color-btn-primary: #192a44;    /* 深蓝按钮 */
  --color-btn-gold: #bc994b;       /* 金色按钮 */

  /* 标签/徽章颜色 */
  --color-badge: #5c7a9c;          /* 蓝灰标签 */
  --color-badge-bg: rgba(188, 153, 75, 0.1);

  /* 字体家族 */
  --font-heading: 'Merriweather', Georgia, serif;
  --font-body: 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;

  /* 字体大小（响应式基准） */
  --text-xs: 0.688rem;    /* 11px */
  --text-sm: 0.75rem;     /* 12px */
  --text-base: 0.875rem;  /* 14px */
  --text-md: 1rem;        /* 16px */
  --text-lg: 1.125rem;    /* 18px */
  --text-xl: 1.25rem;     /* 20px */
  --text-2xl: 1.5rem;     /* 24px */
  --text-3xl: 1.625rem;   /* 26px */
  --text-4xl: 2rem;       /* 32px */
  --text-5xl: 2.875rem;   /* 46px */
  --text-6xl: 3.5rem;     /* 56px */
  --text-7xl: 4rem;       /* 64px */

  /* 行高 */
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.75;
  --leading-loose: 2;

  /* 字重 */
  --font-light: 300;
  --font-normal: 400;
  --font-medium: 500;
  --font-bold: 700;
  --font-black: 900;

  /* 间距 */
  --space-xs: 0.25rem;    /* 4px */
  --space-sm: 0.5rem;     /* 8px */
  --space-md: 0.75rem;    /* 12px */
  --space-base: 1rem;     /* 16px */
  --space-lg: 1.25rem;    /* 20px */
  --space-xl: 1.5rem;     /* 24px */
  --space-2xl: 2rem;      /* 32px */
  --space-3xl: 2.5rem;    /* 40px */
  --space-4xl: 3rem;      /* 48px */
  --space-5xl: 4rem;      /* 64px */
  --space-6xl: 5rem;      /* 80px */

  /* 容器宽度 */
  --container-max: 1180px;
  --content-max: 1280px;         /* 全站统一内容最大宽度 */
  --container-padding: 1.25rem;  /* 20px */

  /* 圆角 */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 20px;
  --radius-full: 9999px;

  /* 阴影 */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.15);
  --shadow-product: 2px 2px 4px 0px rgba(0, 0, 0, 0.2);

  /* 过渡 */
  --transition-fast: 0.15s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.5s ease;

  /* ========================================
     WooCommerce 模板兼容变量
     （woocommerce.css 等 WC 模板样式依赖这些命名，
      此处补全/映射，修复商品页/购物车/结算页样式）
     ======================================== */

  /* 间距 spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;
  --spacing-3xl: 64px;

  /* 字号 font-size（映射到已有 text-* 体系）*/
  --font-size-sm: var(--text-sm);
  --font-size-base: var(--text-base);
  --font-size-lg: var(--text-lg);
  --font-size-xl: var(--text-xl);
  --font-size-2xl: var(--text-2xl);

  /* 圆角 border-radius（映射到已有 radius-* ）*/
  --border-radius: 8px;
  --border-radius-lg: var(--radius-lg);

  /* 页头高度（固定导航占位）*/
  --header-height: 80px;

  /* 过渡别名 */
  --transition-normal: var(--transition-base);

  /* 主色 hover 态 */
  --color-primary-hover: #a8843d;

  /* 状态色 */
  --color-success: #2e7d32;
  --color-error: #c0392b;
  --color-warning: #e08e0b;
}

/* ========================================
   全局重置
   ======================================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text);
  background-color: var(--color-bg);
  overflow-x: hidden;
}

/* ========================================
   排版
   ======================================== */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
  color: var(--color-secondary);
  margin-bottom: var(--space-lg);
}

h1 { font-size: var(--text-7xl); }
h2 { font-size: var(--text-5xl); }
h3 { font-size: var(--text-3xl); }
h4 { font-size: var(--text-xl); }
h5 { font-size: var(--text-lg); }
h6 { font-size: var(--text-md); }

p {
  margin-bottom: var(--space-base);
  line-height: var(--leading-relaxed);
}

a {
  color: inherit;
  text-decoration: none;
  transition: var(--transition-base);
}

a:hover {
  color: var(--color-primary);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

ul, ol {
  list-style: none;
}

/* ========================================
   布局容器
   ======================================== */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

.container-wide {
  max-width: 1920px;
}

/* ========================================
   工具类
   ======================================== */
.flex-row {
  display: flex;
  flex-direction: row;
}

.flex-col {
  display: flex;
  flex-direction: column;
}

.justify-between {
  justify-content: space-between;
}

.justify-center {
  justify-content: center;
}

.align-center {
  align-items: center;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.text-uppercase {
  text-transform: uppercase;
}

/* 分隔标签 */
.section-tag {
  display: inline-block;
  color: var(--color-primary);
  font-size: var(--text-base);
  font-family: var(--font-body);
  letter-spacing: 4px;
  text-transform: uppercase;
  line-height: 1.375;
}

/* ========================================
   按钮系统
   ======================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  padding: var(--space-lg) var(--space-2xl);
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: var(--font-normal);
  text-align: center;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: var(--transition-base);
  white-space: nowrap;
  text-decoration: none;
}

.btn img {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* 主按钮（深蓝） */
.btn-primary {
  background-color: var(--color-btn-primary);
  color: var(--color-white);
  border: 1px solid var(--color-white);
}

.btn-primary:hover {
  background-color: var(--color-primary);
  color: var(--color-white);
  transform: translateY(-2px);
}

/* 金色按钮 */
.btn-gold {
  background-color: var(--color-btn-gold);
  color: var(--color-white);
}

.btn-gold:hover {
  background-color: #a88540;
  color: var(--color-white);
  transform: translateY(-2px);
}

/* 次要按钮（描边） */
.btn-secondary {
  background-color: transparent;
  color: var(--color-white);
  border: 1px solid var(--color-white);
}

.btn-secondary:hover {
  background-color: var(--color-white);
  color: var(--color-secondary);
}

/* 圆形按钮 */
.btn-circle {
  width: 46px;
  height: 46px;
  padding: 0;
  border-radius: var(--radius-full);
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--color-border);
}

.btn-circle:hover {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

/* 小按钮 */
.btn-sm {
  padding: var(--space-sm) var(--space-lg);
  font-size: var(--text-sm);
  height: 30px;
}

/* ========================================
   响应式断点
   ======================================== */
/* 平板 */
@media (max-width: 1024px) {
  :root {
    --container-padding: 1rem;
  }

  h1 { font-size: var(--text-5xl); }
  h2 { font-size: var(--text-4xl); }
}

/* 手机 */
@media (max-width: 768px) {
  :root {
    --container-padding: 1rem;
  }

  h1 { font-size: var(--text-4xl); }
  h2 { font-size: var(--text-3xl); }
  h3 { font-size: var(--text-xl); }

  .btn {
    padding: var(--space-base) var(--space-lg);
    font-size: var(--text-base);
  }
}

/* ============================================================
   货币切换器（EUR / USD）— 统一站点风格，复用设计 token
   ============================================================ */
.cb-curr {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  vertical-align: middle;
}
.cb-curr__opt {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  border-radius: 999px;
  font-family: var(--font-body, 'Roboto', sans-serif);
  font-size: var(--text-sm, 0.75rem);
  font-weight: var(--font-medium, 500);
  letter-spacing: .04em;
  line-height: 1;
  color: var(--color-white, #fff);
  text-decoration: none;
  transition: background .2s ease, color .2s ease;
}
.cb-curr__opt:hover { color: var(--color-primary, #bc994b); }
.cb-curr__opt.is-active {
  background: var(--color-primary, #bc994b);
  color: var(--color-secondary, #192a44);
}
.cb-curr__sign { font-weight: var(--font-bold, 700); }

/* 内页深色导航条上对比已足够；如某些浅色页需要可加 .site-header--solid 作用域覆盖 */