/* ============================================================
   TikTok Shop 主题 — 干净版 v4
   目标站: https://tikumiao.com
   规则: 不使用 background 简写 + var()，全部用具体色值
   ============================================================ */

/* ---------- 1. 全局变量（只用于 color，不用于 background 简写） ---------- */
:root {
  --tk-black: #000000;
  --tk-black-2: #1a1a1a;
  --tk-teal: #00C2B2;
  --tk-pink: #FE2C55;
  --tk-orange: #FF9500;
  --tk-gray-bg: #F5F5F5;
  --tk-gray-bg-2: #F8F8F8;
}

/* ---------- 2. 页面底色 ---------- */
body {
  background-color: #F5F5F5 !important;
}

/* ---------- 3. 顶部小条 → 黑 ---------- */
.top-navbar {
  background-color: #000000 !important;
  background-image: none !important;
  border-bottom: 1px solid #1f1f1f !important;
  min-height: 38px;
}
.top-navbar a,
.top-navbar span,
.top-navbar li,
.top-navbar .opacity-60 {
  color: rgba(255, 255, 255, 0.82) !important;
  opacity: 1 !important;
}
.top-navbar a:hover {
  color: #00C2B2 !important;
}

/* ---------- 4. 主头部 → 黑 ---------- */
header.z-1020,
header.sticky-top.z-1020,
header.z-1020 .logo-bar-area {
  background-color: #000000 !important;
  background-image: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

/* Logo：JPG 白底黑字 → 黑底白字 */
header.z-1020 .logo-bar-area a > img {
  filter: invert(1) hue-rotate(180deg) !important;
  max-height: 40px;
  width: auto;
}

/* 头部文字白 */
header.z-1020 a,
header.z-1020 .text-reset,
header.z-1020 .opacity-60,
header.z-1020 span:not(.badge) {
  color: rgba(255, 255, 255, 0.9) !important;
}
header.z-1020 a:hover {
  color: #00C2B2 !important;
}

/* 搜索框 */
header.z-1020 .front-header-search {
  background-color: transparent !important;
  background-image: none !important;
}
header.z-1020 .front-header-search input {
  background-color: #ffffff !important;
  border: 1px solid #333333 !important;
  border-right: none !important;
  border-radius: 4px 0 0 4px !important;
  color: #111111 !important;
  height: 40px !important;
}
header.z-1020 .front-header-search input::placeholder {
  color: #9a9a9a !important;
}
header.z-1020 .front-header-search button,
header.z-1020 form button[type="submit"] {
  background-color: #000000 !important;
  border: 1px solid #ffffff !important;
  border-radius: 0 4px 4px 0 !important;
  color: #ffffff !important;
  height: 40px !important;
  min-width: 88px;
}
header.z-1020 .front-header-search button:hover {
  background-color: #00C2B2 !important;
  border-color: #00C2B2 !important;
  color: #000000 !important;
}

/* 头部分隔线 */
header.z-1020 .border-left,
header.z-1020 .border-soft-secondary {
  border-color: #2a2a2a !important;
}

/* ---------- 5. 第二行导航 → 黑 ---------- */
header.z-1020 > .bg-white,
header.z-1020 .border-top.border-gray-200,
header + .bg-white.border-top {
  background-color: #000000 !important;
  background-image: none !important;
  border-top: 1px solid #1f1f1f !important;
}
header.z-1020 > .bg-white a,
header.z-1020 .border-top.border-gray-200 a,
header + .bg-white.border-top a {
  color: rgba(255, 255, 255, 0.75) !important;
  opacity: 1 !important;
  font-weight: 600;
}
header.z-1020 > .bg-white a:hover,
header + .bg-white.border-top a:hover {
  color: #ffffff !important;
}
/* 首项下划线 */
header + .bg-white.border-top li:first-child a,
header.z-1020 > .bg-white li:first-child a {
  position: relative;
  color: #ffffff !important;
}
header + .bg-white.border-top li:first-child a::after,
header.z-1020 > .bg-white li:first-child a::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 2px;
  height: 2px;
  background-color: #ffffff;
  border-radius: 2px;
}

/* ---------- 6. 分类侧栏头部 → 青绿 ---------- */
.aiz-category-menu .all-category,
.aiz-category-menu > div:first-child {
  background-color: #00C2B2 !important;
  background-image: none !important;
  color: #ffffff !important;
}
.aiz-category-menu .all-category span,
.aiz-category-menu .all-category a,
.aiz-category-menu > div:first-child span,
.aiz-category-menu > div:first-child a {
  color: #ffffff !important;
}

/* ---------- 7. 价格 → 橙金 ---------- */
.d-block.text-primary.fw-600,
.fs-16 .text-primary,
a.d-block .text-primary,
.product-price {
  color: #FF9500 !important;
  font-weight: 700 !important;
}

