@charset "UTF-8";
/* =================================================================
   OpticiansClub — 风格统一覆盖层  v2.0
   设计基准：opticiansclub-v4.html
   字体标准：Outfit（正文/UI）+ Lora（H1~H3 标题）
   颜色标准：--amber #c8873a / --ink #141412 / --ink-2 #2c2b28
   加载位置：head.phtml 末尾，在所有主题 CSS 之后
   ================================================================= */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   §0  CSS 设计 Token（与 v4 设计稿完全对齐）
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
:root {
  /* 颜色 */
  --oc-amber:       #c8873a;
  --oc-amber-dark:  #a06828;
  --oc-amber-light: #f5ece0;
  --oc-ink:         #141412;   /* 标题深色 */
  --oc-ink-2:       #2c2b28;   /* 正文色 */
  --oc-muted:       #6b6a65;   /* 辅助说明 */
  --oc-rule:        #e4e2dd;   /* 分割线 */
  --oc-surface:     #f7f5f1;   /* 浅色背景 */
  --oc-white:       #ffffff;

  /* 字体 */
  --oc-font-sans:  'Outfit', sans-serif;
  --oc-font-serif: 'Lora', serif;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   §1  全局正文字体（精准元素列表，取代 html body * 通配符）
       覆盖 custom.css / theme.css 内大量 Roboto 定义
       ⚠️ 故意排除 icon font 相关元素（见 §2）
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
html body,
html body p,
html body ul,
html body ol,
html body li,
html body dl,
html body dt,
html body dd,
html body div,
html body span,
html body article,
html body section,
html body aside,
html body header,
html body footer,
html body main,
html body nav,
html body td,
html body th,
html body caption,
html body label,
html body input,
html body select,
html body textarea,
html body button {
  font-family: 'Outfit', sans-serif !important;
}

/* 链接单独处理（不锁颜色，由 §5 控制） */
html body a {
  font-family: 'Outfit', sans-serif !important;
}

/* 首页 / 分类页 特殊字体覆盖
   custom_home.css 使用 Conv_calibri / Constantia / plantagenet cherokee
   custom_category.css 使用 Conv_KALINGAB
   统一替换为 Outfit */
html body .cms-home,
html body .cms-home *,
html body .catalog-category-view,
html body .catalog-category-view *,
html body .catalog-product-view,
html body .catalog-product-view * {
  font-family: 'Outfit', sans-serif !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   §2  Icon Font 豁免（绝对优先 — 必须在 §1 之后声明）
       FontAwesome 3.x / flexslider-icon / Socialico
       原理：属性选择器特异度 (0,1,2,0) > 通配符/tag (0,0,2,0)
             即使后加载的 html body * !important 也无法覆盖
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* FontAwesome 3.x：元素本体 */
html body [class^="icon-"],
html body [class*=" icon-"] {
  font-family: FontAwesome !important;
}
/* FontAwesome 3.x：伪元素 */
html body [class^="icon-"]:before,
html body [class*=" icon-"]:before,
html body [class^="icon-"]:after,
html body [class*=" icon-"]:after {
  font-family: FontAwesome !important;
}
/* FontAwesome 4.x / 5.x（备用） */
html body .fa,
html body [class^="fa-"],
html body [class*=" fa-"] {
  font-family: FontAwesome !important;
}
/* flexslider 轮播箭头 */
html body .flex-prev,
html body .flex-next,
html body .flex-prev:before,
html body .flex-next:before,
html body .flex-prev:after,
html body .flex-next:after {
  font-family: 'flexslider-icon' !important;
}
/* Socialico 社交图标 */
html body .block-social li,
html body .block-social li a,
html body .block-social li a:before {
  font-family: 'Socialico' !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   §3  标题字体（H1~H3 = Lora serif；H4~H6 = Outfit UI级）
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* H1~H3：Lora，与 v4 设计稿一致 */
html body h1,
html body h2,
html body h3,
html body .h1,
html body .h2,
html body .h3 {
  font-family: 'Lora', serif !important;
  color: var(--oc-ink) !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
}
html body h1 { font-size: 32px; letter-spacing: -0.02em; }
html body h2 { font-size: 24px; letter-spacing: -0.01em; }
html body h3 { font-size: 20px; }

/* H4~H6：Outfit，UI 级标题 */
html body h4,
html body h5,
html body h6,
html body .h4,
html body .h5,
html body .h6 {
  font-family: 'Outfit', sans-serif !important;
  color: var(--oc-ink) !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
}
html body h4 { font-size: 17px; }
html body h5 { font-size: 15px; }
html body h6 { font-size: 13px; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   §4  Body 基础样式
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
html body {
  font-size: 15px !important;
  color: var(--oc-ink-2) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   §5  链接颜色（正文链接，不强制白色）
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
a {
  color: var(--oc-ink-2);
  text-decoration: none;
  transition: color 0.2s ease;
}
a:hover {
  color: var(--oc-amber);
  text-decoration: none;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   §6  导航（SM MegaMenu — 白色文字，高特异度锁定）
       使用完整父级链，确保特异度高于任何 a 全局覆盖
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* 一级菜单链接（带 wrapper — 真实 Magento 页面） */
html body .sm_megamenu_wrapper_horizontal_menu .sm_megamenu_menu li.sm_megamenu_lv1 > a,
html body .sm_megamenu_wrapper_horizontal_menu .sm_megamenu_menu li.sm_megamenu_lv1 > a.sm_megamenu_head,
html body .sm_megamenu_wrapper_horizontal_menu .sm_megamenu_menu li.sm_megamenu_lv1 > a.sm_megamenu_drop {
  font-family: 'Outfit', sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: #ffffff !important;
  transition: color 0.2s;
}
html body .sm_megamenu_wrapper_horizontal_menu .sm_megamenu_menu li.sm_megamenu_lv1 > a span {
  color: inherit !important;
  font-family: inherit !important;
}
html body .sm_megamenu_wrapper_horizontal_menu .sm_megamenu_menu li.sm_megamenu_lv1:hover > a,
html body .sm_megamenu_wrapper_horizontal_menu .sm_megamenu_menu li.sm_megamenu_lv1 > a.sm_megamenu_top_actived {
  color: #ffffff !important;
  background-color: var(--oc-amber) !important;
}

/* 一级菜单链接（不带 wrapper — 兜底，覆盖 html body a !important）*/
html body .sm_megamenu_menu li.sm_megamenu_lv1 > a.sm_megamenu_head,
html body .sm_megamenu_menu li.sm_megamenu_lv1 > a.sm_megamenu_drop,
html body .sm_megamenu_menu li.sm_megamenu_lv1 > a.sm_megamenu_head span,
html body .sm_megamenu_menu li.sm_megamenu_lv1 > a.sm_megamenu_drop span {
  color: #ffffff !important;
  font-family: 'Outfit', sans-serif !important;
}
html body .sm_megamenu_menu li.sm_megamenu_lv1:hover > a,
html body .sm_megamenu_menu li.sm_megamenu_lv1 > a.sm_megamenu_top_actived {
  color: #ffffff !important;
  background-color: var(--oc-amber) !important;
}

/* 兼容旧版导航选择器（.nav-regular） */
html body .nav-regular li.level0 > a,
html body .nav-regular li.level0 > a > span {
  color: #ffffff !important;
  font-family: 'Outfit', sans-serif !important;
}

/* ── 水平 dropdown 内的二级菜单链接（浅色背景区域，深色文字）── */
html body .sm_megamenu_wrapper_horizontal_menu .sm_megamenu_dropdown_fullwidth a,
html body .sm_megamenu_wrapper_horizontal_menu .sm_megamenu_dropdown_1column a,
html body .sm_megamenu_wrapper_horizontal_menu .sm_megamenu_dropdown_2columns a,
html body .sm_megamenu_wrapper_horizontal_menu .sm_megamenu_dropdown_3columns a {
  color: var(--oc-ink-2) !important;
  font-family: 'Outfit', sans-serif !important;
}
html body .sm_megamenu_wrapper_horizontal_menu .sm_megamenu_dropdown_fullwidth a:hover,
html body .sm_megamenu_wrapper_horizontal_menu .sm_megamenu_dropdown_3columns a:hover {
  color: var(--oc-amber) !important;
}

/* ── 暗色背景列（.bg-glass）内的链接和标题 → 白色文字 ────────
   实际 HTML: sm_megamenu_col_3.sm_megamenu_firstcolumn.bg-glass
   此规则必须在上方 dropdown_3columns 规则之后，靠级联顺序覆盖
   ---------------------------------------------------------------- */
html body .sm_megamenu_wrapper_horizontal_menu .bg-glass a,
html body .sm_megamenu_wrapper_horizontal_menu .bg-glass a strong,
html body .sm_megamenu_wrapper_horizontal_menu .bg-glass a span {
  color: #ffffff !important;
}
html body .sm_megamenu_wrapper_horizontal_menu .bg-glass .sm_megamenu_title_lv3,
html body .sm_megamenu_wrapper_horizontal_menu .bg-glass .sm_megamenu_title span {
  color: #ffffff !important;
}
html body .sm_megamenu_wrapper_horizontal_menu .bg-glass a:hover,
html body .sm_megamenu_wrapper_horizontal_menu .bg-glass a:hover strong {
  color: var(--oc-amber) !important;
}

/* Header 顶部工具链接（登录/注册/语言） */
.header .links li a,
.top-links li a {
  font-family: var(--oc-font-sans);
  font-size: 12px;
  color: var(--oc-muted);
  letter-spacing: 0.04em;
}
.header .links li a:hover,
.top-links li a:hover {
  color: var(--oc-amber);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   §6b  Logo 文字（v4 design: OPTICIANS white + CLUB amber）
        必须高特异度 + !important 覆盖 a span { color: inherit }
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
html body .logo-wrapper .oc-logo-text {
  font-family: 'Outfit', sans-serif !important;
  font-size: 17px !important;
  font-weight: 900 !important;
  letter-spacing: 3px !important;
  color: #141412 !important;
  text-transform: uppercase !important;
  display: inline-block !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}
html body .logo-wrapper .oc-logo-club,
html body .logo-wrapper a .oc-logo-club,
html body .logo-wrapper a span.oc-logo-club {
  color: #c8873a !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   §7  主题色替换（覆盖 orange.css #e88a14 → v4 amber #c8873a）
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.bg_color,
.button:hover,
.button:hover > span,
.sm_megamenu_wrapper_horizontal_menu .sm_megamenu_menu li a.sm_megamenu_top_actived,
.sm_megamenu_wrapper_horizontal_menu .sm_megamenu_menu li a.sm_megamenu_actived,
.yt-product-detail .tab-product-detail .yt-tab-navi > li.active,
.yt-product-detail .tab-product-detail .yt-tab-navi > li:hover,
.right-content-header .btn-toggle .cart-icon .amount-i,
#confirmbox .button.btn-cart:hover > span,
.flash-sale-area,
.yt-filters .yt-filter-active a,
#yt-totop:hover,
.sm_quickview_handler:hover,
.sc-network li a:hover,
.button {
  background-color: var(--oc-amber) !important;
}

.color_skin,
.link-compare:hover,
.link-wishlist:hover,
.catalog-product-view .product-price .special-price .price-label,
.yt-tab-navi > li.active > a,
.yt-tab-navi > li:hover > a {
  color: var(--oc-amber) !important;
}

.border-color,
.sc-network li a:hover,
#what-client-say .item-cus .cus-image-box:hover {
  border-color: var(--oc-amber) !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   §8  按钮
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.button,
button,
input[type="submit"],
input[type="button"],
.btn-cart,
.btn-checkout {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  background-color: var(--oc-amber) !important;
  transition: background-color 0.2s ease, transform 0.1s ease !important;
}
.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
  background-color: var(--oc-amber-dark) !important;
}
.button:active { transform: scale(0.98) !important; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   §9  产品卡片 & 价格
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.product-name a {
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--oc-ink-2);
  line-height: 1.4;
}
.product-name a:hover { color: var(--oc-amber); }

.price-box .price,
.product-price .price {
  font-family: 'Outfit', sans-serif;
  color: var(--oc-ink);
  font-weight: 700;
}
.price-box .special-price .price { color: var(--oc-amber); }
.price-box .old-price .price     { color: var(--oc-muted); font-size: 0.85em; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   §10  表单输入
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="number"],
textarea,
select {
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  color: var(--oc-ink-2);
  border: 1px solid var(--oc-rule);
  border-radius: 0;
  transition: border-color 0.2s;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
textarea:focus {
  border-color: var(--oc-amber);
  outline: none;
  box-shadow: 0 0 0 2px rgba(200, 135, 58, 0.12);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   §11  面包屑 / 分页
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.breadcrumbs li,
.breadcrumbs li a,
.breadcrumbs li span {
  font-family: 'Outfit', sans-serif;
  font-size: 12px;
  color: var(--oc-muted);
  letter-spacing: 0.04em;
}
.breadcrumbs li a:hover { color: var(--oc-amber); }

.pager .pages li a,
.pager .pages li span {
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  color: var(--oc-ink-2);
  border-color: var(--oc-rule);
}
.pager .pages li a:hover,
.pager .pages li.current span {
  background-color: var(--oc-amber);
  color: #fff;
  border-color: var(--oc-amber);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   §12  页脚
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.footer, #footer {
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
}
.footer a, #footer a {
  color: rgba(255,255,255,0.45);
  transition: color 0.2s;
}
.footer a:hover, #footer a:hover { color: var(--oc-amber); }

.footer-title,
.footer .block-title,
#footer .block-title {
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   §13  表格（订单 / 账户 / 购物车）
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
table th {
  font-family: 'Outfit', sans-serif !important;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--oc-muted);
}
table td {
  font-family: 'Outfit', sans-serif !important;
  font-size: 14px;
  color: var(--oc-ink-2);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   §14  消息提示 & 搜索框
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.success-msg, .error-msg, .note-msg {
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
}
.sm-serachbox-pro .sm-searbox-input,
.search-input {
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   §15  移动端
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 767px) {
  html body { font-size: 15px !important; }
  html body h1 { font-size: 26px !important; }
  html body h2 { font-size: 20px !important; }
  html body h3 { font-size: 18px !important; }
  .button, input[type="submit"] {
    font-size: 13px !important;
    padding: 12px 20px !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   §16  布局增强（高投入产出比三件事）
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ① Sticky 导航栏
   取代原有 JS 驱动的 .subnav-fixed（position:fixed），
   CSS sticky 不依赖 JS，无 FOUC，始终吸顶 */
.yt-header-under {
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  background: #141412 !important;
}
/* 防止 sticky 与已有 subnav-fixed JS class 冲突 */
.yt-header-under.subnav-fixed {
  position: sticky !important;
  top: 0 !important;
}

/* ② 隐藏 Marquee 跑马灯
   质感最低的单一元素，隐藏后顶部更干净 */
marquee {
  display: none !important;
}

/* ③ 内容最大宽度约束
   防止超宽屏幕上内容过度拉伸，提升阅读舒适度 */
#yt_wrapper {
  max-width: 1400px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   §17  Header 瘦身（高优先级）
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ⑤ 压缩 Logo 区域高度（124px → ~72px）*/
.wrap-header-top {
  padding: 12px 0 !important;
}
.yt-header-top {
  padding: 8px 0 !important;
}
.wrap-header-top .logo-wrapper h1 {
  margin: 0 !important;
  line-height: 1 !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   §18  Footer 文字颜色修复（深色背景 → 浅色文字）
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ⑥ Footer 正文链接、段落、列表 → 半透明白色 */
#yt_footer a,
#yt_footer p,
#yt_footer li,
#yt_footer div {
  color: rgba(255,255,255,0.55) !important;
}
#yt_footer a:hover {
  color: #c8873a !important;
}
/* Footer 标题 → 亮白色 */
#yt_footer h2,
#yt_footer h3,
#yt_footer h4,
#yt_footer .footer-title,
#yt_footer .block-title {
  color: rgba(255,255,255,0.90) !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   §19  产品卡片 Hover 动效 & CMS 页面留白（锦上添花）
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ⑦ 产品卡片 hover 过渡 */
.respl-item,
.products-grid .item,
.item-inner {
  transition: box-shadow 0.25s ease, border-color 0.25s ease !important;
}
.respl-item:hover,
.products-grid .item:hover {
  box-shadow: 0 4px 20px rgba(0,0,0,0.08) !important;
  border-color: #c8873a !important;
}

/* ⑧ CMS 内容页垂直留白（v11，被 §20 覆盖精化） */
.page-title {
  margin-bottom: 32px !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   §20  Header 进一步瘦身（目标 70-80px）
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.yt-header-top {
  padding: 0 !important;
}
.wrap-header-top {
  padding: 10px 0 !important;
}
.wrap-header-top .logo img,
.wrap-header-top .logo a img {
  max-height: 48px !important;
  width: auto !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   §21  CMS 页面内容区精化
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.cms-page .col-main,
.cms-page #yt_main {
  padding: 48px 5% 64px !important;
  max-width: 860px !important;
  margin: 0 auto !important;
}
.cms-page .page-title {
  margin-bottom: 28px !important;
}
.cms-page .page-title h1 {
  font-size: 36px !important;
  letter-spacing: -0.02em !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   §22  交互过渡动效精化
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* 产品卡片 hover（覆盖 §19 基础版）*/
.respl-item,
.products-grid .item,
.item-inner {
  transition: box-shadow 0.25s ease, border-color 0.25s ease !important;
}
.respl-item:hover,
.products-grid .item:hover {
  box-shadow: 0 4px 20px rgba(0,0,0,0.08) !important;
  border-color: #c8873a !important;
}

/* 按钮 hover 过渡 */
.button,
.btn-cart,
input[type="submit"] {
  transition: background-color 0.2s ease, transform 0.1s ease !important;
}
.button:active,
.btn-cart:active {
  transform: scale(0.98) !important;
}

/* footer logo 双色修复 */
#yt_footer .footer-brand-name,
.oc-footer-v01 .footer-brand-name { color: #ffffff !important; }
#yt_footer .footer-brand-name span,
.oc-footer-v01 .footer-brand-name span { color: #c8873a !important; }