/*
Theme Name: Ora
Theme URI: https://www.oranect.com
Description: Oranect 定制 WordPress 主题 - Apple 官网风格 + 医疗蓝
Version: 1.0.0
Author: Oranect
Author URI: https://www.oranect.com
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ora
Tags: woocommerce, custom-logo, custom-menu, editor-style, featured-images, translation-ready

Ora 主题 - 专为 Oranect 智能戒指 & VALDUS 智能手表设计
设计规范：Apple 官网风格，着重色：医疗蓝 #0071e3
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* ============================================
   CSS 变量 - 全局设计系统
   ============================================ */
:root {
  /* 颜色系统 */
  --ora-blue: #0071e3;
  --ora-blue-hover: #0077ed;
  --ora-blue-light: #f5f9ff;
  --ora-dark: #1d1d1f;
  --ora-gray: #86868b;
  --ora-light-gray: #f5f5f7;
  --ora-bg: #ffffff;
  --ora-border: #d2d2d7;
  --ora-success: #34c759;
  --ora-text: #1d1d1f;
  --ora-text-secondary: #6e6e73;

  /* 字体 */
  --ora-font: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', 'Segoe UI', Roboto, sans-serif;

  /* 间距 */
  --ora-section-py: 80px;
  --ora-container: 100%;
  --ora-radius: 12px;
  --ora-radius-sm: 8px;

  /* 过渡 */
  --ora-transition: 0.2s ease;
  --ora-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
  --ora-shadow-lg: 0 12px 48px rgba(0, 0, 0, 0.12);
}

/* ============================================
   重置 & 基础
   ============================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--ora-font);
  color: var(--ora-text);
  background: var(--ora-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--ora-blue);
  text-decoration: none;
  transition: color var(--ora-transition);
}
a:hover { color: var(--ora-blue-hover); }

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

h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  line-height: 1.2;
  color: var(--ora-dark);
}

p { margin-bottom: 1em; }
p:last-child { margin-bottom: 0; }

/* ============================================
   布局
   ============================================ */
.ora-container {
  max-width: var(--ora-container);
  margin: 0 auto;
  padding: 0 24px;
}

.ora-section {
  padding: var(--ora-section-py) 0;
}

.ora-section--gray {
  background: var(--ora-light-gray);
}

.ora-section--dark {
  background: var(--ora-dark);
  color: #fff;
}

/* ============================================
   排版辅助
   ============================================ */
.ora-text-center { text-align: center; }
.ora-text-secondary { color: var(--ora-text-secondary); }
.ora-text-blue { color: var(--ora-blue); }
.ora-text-white { color: #fff; }

.ora-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ora-blue);
  margin-bottom: 8px;
  display: block;
}

.ora-section-title {
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 700;
  color: var(--ora-dark);
  margin-bottom: 16px;
  letter-spacing: -0.02em;
}

.ora-section-desc {
  font-size: 18px;
  color: var(--ora-text-secondary);
  max-width: 600px;
  margin: 0 auto 48px;
  line-height: 1.7;
}

/* ============================================
   按钮
   ============================================ */
.ora-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 32px;
  border-radius: 980px;
  font-size: 15px;
  font-weight: 500;
  font-family: var(--ora-font);
  cursor: pointer;
  transition: all var(--ora-transition);
  border: none;
  text-decoration: none;
  white-space: nowrap;
  letter-spacing: -0.01em;
}

.ora-btn--primary {
  background: var(--ora-blue);
  color: #fff;
}
.ora-btn--primary:hover {
  background: var(--ora-blue-hover);
  color: #fff;
  transform: scale(1.02);
  box-shadow: 0 4px 16px rgba(0, 113, 227, 0.3);
}

.ora-btn--secondary {
  background: transparent;
  color: var(--ora-blue);
  border: 1.5px solid var(--ora-blue);
}
.ora-btn--secondary:hover {
  background: var(--ora-blue);
  color: #fff;
}

.ora-btn--white {
  background: #fff;
  color: var(--ora-blue);
}
.ora-btn--white:hover {
  background: var(--ora-light-gray);
  color: var(--ora-blue);
  transform: scale(1.02);
}

.ora-btn--ghost-white {
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255,255,255,0.5);
}
.ora-btn--ghost-white:hover {
  background: rgba(255,255,255,0.1);
  color: #fff;
  border-color: #fff;
}

/* ============================================
   卡片
   ============================================ */
.ora-card {
  background: var(--ora-bg);
  border-radius: var(--ora-radius);
  overflow: hidden;
  box-shadow: var(--ora-shadow);
  transition: transform var(--ora-transition), box-shadow var(--ora-transition);
}

.ora-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--ora-shadow-lg);
}

/* ============================================
   产品网格
   ============================================ */
.ora-grid {
  display: grid;
  gap: 24px;
}

.ora-grid--2 { grid-template-columns: repeat(2, 1fr); }
.ora-grid--3 { grid-template-columns: repeat(3, 1fr); }
.ora-grid--4 { grid-template-columns: repeat(4, 1fr); }

/* ============================================
   角标
   ============================================ */
.ora-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 980px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.ora-badge--new {
  background: var(--ora-blue);
  color: #fff;
}

.ora-badge--hot {
  background: #ff3b30;
  color: #fff;
}

/* ============================================
   动画
   ============================================ */
@keyframes oraFadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

.ora-animate {
  opacity: 0;
  animation: oraFadeInUp 0.6s ease forwards;
}

/* ============================================
   响应式
   ============================================ */
@media (max-width: 1024px) {
  :root { --ora-section-py: 60px; }
  .ora-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .ora-grid--3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  :root { --ora-section-py: 48px; }
  .ora-grid--2,
  .ora-grid--3,
  .ora-grid--4 { grid-template-columns: 1fr; }
  .ora-section-desc { font-size: 16px; }
}

/* ============================================
   滚动条美化
   ============================================ */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--ora-border);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: var(--ora-gray); }

/* ============================================
   选择样式
   ============================================ */
::selection {
  background: var(--ora-blue);
  color: #fff;
}

/* ============================================
   WooCommerce 基础覆盖
   ============================================ */
.woocommerce-page body { font-family: var(--ora-font); }

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--ora-font);
  font-weight: 500;
}

.woocommerce span.onsale {
  background: var(--ora-blue);
  padding: 0;
  border-radius: 980px;
  font-weight: 600;
  min-width: auto;
  min-height: auto;
  line-height: 1.8;
  padding: 4px 12px;
}

.woocommerce .button {
  border-radius: 980px;
  font-family: var(--ora-font);
  font-weight: 500;
  background: var(--ora-blue);
  color: #fff;
  border: none;
  transition: all var(--ora-transition);
}

.woocommerce .button:hover {
  background: var(--ora-blue-hover);
  color: #fff;
}

/* ============================================
   分页
   ============================================ */
.woocommerce-pagination {
  margin-top: 48px;
}

.woocommerce-pagination .page-numbers {
  display: flex;
  gap: 8px;
  justify-content: center;
  list-style: none;
}

.woocommerce-pagination .page-numbers li a,
.woocommerce-pagination .page-numbers li span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 14px;
  font-weight: 500;
  transition: all var(--ora-transition);
}

.woocommerce-pagination .page-numbers .current span,
.woocommerce-pagination .page-numbers li a:hover {
  background: var(--ora-blue);
  color: #fff;
}

/* ============================================
   通知
   ============================================ */
.woocommerce-message,
.woocommerce-info {
  border-radius: var(--ora-radius);
  border-top-color: var(--ora-blue);
}

.woocommerce-error {
  border-radius: var(--ora-radius);
  border-top-color: #ff3b30;
}