/* ---------- 8. 商品卡 ---------- */
a.d-block.p-2.text-reset.bg-white.h-100.rounded {
  border-radius: 8px !important;
  transition: box-shadow .2s, transform .2s;
  overflow: hidden;
  background-color: #ffffff !important;
}
a.d-block.p-2.text-reset.bg-white.h-100.rounded:hover {
  box-shadow: 0 6px 22px rgba(0, 0, 0, .10) !important;
  transform: translateY(-3px);
}
a.d-block.p-2.text-reset.bg-white.h-100.rounded > div:first-child {
  background-color: #F8F8F8 !important;
  border-radius: 6px;
}

/* ---------- 9. 区块标题：居中 + 三点装饰 ---------- */
h4.fw-700.mb-0,
h5.fw-700.mb-0,
.fs-18.fw-700.mb-0 {
  text-align: center !important;
  padding-bottom: 14px;
  position: relative;
  color: #111111 !important;
}
h4.fw-700.mb-0::after,
h5.fw-700.mb-0::after,
.fs-18.fw-700.mb-0::after {
  content: "•••";
  position: absolute;
  left: 50%;
  bottom: -2px;
  transform: translateX(-50%);
  font-size: 15px;
  letter-spacing: 4px;
  color: #111111;
  opacity: .7;
}

/* ---------- 10. 按钮 ---------- */
.btn-primary,
a.btn-primary {
  background-color: #00C2B2 !important;
  border-color: #00C2B2 !important;
  color: #ffffff !important;
}
.btn-primary:hover,
a.btn-primary:hover {
  background-color: #00a99b !important;
  border-color: #00a99b !important;
}
.btn-cart-add,
.add-to-cart button {
  background-color: #1a1a1a !important;
  border: 1px solid #1a1a1a !important;
  color: #ffffff !important;
  border-radius: 20px !important;
}
.btn-cart-add:hover,
.add-to-cart button:hover {
  background-color: #00C2B2 !important;
  border-color: #00C2B2 !important;
}

/* ---------- 11. 页脚 → 深黑 ---------- */
footer,
.footer,
#footer {
  background-color: #1a1a1a !important;
  background-image: none !important;
  color: rgba(255, 255, 255, .72) !important;
}
footer a,
.footer a {
  color: rgba(255, 255, 255, .72) !important;
}
footer a:hover,
.footer a:hover {
  color: #00C2B2 !important;
}
footer h4,
footer h5,
.footer-title {
  color: #ffffff !important;
}

/* ---------- 12. 徽标 ---------- */
.badge-primary,
.badge-soft-primary {
  background-color: #00C2B2 !important;
  color: #ffffff !important;
}
.badge-danger,
.badge-soft-danger {
  background-color: #FE2C55 !important;
  color: #ffffff !important;
}

/* ---------- 13. 导航横向滚动 ---------- */
header + .bg-white.border-top ul,
header.z-1020 > .bg-white ul {
  display: flex !important;
  justify-content: center !important;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}
header + .bg-white.border-top ul::-webkit-scrollbar,
header.z-1020 > .bg-white ul::-webkit-scrollbar {
  display: none;
}
header + .bg-white.border-top li,
header.z-1020 > .bg-white li {
  flex-shrink: 0;
}

/* ============================================================
   v5 — 高特异性覆盖（aiz-core.css 用了 6 个 class + !important）
   ============================================================ */

/* 分类侧栏头部：必须用 7 个 class 才能压过 aiz-core.css 的 6 个 */
.aiz-category-menu .p-3.bg-soft-primary.d-none.d-lg-block.rounded-top.all-category.position-relative.text-left,
.aiz-category-menu div.p-3.all-category,
.aiz-category-menu div.all-category.rounded-top {
  background-color: #00C2B2 !important;
  background-image: none !important;
  color: #ffffff !important;
}
.aiz-category-menu .p-3.bg-soft-primary.all-category span,
.aiz-category-menu .p-3.bg-soft-primary.all-category a {
  color: #ffffff !important;
}

/* ============================================================
   v6 — 区块标题（实际标签是 h3 + h5 class）+ 商品卡按钮 + 页脚
   ============================================================ */

/* ---------- 区块标题：居中 + 三点装饰 ---------- */
h3.h5.fw-700.mb-0,
h3.h4.fw-700.mb-0,
h3.fw-700.mb-0 {
  text-align: center !important;
  padding-bottom: 16px;
  position: relative;
  color: #111111 !important;
  font-weight: 700 !important;
  letter-spacing: .3px;
}
h3.h5.fw-700.mb-0::after,
h3.h4.fw-700.mb-0::after,
h3.fw-700.mb-0::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 36px;
  height: 3px;
  background-color: #111111;
  border-radius: 2px;
  box-shadow: 14px 0 0 -1px #111111, -14px 0 0 -1px #111111;
  opacity: .75;
}

