:root {
  --cn-primary: #ff7a00;
  --cn-primary-dark: #e86600;
  --cn-ink: #1f2329;
  --cn-muted: #6b7280;
  --cn-line: #e8eaed;
  --cn-soft: #f6f7f9;
  --cn-card: #ffffff;
}

html { scroll-behavior: smooth; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  color: var(--cn-ink);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}

.popup-newsletter { display: none !important; }
.preloader { display: none !important; }
.header-top { background: #f7f8fa; border-bottom: 1px solid #eceef1; color: #59606b; }
.header-middle { padding-top: 18px; padding-bottom: 18px; background: #fff; }
#logo a, .logo-ft a { display: inline-flex; align-items: center; text-decoration: none; }
#logo img, .logo-ft img { display: none !important; }
.cn-brand { font-size: 32px; font-weight: 500; letter-spacing: -1.5px; color: #3f4248; white-space: nowrap; line-height: 1; }
.cn-brand b { font-weight: 800; color: var(--cn-primary); margin-right: 4px; }
.logo-ft .cn-brand { font-size: 26px; }

.top-search form.form-search {
  border: 2px solid var(--cn-primary);
  border-radius: 24px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 3px 14px rgba(255, 122, 0, .08);
}
.top-search form.form-search .cat-wrap { border-right: 1px solid var(--cn-line); }
.top-search form.form-search .box-search input { font-size: 14px; }
.top-search form.form-search .box-search .btn-search button { background: var(--cn-primary); width: 68px; transition: background .2s ease; }
.top-search form.form-search .box-search .btn-search button:hover { background: var(--cn-primary-dark); }
.box-cart .inner-box > a > .icon-cart span { background: var(--cn-primary); }
.box-cart .inner-box > a > .price { font-weight: 700; color: #24262b; }
.menu-compare-wishlist li.compare { display: none !important; }

.header-bottom { background: var(--cn-primary); box-shadow: 0 5px 16px rgba(15, 23, 42, .14); }
#mega-menu > .btn-mega { background: #34383e; font-weight: 700; letter-spacing: .5px; }
#mainnav > ul.menu > li > a { font-weight: 600; padding-left: 18px; padding-right: 18px; }
#mainnav > ul.menu > li > a:after { display: none; }
#mainnav > ul.menu > li > .submenu { display: none !important; }
#mainnav > ul.menu > li.cn-active > a { background: #fff; color: var(--cn-primary); }
.flat-infomation li.phone a { font-weight: 700; }

.imagebox, .product-box .imagebox {
  background: var(--cn-card);
  border: 1px solid #edf0f2;
  border-radius: 10px;
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.imagebox:hover, .product-box .imagebox:hover {
  transform: translateY(-3px);
  border-color: #ffd3ad;
  box-shadow: 0 12px 28px rgba(20, 24, 31, .1);
}
.imagebox .box-content .product-name a, .product-list .name a { color: #262a30; font-weight: 600; }
.imagebox .box-content .product-name a:hover, .product-list .name a:hover { color: var(--cn-primary); }
.imagebox .price .sale, .product-list .price .sale { color: #e4393c; font-weight: 800; }
.btn-add-cart a, .add-cart a, .btn-cart a.check-out { border-radius: 6px !important; font-weight: 700; transition: all .2s ease; }
.btn-add-cart a:hover, .add-cart a:hover, .btn-cart a.check-out:hover { background: var(--cn-primary-dark) !important; color: #fff !important; }
.flat-row-title h3, .title-section h2 { font-weight: 800; color: #24272d; }
.flat-row-title h3:after, .title-section h2:after { background: var(--cn-primary); }

footer { background: #f7f8fa; border-top: 1px solid #eceef1; }
.footer-bottom { background: #eef0f3; }
.footer-bottom .copyright { color: #737983; }
.cn-search-state { max-width: 1170px; margin: 18px auto; padding: 13px 18px; border-radius: 8px; background: #fff7ed; color: #9a4b00; border: 1px solid #fed7aa; font-size: 14px; }
.cn-mobile-nav { display: none; }

@media (max-width: 991px) {
  .header-middle { padding-top: 12px; padding-bottom: 12px; }
  #logo .cn-brand { font-size: 26px; }
  .top-search form.form-search { border-width: 1px; }
}

@media (max-width: 767px) {
  body { padding-bottom: 66px; }
  .header-top { display: none; }
  #logo .cn-brand { font-size: 24px; letter-spacing: -1px; }
  .header-middle { padding: 10px 0; }
  .top-search form.form-search { border-radius: 8px; }
  .top-search form.form-search .cat-wrap { display: none; }
  .top-search form.form-search .box-search .btn-search button { width: 48px; }
  .header-bottom { box-shadow: none; }
  .imagebox, .product-box .imagebox { border-radius: 8px; }
  .imagebox:hover, .product-box .imagebox:hover { transform: none; box-shadow: 0 5px 14px rgba(20, 24, 31, .08); }
  .cn-mobile-nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 9999; height: 58px;
    display: grid; grid-template-columns: repeat(4, 1fr);
    background: rgba(255, 255, 255, .98); border-top: 1px solid #e5e7eb;
    box-shadow: 0 -4px 18px rgba(15, 23, 42, .08);
  }
  .cn-mobile-nav a { display: flex; flex-direction: column; align-items: center; justify-content: center; color: #646b75; font-size: 11px; line-height: 1.2; text-decoration: none; }
  .cn-mobile-nav a i { font-size: 19px; margin-bottom: 3px; }
  .cn-mobile-nav a.active { color: var(--cn-primary); font-weight: 700; }
  .cn-mobile-nav .cart-tab { position: relative; }
  .cn-mobile-nav .cn-cart-badge { position: absolute; top: 5px; left: 55%; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 9px; background: #e4393c; color: #fff; font-size: 10px; line-height: 16px; text-align: center; }
}

/* Commerce interaction layer */
.cn-shop-toast { position: fixed; top: 24px; left: 50%; z-index: 100000; padding: 12px 20px; border-radius: 8px; background: #22262c; color: #fff; box-shadow: 0 12px 34px rgba(15,23,42,.22); transform: translate(-50%,-18px); opacity: 0; transition: .22s ease; font-weight: 700; }
.cn-shop-toast.show { transform: translate(-50%,0); opacity: 1; }
.cn-shop-toast.warning { background: #b45309; }
.cn-empty-cart, .cn-empty-checkout { display: flex; min-height: 230px; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: #7b8189; }
.cn-empty-cart b, .cn-empty-checkout b { color: #272b30; font-size: 20px; }
.cn-empty-cart a, .cn-empty-checkout a { margin-top: 8px; padding: 10px 24px; border-radius: 6px; background: var(--cn-primary); color: #fff; font-weight: 700; }
.table-cart .quanlity { display: inline-flex; align-items: center; gap: 6px; }
.table-cart .quanlity button { width: 30px; height: 30px; padding: 0; border: 1px solid #dfe3e8; border-radius: 5px; background: #fff; color: #363b42; font-size: 18px; cursor: pointer; }
.table-cart .quanlity input { width: 54px !important; height: 34px; text-align: center; }
.cn-remove-item { width: 32px; height: 32px; border: 0; border-radius: 50%; background: #fff1f0; color: #d92d20; font-size: 22px; cursor: pointer; }
.cn-discount-row td:last-child { color: #16a34a; font-weight: 700; }
.btn-order a.order.loading { pointer-events: none; opacity: .72; }

.cn-order-page { min-height: 100vh; margin: 0; background: radial-gradient(circle at 15% 0%, #fff1df 0, transparent 32%), #f5f6f8; color: #24272d; }
.cn-order-header { height: 74px; display: flex; align-items: center; justify-content: space-between; max-width: 1080px; margin: 0 auto; padding: 0 28px; border-bottom: 1px solid rgba(31,41,55,.08); }
.cn-order-header > span { color: #69707a; font-size: 14px; }
.cn-order-shell { max-width: 960px; margin: 64px auto; padding: 0 24px; display: grid; grid-template-columns: 1fr 280px; gap: 24px; align-items: start; }
.cn-order-card, .cn-order-assurance { background: #fff; border: 1px solid #e8e9ec; border-radius: 16px; box-shadow: 0 18px 48px rgba(26,31,40,.08); }
.cn-order-card { padding: 48px; }
.cn-order-check { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 50%; background: #eaf8ee; color: #159447; font-size: 30px; font-weight: 800; }
.cn-order-eyebrow { margin: 24px 0 6px; color: var(--cn-primary); font-size: 12px; font-weight: 800; letter-spacing: 1.6px; }
.cn-order-card h1 { margin: 0; font-size: 34px; letter-spacing: -1px; }
.cn-order-lead { margin: 10px 0 28px; color: #747b85; }
.cn-order-detail dl { margin: 0; border-top: 1px solid #eceef1; }
.cn-order-detail dl > div { display: flex; justify-content: space-between; gap: 24px; padding: 14px 0; border-bottom: 1px solid #eceef1; }
.cn-order-detail dt { color: #7b8189; font-weight: 400; }
.cn-order-detail dd { margin: 0; color: #25292f; font-weight: 700; text-align: right; }
.cn-status { padding: 4px 9px; border-radius: 999px; background: #eaf8ee; color: #168246; font-size: 12px; }
.cn-order-actions { display: flex; gap: 10px; margin-top: 30px; }
.cn-order-actions a { padding: 11px 20px; border: 1px solid #dadde2; border-radius: 7px; color: #41464e; font-weight: 700; }
.cn-order-actions a.primary { border-color: var(--cn-primary); background: var(--cn-primary); color: #fff; }
.cn-order-assurance { padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.cn-order-assurance b { font-size: 17px; }
.cn-order-assurance span { color: #747b85; font-size: 13px; line-height: 1.7; }
@media (max-width: 767px) { .cn-order-shell { margin: 24px auto; grid-template-columns: 1fr; } .cn-order-card { padding: 30px 22px; } .cn-order-card h1 { font-size: 28px; } .cn-order-assurance { order: 2; } }

/* Checkout, payment and order lookup */
.cn-mini-empty { padding: 22px 12px !important; color: #858b94; text-align: center; }
.dropdown-box .cn-mini-remove { border: 0; background: transparent; color: #c43b32; cursor: pointer; }
.cn-shipping-summary { display: flex; align-items: center; gap: 8px; margin: 0 !important; }
.cn-shipping-summary b { margin-left: auto; color: #222; }
.cn-shipping-dot { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #16a34a; color: #fff; font-size: 12px; }
.cn-shipping-note { display: block; margin-top: 6px; color: #777; line-height: 1.5; }
.cn-demo-account-tip { margin: 8px 0 0; color: #8a5a18; font-size: 13px; font-weight: 400; }
.cn-account-message { margin: 14px 0 0; padding: 10px 12px; border-radius: 6px; background: #fff1f0; color: #b42318; }
.cn-account-message.success { background: #edf9f0; color: #168246; }
.cn-account-dashboard { display: grid; grid-template-columns: 64px 1fr; gap: 20px; align-items: center; max-width: 850px; margin: 0 auto; padding: 36px; border: 1px solid #e7e9ed; border-radius: 14px; background: #fff; box-shadow: 0 18px 48px rgba(26,31,40,.08); }
.cn-account-avatar { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--cn-primary); color: #fff; font-size: 27px; font-weight: 900; }
.cn-account-dashboard p { margin: 0; color: #777; }
.cn-account-dashboard h2 { margin: 3px 0 5px; font-size: 24px; }
.cn-account-dashboard div > span { color: #777; }
.cn-account-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px; padding-top: 15px; border-top: 1px solid #eceef1; }
.cn-account-actions a,.cn-account-actions button { padding: 10px 18px; border: 1px solid #d8dce2; border-radius: 7px; background: #fff; color: #333; font-weight: 700; cursor: pointer; }
.cn-account-actions a.primary { border-color: var(--cn-primary); background: var(--cn-primary); color: #fff; }
@media (max-width: 767px) { .cn-account-dashboard { grid-template-columns: 48px 1fr; padding: 24px 18px; }.cn-account-avatar { width: 48px; height: 48px; }.cn-account-dashboard h2 { font-size: 18px; word-break: break-all; } }
.cn-payment-shell, .cn-query-shell { max-width: 900px; margin: 38px auto 70px; padding: 0 24px; }
.cn-checkout-steps { margin: 0 0 20px; padding: 0; display: grid; grid-template-columns: repeat(4,1fr); list-style: none; counter-reset: step; }
.cn-checkout-steps li { position: relative; padding-top: 28px; color: #9298a1; font-size: 13px; text-align: center; }
.cn-checkout-steps li:before { content: ""; position: absolute; top: 8px; left: 0; right: 0; height: 2px; background: #dfe2e6; }
.cn-checkout-steps li:first-child:before { left: 50%; }
.cn-checkout-steps li:last-child:before { right: 50%; }
.cn-checkout-steps li:after { content: ""; position: absolute; top: 3px; left: 50%; width: 12px; height: 12px; margin-left: -6px; border: 3px solid #dfe2e6; border-radius: 50%; background: #f5f6f8; }
.cn-checkout-steps li.done:before, .cn-checkout-steps li.active:before { background: var(--cn-primary); }
.cn-checkout-steps li.done:after, .cn-checkout-steps li.active:after { border-color: var(--cn-primary); background: var(--cn-primary); }
.cn-checkout-steps li.active { color: #252a31; font-weight: 800; }
.cn-payment-card, .cn-query-card { padding: 38px; border: 1px solid #e6e8eb; border-radius: 15px; background: #fff; box-shadow: 0 18px 48px rgba(26,31,40,.08); }
.cn-payment-heading { display: flex; justify-content: space-between; gap: 24px; align-items: end; padding-bottom: 28px; border-bottom: 1px solid #eceef1; }
.cn-payment-heading p { margin: 0 0 4px; color: #767d86; }
.cn-payment-heading h1 { margin: 0; font-size: 22px; }
.cn-payment-amount { text-align: right; }
.cn-payment-amount span { display: block; color: #767d86; font-size: 13px; }
.cn-payment-amount b { color: #e4393c; font-size: 30px; }
.cn-payment-methods { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; margin: 28px 0; }
.cn-payment-methods label { min-height: 72px; display: grid; grid-template-columns: 42px 1fr auto; grid-template-rows: 1fr; align-items: center; gap: 10px; margin: 0; padding: 12px 15px; border: 2px solid #eceef1; border-radius: 10px; cursor: pointer; transition: .18s ease; }
.cn-payment-methods label:has(input:checked) { border-color: var(--cn-primary); background: #fff8f1; }
.cn-payment-methods input { position: absolute; opacity: 0; }
.cn-payment-methods small { color: #8b919a; }
.cn-pay-mark { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 9px; color: #fff; font-weight: 900; }
.cn-pay-mark.wechat { background: #18a957; }.cn-pay-mark.alipay { background: #1677ff; }.cn-pay-mark.unionpay { background: #c8272c; }.cn-pay-mark.cod { background: #d97706; }
.cn-demo-notice { display: flex; gap: 12px; padding: 13px 15px; border-radius: 8px; background: #fff7e6; color: #7c4a03; font-size: 13px; line-height: 1.6; }
.cn-pay-button { width: 100%; margin-top: 22px; padding: 14px; border: 0; border-radius: 8px; background: var(--cn-primary); color: #fff; font-size: 16px; font-weight: 800; cursor: pointer; }
.cn-pay-button:disabled { cursor: wait; opacity: .6; }.cn-payment-error,.cn-query-message { margin: 12px 0 0; color: #c9382b; }
.cn-query-shell { max-width: 720px; margin-top: 70px; }.cn-query-card h1 { margin: 2px 0 8px; font-size: 34px; }.cn-query-card > p:not(.cn-order-eyebrow) { color: #727983; }
.cn-query-form { display: flex; gap: 10px; margin-top: 26px; }.cn-query-form input { flex: 1; min-width: 0; height: 48px; padding: 0 15px; border: 1px solid #d9dde3; border-radius: 7px; }.cn-query-form button { padding: 0 24px; border: 0; border-radius: 7px; background: var(--cn-primary); color: #fff; font-weight: 800; }
.cn-query-result { margin-top: 24px; }.cn-query-result dl { border-top: 1px solid #eceef1; }.cn-query-result dl div { display: flex; justify-content: space-between; padding: 13px 0; border-bottom: 1px solid #eceef1; }.cn-query-result dd { margin: 0; font-weight: 700; }.cn-query-result > a { display: inline-block; margin-top: 20px; padding: 10px 20px; border-radius: 7px; background: var(--cn-primary); color: #fff; font-weight: 700; }
@media (max-width: 767px) { .cn-payment-card,.cn-query-card { padding: 24px 18px; }.cn-payment-heading { align-items: start; flex-direction: column; }.cn-payment-amount { text-align: left; }.cn-payment-methods { grid-template-columns: 1fr; }.cn-query-form { flex-direction: column; }.cn-query-form button { height: 46px; }.cn-checkout-steps li { font-size: 11px; } }