/* ---------- 商品卡：黑色圆角按钮（目标站 Purchase Now 风格） ---------- */
.product-box .btn,
.c-product-box .btn,
a.d-block.p-2 .btn {
  border-radius: 20px !important;
  font-weight: 600;
}
/* 加购图标按钮 */
.product-box .btn-icon,
.product-box a.btn-circle,
.add-to-cart-btn {
  background-color: #1a1a1a !important;
  border-color: #1a1a1a !important;
  color: #ffffff !important;
}
.product-box .btn-icon:hover,
.product-box a.btn-circle:hover {
  background-color: #00C2B2 !important;
  border-color: #00C2B2 !important;
}

/* ---------- 商品卡圆角 + 阴影 ---------- */
.c-product-box,
.product-box {
  border-radius: 8px !important;
  overflow: hidden;
  transition: box-shadow .2s, transform .2s;
}
.c-product-box:hover,
.product-box:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,.10) !important;
  transform: translateY(-3px);
}

/* ---------- 页脚支付图标区 ---------- */
.footer-payment-icons img,
footer .payment-method img {
  height: 26px;
  width: auto;
  border-radius: 4px;
  background: #ffffff;
  padding: 2px;
  margin-right: 6px;
}

/* ---------- Flash deal / 倒计时条 ---------- */
.flash-deal-banner,
.flash-deal-header {
  background-color: #FE2C55 !important;
  color: #ffffff !important;
}

/* ---------- 分类项 hover 效果 ---------- */
.aiz-category-menu .category-nav-element > a:hover {
  background-color: #F5F5F5 !important;
  color: #00C2B2 !important;
}

/* ============================================================
   v7 — 分类横滑卡片区（对齐 tikumiao.com「Shop by Category」）
   ============================================================ */

.tk-cat-section {
  background: #ffffff;
  padding: 26px 0 14px;
  margin-bottom: 18px;
  border-bottom: 1px solid #EDEDED;
}

.tk-sec-head {
  text-align: center;
  margin-bottom: 22px;
}
.tk-sec-title {
  display: inline-block;
  position: relative;
  font-size: 24px;
  font-weight: 800;
  color: #111111;
  margin: 0;
  padding-bottom: 14px;
  letter-spacing: -0.3px;
}
.tk-sec-title::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 38px;
  height: 3px;
  background-color: #111111;
  border-radius: 2px;
  box-shadow: 15px 0 0 -1px #111111, -15px 0 0 -1px #111111;
  opacity: .78;
}

/* 横滑容器 */
.tk-cat-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
}

.tk-cat-scroll {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: 4px 2px 12px;
  flex: 1 1 auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.tk-cat-scroll::-webkit-scrollbar {
  display: none;
  height: 0;
}

/* 分类卡片 */
.tk-cat-card {
  flex: 0 0 auto;
  width: 158px;
  min-height: 118px;
  background: #FFFFFF;
  border: 1px solid #EFEFEF;
  border-radius: 10px;
  padding: 14px 8px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-decoration: none !important;
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.tk-cat-card:hover {
  border-color: #E2E2E2;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .09);
  transform: translateY(-3px);
  text-decoration: none !important;
}

.tk-cat-icon {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #F7F7F7;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  overflow: hidden;
  flex-shrink: 0;
}
.tk-cat-icon img {
  width: 38px;
  height: 38px;
  object-fit: contain;
  display: block;
}

.tk-cat-name {
  font-size: 13px;
  font-weight: 600;
  color: #111111;
  line-height: 1.35;
  text-align: center;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
  max-width: 140px;
}

/* 左右箭头 */
.tk-cat-arrow {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid #E4E4E4;
  background: #FFFFFF;
  color: #111111;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: background .18s, color .18s, border-color .18s, opacity .18s;
  z-index: 2;
}
.tk-cat-arrow:hover {
  background: #111111;
  color: #FFFFFF;
  border-color: #111111;
}

/* 查看更多 */
.tk-cat-more {
  text-align: center;
  margin-top: 4px;
  padding-bottom: 2px;
}
.tk-cat-more a {
  font-size: 13px;
  font-weight: 600;
  color: #666666;
  text-decoration: none !important;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.tk-cat-more a:hover {
  color: #00C2B2;
}

/* 移动端压缩 */
@media (max-width: 767px) {
  .tk-cat-section { padding: 18px 0 10px; }
  .tk-sec-title { font-size: 19px; padding-bottom: 12px; }
  .tk-cat-card { width: 118px; min-height: 104px; padding: 12px 6px 10px; }
  .tk-cat-icon { width: 48px; height: 48px; margin-bottom: 8px; }
  .tk-cat-icon img { width: 30px; height: 30px; }
  .tk-cat-name { font-size: 12px; max-width: 104px; }
  .tk-cat-arrow { display: none; }
  .tk-cat-scroll { gap: 10px; }
}