/* ============================================================
   Travnir — B2B Souvenirs & Crafts Wholesale
   Palette: Mint Green × Navy (清爽高级 · 欧美 B2B 主流)
   ============================================================ */

:root {
  /* ---- 主色 ---- */
  --tr-navy:      #0f2a43;   /* 深海军蓝：标题/页脚/主按钮 */
  --tr-navy-2:    #163a5c;   /* 海军蓝次级 */
  --tr-navy-soft: #eef3f8;   /* 海军蓝极淡底 */

  --tr-mint:      #12b886;   /* 薄荷绿：主点缀/链接/图标 */
  --tr-mint-2:    #0ca678;   /* 薄荷绿深一点 hover */
  --tr-mint-soft: #e6f8f2;   /* 薄荷绿淡底 */

  --tr-teal:      #0ea5a5;   /* 青蓝：渐变中段 */
  --tr-sky:       #38bdf8;   /* 天蓝：高亮 */

  --tr-grad:      linear-gradient(120deg, #12b886 0%, #0ea5a5 55%, #0f2a43 100%);
  --tr-grad-btn:  linear-gradient(120deg, #12b886 0%, #0ea5a5 100%);

  --tr-bg:        #ffffff;
  --tr-bg-soft:   #f5f8fa;   /* 页面浅底 */
  --tr-bg-warm:   #fbfcfc;
  --tr-text:      #26333d;
  --tr-text-soft: #5a6b78;
  --tr-border:    #e5edf2;
  --tr-border-2:  #d3e1ea;
  --tr-white:     #ffffff;

  --tr-gold:      #d4a017;   /* 仅用于星级/极少量点缀 */
  --tr-shadow:    0 6px 24px rgba(15, 42, 67, .08);
  --tr-shadow-lg: 0 14px 40px rgba(15, 42, 67, .14);

  --tr-radius:    10px;
  --tr-radius-sm: 6px;
  --tr-trans:     .25s cubic-bezier(.4,0,.2,1);
}

/* ---- reset & base ---- */
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', Arial, sans-serif;
  color: var(--tr-text);
  background: var(--tr-bg);
  line-height:1.65;
  font-size:15px;
  -webkit-font-smoothing:antialiased;
}
img { max-width:100%; display:block; }
a { color: var(--tr-mint); text-decoration:none; transition: color var(--tr-trans); }
a:hover { color: var(--tr-mint-2); }
ul { list-style:none; }
h1,h2,h3,h4,h5 { color: var(--tr-navy); line-height:1.25; font-weight:700; letter-spacing:-.01em; }

/* ============================================================
   通用组件 (共用类)
   ============================================================ */
.tr-container { max-width:1200px; margin:0 auto; padding:0 20px; }

/* top bar */
.tr-topbar {  background: var(--tr-navy);color:#c7d4e0;font-size:13px;padding:8px 0;}
.tr-topbar .tr-container { display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; }
.tr-topbar a { color:#c7d4e0; }
.tr-topbar a:hover { color:#fff; }
.tr-topbar-left { display:flex; gap:22px; align-items:center; flex-wrap:wrap; }
.tr-topbar-left span { display:inline-flex; align-items:center; gap:6px; }
.tr-topbar-left i { color: var(--tr-sky); }
.tr-topbar-right { display:flex; gap:16px; align-items:center; }
.tr-topbar-right .tr-lang { color:#8ee4c4; font-weight:600; }

/* Whatsapp */
.fixed-whatsapp-btn { position: fixed; bottom: 30px; right: 30px; z-index: 9999; background: #25d366; color: #fff; width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 30px; box-shadow: 0 2px 10px rgba(0,0,0,0.2); text-decoration: none; }
.fixed-whatsapp-btn:hover { box-shadow: 0 4px 18px rgba(37,211,102,0.5); transform: scale(1.05); }

/* header / nav */
.tr-header {
  background:#fff;
  border-bottom:1px solid var(--tr-border);
  position:sticky; top:0; z-index:100;
  box-shadow:0 2px 12px rgba(15,42,67,.05);
}
.tr-header .tr-container { display:flex; align-items:center; justify-content:space-between; gap:24px; padding-top:12px; padding-bottom:12px; }
.tr-brand { display:flex; align-items:center; gap:10px; font-weight:800; font-size:24px; color: var(--tr-navy); letter-spacing:-.03em; }
.tr-brand .tr-logo { width:40px; height:40px; border-radius:9px; background: var(--tr-grad); display:flex; align-items:center; justify-content:center; color:#fff; font-size:19px; box-shadow: var(--tr-shadow); }
.tr-brand span { color: var(--tr-mint); }
.tr-brand small { display:block; font-size:10px; letter-spacing:.18em; color: var(--tr-text-soft); font-weight:600; text-transform:uppercase; }

.tr-nav-wrap { display:flex; align-items:center; gap:8px; }
.tr-menu { display:flex; gap:4px; align-items:center; }
.tr-menu > li { position:relative; }
.tr-menu > li > a {
  display:inline-flex; align-items:center; gap:6px;
  padding:9px 14px; border-radius: var(--tr-radius-sm);
  color: var(--tr-navy); font-weight:600; font-size:14.5px;
}
.tr-menu > li > a:hover { background: var(--tr-mint-soft); color: var(--tr-mint); }
.tr-menu > li > a i { font-size:11px; opacity:.7; }
.tr-menu > li > a::after { content:''; position:absolute; left:14px; right:14px; bottom:2px; height:2px; border-radius:2px; background: var(--tr-mint); transform:scaleX(0); transition: transform var(--tr-trans); }
.tr-menu > li:hover > a::after, .tr-menu > li:focus-within > a::after { transform:scaleX(1); }

/* dropdown */
.tr-dropdown-menu {
  position:absolute; top:calc(100% + 6px); left:0;
  background:#fff; border:1px solid var(--tr-border); border-radius: var(--tr-radius);
  box-shadow: var(--tr-shadow-lg); min-width:250px; padding:10px 0;
  opacity:0; visibility:hidden; transform:translateY(8px); transition: all var(--tr-trans);
  z-index:110;
}
.tr-dropdown-menu li a {
  display:flex; flex-direction:column; gap:2px;
  padding:9px 18px; color: var(--tr-text); font-weight:600; font-size:14px;
  border-left:3px solid transparent;
}
.tr-dropdown-menu li a small { color: var(--tr-text-soft); font-weight:400; font-size:12px; }
.tr-dropdown-menu li a:hover { background: var(--tr-mint-soft); color: var(--tr-mint); border-left-color: var(--tr-mint); }
.tr-dropdown:hover .tr-dropdown-menu, .tr-dropdown:focus-within .tr-dropdown-menu { opacity:1; visibility:visible; transform:translateY(0); }

.tr-header-actions { display:flex; align-items:center; gap:10px; }
.tr-search { position:relative; }
.tr-search input {
  padding:9px 14px 9px 38px; border:1px solid var(--tr-border-2); border-radius:30px;
  background: var(--tr-bg-soft); font-size:14px; width:190px; color: var(--tr-text); outline:none; transition: all var(--tr-trans);
}
.tr-search input:focus { border-color: var(--tr-mint); width:220px; background:#fff; box-shadow:0 0 0 3px var(--tr-mint-soft); }
.tr-search i { position:absolute; left:14px; top:50%; transform:translateY(-50%); color: var(--tr-text-soft); font-size:14px; }
.tr-cart-btn {
  width:40px; height:40px; border-radius:50%; border:1px solid var(--tr-border-2);
  background:#fff; color: var(--tr-navy); display:flex; align-items:center; justify-content:center; position:relative; cursor:pointer; transition: all var(--tr-trans);
}
.tr-cart-btn:hover { border-color: var(--tr-mint); color: var(--tr-mint); }
.tr-cart-btn .tr-badge { position:absolute; top:-4px; right:-4px; background: var(--tr-mint); color:#fff; font-size:10px; font-weight:700; min-width:18px; height:18px; border-radius:9px; display:flex; align-items:center; justify-content:center; }

.tr-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 24px; border-radius:30px; font-weight:700; font-size:14.5px;
  border:none; cursor:pointer; transition: all var(--tr-trans); white-space:nowrap;
}
.tr-btn-primary { background: var(--tr-grad-btn); color:#fff; box-shadow:0 6px 16px rgba(18,184,134,.3); }
.tr-btn-primary:hover { filter:brightness(1.06); transform:translateY(-2px); box-shadow:0 10px 22px rgba(18,184,134,.4); color:#fff; }
.tr-btn-outline { background:transparent; color: var(--tr-navy); border:2px solid var(--tr-navy); }
.tr-btn-outline:hover { background: var(--tr-navy); color:#fff; }
.tr-btn-ghost { background: rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.4); }
.tr-btn-ghost:hover { background:#fff; color: var(--tr-navy); }
.tr-btn-sm { padding:7px 16px; font-size:13px; }
.tr-btn-white { background:#fff; color: var(--tr-navy); }
.tr-btn-white:hover { background: var(--tr-mint-soft); color: var(--tr-mint); }

/* section */
.tr-section { padding:56px 0; }
.tr-section-soft { background: var(--tr-bg-soft); }
.tr-section-warm { background: var(--tr-bg-warm); }
.tr-section-navy { background: var(--tr-navy); color:#dbe6ef; }
.tr-section-navy h2, .tr-section-navy h3 { color:#fff; }
.tr-section-navy .tr-sec-sub { color:#9fc0d8; }

.tr-sec-head { text-align:center; max-width:680px; margin:0 auto 38px; }
.tr-sec-tag { display:inline-block; color: var(--tr-mint); font-weight:700; font-size:12px; letter-spacing:.16em; text-transform:uppercase; margin-bottom:8px; }
.tr-sec-head h2 { font-size:30px; margin-bottom:10px; }
.tr-sec-sub { color: var(--tr-text-soft); font-size:15.5px; }

/* grid helpers */
.tr-grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:26px; }
.tr-grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.tr-grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.tr-grid-6 { display:grid; grid-template-columns:repeat(6,1fr); gap:16px; }

/* image fixed-ratio wrapper */
.tr-img-wrap { position:relative; overflow:hidden; border-radius: var(--tr-radius); background: var(--tr-bg-soft); }
.tr-img-wrap.r-4x3 { padding-top:75%; }
.tr-img-wrap.r-1x1 { padding-top:100%; }
.tr-img-wrap.r-16x9 { padding-top:56.25%; }
.tr-img-wrap.r-3x4 { padding-top:133.33%; }
.tr-img-wrap .tr-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition: transform .5s ease; }
.tr-img-wrap:hover .tr-img { transform:scale(1.06); }

/* tag / badge */
.tr-tag { display:inline-block; padding:4px 12px; border-radius:30px; font-size:12px; font-weight:700; }
.tr-tag-mint { background: var(--tr-mint-soft); color: var(--tr-mint); }
.tr-tag-navy { background: var(--tr-navy); color:#fff; }
.tr-tag-outline { border:1px solid var(--tr-border-2); color: var(--tr-text-soft); background:#fff; }

/* footer */
.tr-footer { background: var(--tr-navy); color:#c7d4e0; padding:56px 0 0; }
.tr-footer-grid { display:grid; grid-template-columns:1fr 1fr 1fr 1fr; gap:32px; padding-bottom:38px; }
.tr-footer-brand {display: inline-flex;align-items: center;gap: 6px;/* 缩小图标与文字距离 */ font-weight: 800;font-size: 22px;color: #fff;margin-bottom: 14px;letter-spacing: -0.01em;}
.tr-footer-brand .tr-logo {width: 22px;height: 22px;display: flex;align-items: center;justify-content: center;flex-shrink: 0;}
.tr-footer-brand .tr-logo i {font-size: 18px;line-height: 1;color: var(--tr-sky);}
.tr-footer-brand > div {display: inline-block;line-height: 1;}
.tr-footer-brand span {color: var(--tr-sky);}
.tr-footer p { font-size:14px; margin-bottom:16px; }
.tr-footer h5 { color:#fff; font-size:14.5px; margin-bottom:16px; letter-spacing:.04em; }
.tr-footer ul li { margin-bottom:9px; }
.tr-footer ul a { color:#9fb6ca; font-size:14px; }
.tr-footer ul a:hover { color: var(--tr-sky); }
.tr-footer-social { display:flex; gap:10px; }
.tr-footer-social a { width:36px; height:36px; border-radius:50%; background: rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; color:#c7d4e0; }
.tr-footer-social a:hover { background: var(--tr-mint); color:#fff; }
.tr-footer-bottom { border-top:1px solid rgba(255,255,255,.1); padding:20px 0; font-size:13px; color:#8ea6bb; }
.tr-footer-bottom .tr-container { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; }
.tr-footer-legal a { color:#8ea6bb; margin-left:18px; }
.tr-footer-legal a:hover { color:#fff; }
.tr-footer .tr-pay-icons { display:flex; gap:8px; margin-top:14px; flex-wrap:wrap; }
.tr-footer .tr-pay-icons span { background: rgba(255,255,255,.09); color:#c7d4e0; padding:4px 10px; border-radius:5px; font-size:12px; font-weight:700; }

/* breadcrumb */
.tr-breadcrumb { background: var(--tr-bg-soft); padding:16px 0; font-size:14px; color: var(--tr-text-soft); }
.tr-breadcrumb a { color: var(--tr-text-soft); }
.tr-breadcrumb a:hover { color: var(--tr-mint); }
.tr-breadcrumb .sep { margin:0 8px; opacity:.5; }
.tr-breadcrumb .current { color: var(--tr-navy); font-weight:600; }

/* ============================================================
    (index)
   ============================================================ */
/* ========================================= */
/* HERO SECTION - FULL BANNER WITH MASK      */
/* ========================================= */

.tr-hero {
    position: relative;
    width: 100%;
    height: 80vh; 
    min-height: 600px; 
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden; 
    color: var(--tr-white);
    text-align: left;
}

.tr-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('/assets/images/banners/wholesale-souvenirs-crafts-supplier.webp');    
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover; 
    z-index: 1;
}

.tr-hero::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(15, 42, 67, 0.85) 0%, rgba(15, 42, 67, 0.6) 40%, rgba(15, 42, 67, 0) 100%);
    z-index: 2;
}

.tr-hero-inner {position: relative;z-index: 3;width: 100%;max-width: 1140px;padding: 0 20px;}
.tr-hero-copy {max-width: 550px; }
.tr-hero h1 { color:#fff; font-size:46px; line-height:1.12; margin-bottom:16px; }
.tr-hero h1 em { font-style:normal; color: var(--tr-sky); }
.tr-hero-p { color:#bcd3e5; font-size:17px; margin-bottom:26px; max-width:520px; }
.tr-hero-actions { display:flex; gap:14px; flex-wrap:wrap; margin-bottom:30px; }

.tr-hero-stats { display:flex; gap:34px; flex-wrap:wrap; }
.tr-hero-stat { color:#fff; }
.tr-hero-stat b { display:block; font-size:28px; color: var(--tr-sky); }
.tr-hero-stat span { font-size:13px; color:#9fc0d8; }


/* trust bar */
.tr-trust { background:#fff; border-bottom:1px solid var(--tr-border); padding:22px 0; }
.tr-trust-item { display:flex; align-items:center; gap:14px; }
.tr-trust-icon { width:48px; height:48px; border-radius:12px; background: var(--tr-mint-soft); color: var(--tr-mint); display:flex; align-items:center; justify-content:center; font-size:20px; flex-shrink:0; }
.tr-trust-item h4 { font-size:15px; color: var(--tr-navy); }
.tr-trust-item small { color: var(--tr-text-soft); font-size:13px; }

/* circular categories */
.tr-circ { text-align:center; }
.tr-circ .tr-img-wrap { border-radius:50%; padding-top:100%; border:3px solid #fff; box-shadow: var(--tr-shadow); }
.tr-circ a:hover .tr-img-wrap { box-shadow:0 0 0 3px var(--tr-mint); }
.tr-circ a:hover .tr-circ-name { color: var(--tr-mint); }
.tr-circ-name { display:block; margin-top:12px; font-weight:700; color: var(--tr-navy); font-size:14.5px; transition: color var(--tr-trans); }
.tr-circ-count { color: var(--tr-text-soft); font-size:12px; }

/* industry card */
.tr-ind-card { background:#fff; border:1px solid var(--tr-border); border-radius: var(--tr-radius); overflow:hidden; transition: all var(--tr-trans); }
.tr-ind-card:hover { transform:translateY(-5px); box-shadow: var(--tr-shadow-lg); border-color: var(--tr-mint); }
.tr-ind-card .tr-img-wrap { border-radius:0; }
.tr-ind-body { padding:20px; }
.tr-ind-body h3 { font-size:18px; margin-bottom:8px; }
.tr-ind-body p { font-size:14px; color: var(--tr-text-soft); margin-bottom:12px; }
.tr-ind-link { font-weight:700; font-size:14px; display:inline-flex; align-items:center; gap:6px; }

/* product card */
.tr-prod-card { background:#fff; border:1px solid var(--tr-border); border-radius: var(--tr-radius); overflow:hidden; transition: all var(--tr-trans); display:flex; flex-direction:column; }
.tr-prod-card:hover { transform:translateY(-5px); box-shadow: var(--tr-shadow-lg); border-color: var(--tr-mint); }
.tr-prod-thumb { position:relative; }
.tr-prod-thumb .tr-tag { position:absolute; top:12px; left:12px; z-index:2; }
.tr-prod-body { padding:18px; display:flex; flex-direction:column; gap:8px; flex:1; }
.tr-prod-cat { font-size:12px; color: var(--tr-mint); font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.tr-prod-body h3 { font-size:16.5px; line-height:1.35; }
.tr-prod-meta { display:flex; gap:14px; font-size:13px; color: var(--tr-text-soft); margin-top:auto; padding-top:8px; border-top:1px solid var(--tr-border); }
.tr-prod-meta span { display:inline-flex; align-items:center; gap:5px; }
.tr-prod-meta i { color: var(--tr-mint); }
.tr-prod-foot { padding:0 18px 18px; display:flex; gap:10px; }

/* feature (why) */
.tr-feat { text-align:center; background:#fff; border:1px solid var(--tr-border); border-radius: var(--tr-radius); padding:30px 22px; transition: all var(--tr-trans); }
.tr-feat:hover { transform:translateY(-5px); box-shadow: var(--tr-shadow-lg); border-color: var(--tr-mint); }
.tr-feat-icon { width:62px; height:62px; border-radius:16px; background: var(--tr-mint-soft); color: var(--tr-mint); display:flex; align-items:center; justify-content:center; font-size:26px; margin:0 auto 16px; }
.tr-feat h3 { font-size:18px; margin-bottom:8px; }
.tr-feat p { font-size:14px; color: var(--tr-text-soft); }

/* steps */
.tr-step { display:flex; gap:18px; align-items:flex-start; }
.tr-step-num { width:44px; height:44px; border-radius:50%; background: var(--tr-grad); color:#fff; font-weight:800; font-size:18px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.tr-step h4 { color: var(--tr-navy); font-size:16px; margin-bottom:4px; }
.tr-step p { font-size:14px; color: var(--tr-text-soft); }

/* testimonial */
.tr-test { background:#fff; border:1px solid var(--tr-border); border-radius: var(--tr-radius); padding:26px; transition: all var(--tr-trans); }
.tr-test:hover { box-shadow: var(--tr-shadow-lg); }
.tr-test-stars { color: var(--tr-gold); font-size:14px; margin-bottom:12px; }
.tr-test-quote { font-size:15px; color: var(--tr-text); margin-bottom:18px; font-style:italic; }
.tr-test-author { display:flex; align-items:center; gap:12px; }
.tr-test-author .tr-img-wrap { width:46px; height:46px; border-radius:50%; padding-top:0; flex-shrink:0; }
.tr-test-author .tr-img { position:static; }
.tr-test-author h5 { font-size:14.5px; }
.tr-test-author small { color: var(--tr-text-soft); font-size:12.5px; }

/* CTA banner */
.tr-cta { background: var(--tr-grad); border-radius:18px; padding:46px 40px; color:#fff; text-align:center; position:relative; overflow:hidden; }
.tr-cta::before { content:''; position:absolute; right:-60px; top:-60px; width:220px; height:220px; border-radius:50%; background: rgba(255,255,255,.08); }
.tr-cta h2 { color:#fff; font-size:30px; margin-bottom:10px; }
.tr-cta p { color:#d6f5ec; font-size:16px; margin-bottom:24px; }

/* logo cloud */
.tr-logos { display:flex; justify-content:center; align-items:center; gap:46px; flex-wrap:wrap; opacity:.75; }
.tr-logos span { font-weight:800; font-size:20px; color: var(--tr-text-soft); letter-spacing:.02em; }
.tr-logo-img {max-height: 48px;width: auto;object-fit: contain;}
.tr-footer-logo-img { max-height: 34px; width: auto; object-fit: contain; }

/* ============================================================
   行业页 / 通用列表页 专属
   ============================================================ */
.tr-page-head { background: var(--tr-navy); color:#fff; padding:52px 0; position:relative; overflow:hidden; }
.tr-page-head::after { content:''; position:absolute; right:-50px; bottom:-50px; width:240px; height:240px; border-radius:50%; background: rgba(18,184,134,.18); }
.tr-page-head h1 { color:#fff; font-size:36px; margin-bottom:8px; }
.tr-page-head p { color:#bcd3e5; font-size:16px; max-width:640px; }
.tr-page-head .tr-tag { background: rgba(255,255,255,.14); color:#fff; margin-bottom:14px; }

.tr-ind-detail { scroll-margin-top:90px; }
.tr-ind-detail + .tr-ind-detail { margin-top:0; }
.tr-ind-detail .tr-grid-2 { align-items:center; }
.tr-ind-detail-visual { position:relative; }
.tr-ind-detail-visual .tr-hero-badge { left:auto; right:-14px; top:18px; }
.tr-ind-detail ul { margin-top:16px; display:flex; flex-direction:column; gap:10px; }
.tr-ind-detail ul li { display:flex; gap:10px; align-items:flex-start; font-size:15px; }
.tr-ind-detail ul li i { color: var(--tr-mint); margin-top:4px; flex-shrink:0; }

/* ============================================================
   产品页 专属
   ============================================================ */
.tr-prod-controls { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:26px; flex-wrap:wrap; }
.tr-prod-count { color: var(--tr-text-soft); font-size:14px; }
.tr-prod-sort { display:flex; gap:10px; align-items:center; font-size:14px; color: var(--tr-text-soft); }
.tr-prod-sort select { padding:8px 14px; border:1px solid var(--tr-border-2); border-radius: var(--tr-radius-sm); background:#fff; color: var(--tr-text); outline:none; cursor:pointer; }
.tr-prod-section { padding-top:0; }

/* tabs (category switch) */
.tr-tabs-nav { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:30px; border-bottom:2px solid var(--tr-border);  }
.tr-tabs-nav button { padding:10px 22px; border:none; background:transparent; color: var(--tr-text-soft); font-weight:700; font-size:14.5px; cursor:pointer; border-bottom:3px solid transparent; margin-bottom:-2px; transition: all var(--tr-trans); }
.tr-tabs-nav button.active, .tr-tabs-nav button:hover { color: var(--tr-mint); border-bottom-color: var(--tr-mint); }
.tr-tab-panel { display:none; }
.tr-tab-panel.active { display:block; animation: fade .35s ease; }
@keyframes fade { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }

/* pagination */
.tr-pagination { display:flex; justify-content:center; gap:8px; margin-top:40px; }
.tr-pagination a { width:40px; height:40px; border-radius:9px; border:1px solid var(--tr-border-2); background:#fff; color: var(--tr-text); display:flex; align-items:center; justify-content:center; font-weight:600; transition: all var(--tr-trans); }
.tr-pagination a:hover, .tr-pagination a.active { background: var(--tr-mint); color:#fff; border-color: var(--tr-mint); }

/* ============================================================
   产品详情页 专属
   ============================================================ */
.tr-pd-layout { display:grid; grid-template-columns:1.1fr 1fr; gap:44px; }
.tr-pd-gallery { display:flex; flex-direction:column; gap:14px; }
.tr-pd-gallery .tr-main-img { border-radius: var(--tr-radius); overflow:hidden; margin-bottom:0; }
.tr-pd-thumbs { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.tr-pd-thumb { border-radius: var(--tr-radius-sm); overflow:hidden; cursor:pointer; border:2px solid transparent; transition: all var(--tr-trans); }
.tr-pd-thumb.active, .tr-pd-thumb:hover { border-color: var(--tr-mint); }
.tr-pd-info h1 { font-size:30px; margin-bottom:12px; }
.tr-pd-rating { display:flex; align-items:center; gap:10px; margin-bottom:16px; font-size:14px; color: var(--tr-text-soft); }
.tr-pd-rating .tr-stars { color: var(--tr-gold); }
.tr-pd-price { display:flex; align-items:baseline; gap:12px; margin-bottom:18px; }
.tr-pd-price b { font-size:34px; color: var(--tr-mint); font-weight:800; }
.tr-pd-price del { color: var(--tr-text-soft); font-size:16px; }
.tr-pd-price .tr-save { background: var(--tr-mint-soft); color: var(--tr-mint); }
.tr-pd-desc { color: var(--tr-text-soft); font-size:15px; margin-bottom:22px; }
.tr-pd-opt { margin-bottom:20px; }
.tr-pd-opt-label { font-weight:700; color: var(--tr-navy); font-size:14px; margin-bottom:9px; }
.tr-pd-opt-label span { color: var(--tr-text-soft); font-weight:400; }
.tr-pd-swatches { display:flex; gap:10px; flex-wrap:wrap; }
.tr-pd-swatch { padding:8px 16px; border:2px solid var(--tr-border-2); border-radius:30px; background:#fff; cursor:pointer; font-size:14px; font-weight:600; color: var(--tr-text); transition: all var(--tr-trans); }
.tr-pd-swatch.active, .tr-pd-swatch:hover { border-color: var(--tr-mint); color: var(--tr-mint); background: var(--tr-mint-soft); }
.tr-pd-qty { display:flex; align-items:center; gap:14px; margin-bottom:24px; }
.tr-pd-qty-control { display:flex; align-items:center; border:1px solid var(--tr-border-2); border-radius:30px; overflow:hidden; }
.tr-pd-qty-control button { width:40px; height:40px; border:none; background: var(--tr-bg-soft); cursor:pointer; font-size:18px; color: var(--tr-navy); }
.tr-pd-qty-control input { width:52px; height:40px; border:none; text-align:center; font-weight:700; font-size:15px; outline:none; }
.tr-pd-actions { display:flex; gap:12px; margin-bottom:24px; }
.tr-pd-actions .tr-btn { flex:1; }
.tr-pd-meta-list { border-top:1px solid var(--tr-border); padding-top:18px; display:flex; flex-direction:column; gap:10px; }
.tr-pd-meta-list div { display:flex; align-items:center; gap:10px; font-size:14px; color: var(--tr-text-soft); }
.tr-pd-meta-list i { color: var(--tr-mint); width:18px; }

/* tabs (description/specs/reviews/shipping) */
.tr-pd-tabs-nav { display:flex; gap:0; border-bottom:2px solid var(--tr-border); margin:50px 0 30px; flex-wrap:wrap; }
.tr-pd-tabs-nav button { padding:13px 26px; border:none; background:transparent; color: var(--tr-text-soft); font-weight:700; font-size:15px; cursor:pointer; border-bottom:3px solid transparent; margin-bottom:-2px; transition: all var(--tr-trans); }
.tr-pd-tabs-nav button.active, .tr-pd-tabs-nav button:hover { color: var(--tr-navy); border-bottom-color: var(--tr-mint); }
.tr-pd-tab-panel { display:none; }
.tr-pd-tab-panel.active { display:block; animation: fade .35s ease; }
.tr-pd-tab-panel h3 { font-size:20px; margin:0 0 14px; }
.tr-pd-tab-panel p { color: var(--tr-text-soft); margin-bottom:14px; }
.tr-spec-table { width:100%; border-collapse:collapse; }
.tr-spec-table tr { border-bottom:1px solid var(--tr-border); }
.tr-spec-table th { text-align:left; padding:12px 14px; width:40%; color: var(--tr-navy); font-weight:700; background: var(--tr-bg-soft); }
.tr-spec-table td { padding:12px 14px; color: var(--tr-text-soft); }
.tr-review { display:flex; gap:16px; padding:20px 0; border-bottom:1px solid var(--tr-border); }
.tr-review .tr-img-wrap { width:52px; height:52px; border-radius:50%; padding-top:0; flex-shrink:0; }
.tr-review .tr-img { position:static; }
.tr-review-body h5 { font-size:15px; }
.tr-review-body .tr-stars { font-size:13px; margin:4px 0; }
.tr-review-body p { font-size:14.5px; margin:6px 0 0; }

/* ============================================================
   about
   ============================================================ */
.tr-about-lead { font-size:17px; color: var(--tr-text-soft); max-width:780px; margin:0 auto; text-align:center; }
.tr-stat { background:#fff; border:1px solid var(--tr-border); border-radius: var(--tr-radius); padding:28px 20px; text-align:center; transition: all var(--tr-trans); }
.tr-stat:hover { transform:translateY(-4px); box-shadow: var(--tr-shadow); border-color: var(--tr-mint); }
.tr-stat b { display:block; font-size:38px; color: var(--tr-mint); line-height:1; margin-bottom:6px; }
.tr-stat span { color: var(--tr-text-soft); font-size:14px; }
.tr-value { background:#fff; border:1px solid var(--tr-border); border-radius: var(--tr-radius); padding:28px 24px; transition: all var(--tr-trans); text-align:center;}
.tr-value:hover { box-shadow: var(--tr-shadow); border-color: var(--tr-mint); }
.tr-value .tr-feat-icon { margin:0 auto 14px; }
.tr-value h3 { font-size:17px; margin-bottom:6px; }
.tr-value p { font-size:14px; color: var(--tr-text-soft); }
.tr-team-card { text-align:center; }
.tr-team-card .tr-img-wrap { border-radius:50%; padding-top:100%; margin-bottom:14px; }
.tr-team-card h4 { font-size:16px; }
.tr-team-card small { color: var(--tr-mint); font-weight:600; font-size:13px; }

/* ============================================================
   Blog 
   ============================================================ */
.tr-post-card { background:#fff; border:1px solid var(--tr-border); border-radius: var(--tr-radius); overflow:hidden; transition: all var(--tr-trans); display:flex; flex-direction:column; }
.tr-post-card:hover { transform:translateY(-5px); box-shadow: var(--tr-shadow-lg); border-color: var(--tr-mint); }
.tr-post-card .tr-img-wrap { border-radius:0; }
.tr-post-body { padding:22px; display:flex; flex-direction:column; gap:10px; flex:1; }
.tr-post-meta { display:flex; gap:14px; font-size:12.5px; color: var(--tr-text-soft); flex-wrap:wrap; }
.tr-post-meta span { display:inline-flex; align-items:center; gap:5px; }
.tr-post-meta i { color: var(--tr-mint); }
.tr-post-body h3 { font-size:19px; line-height:1.35; }
.tr-post-body p { font-size:14px; color: var(--tr-text-soft); }
.tr-post-foot { padding:0 22px 22px; margin-top:auto; }
.tr-post-tag { font-size:12px; font-weight:700; color: var(--tr-mint); text-transform:uppercase; letter-spacing:.06em; }

.tr-post-hero { position:relative; }
.tr-post-hero .tr-img-wrap { border-radius:0; padding-top:42%; }
.tr-post-hero-inner { position:absolute; inset:0; display:flex; align-items:flex-end; padding:48px 0; background:linear-gradient(0deg, rgba(15,42,67,.82), rgba(15,42,67,.15)); }
.tr-post-hero-inner .tr-container { width:100%; }
.tr-post-hero-inner .tr-tag { background: var(--tr-mint); color:#fff; margin-bottom:14px; }
.tr-post-hero-inner h1 { color:#fff; font-size:38px; max-width:800px; margin-bottom:14px; }
.tr-post-hero-meta { color:#c7ddea; font-size:14px; display:flex; gap:22px; flex-wrap:wrap; }
.tr-post-hero-meta span { display:inline-flex; align-items:center; gap:7px; }
.tr-post-hero-meta i { color: var(--tr-sky); }

.tr-article { font-size:16px; color: var(--tr-text); }
.tr-article h2 { font-size:24px; margin:34px 0 14px; }
.tr-article h3 { font-size:19px; margin:26px 0 12px; }
.tr-article p { margin-bottom:16px; }
.tr-article ul, .tr-article ol { margin:0 0 18px 4px; padding-left:22px; }
.tr-article li { margin-bottom:9px; }
.tr-article blockquote { background: var(--tr-mint-soft); border-left:4px solid var(--tr-mint); padding:18px 22px; border-radius:0 var(--tr-radius-sm) var(--tr-radius-sm) 0; margin:22px 0; font-style:italic; color: var(--tr-navy); }
.tr-article .tr-img-wrap { margin:24px 0; }

/* ============================================================
   contact
   ============================================================ */
.tr-form { background:#fff; border:1px solid var(--tr-border); border-radius: var(--tr-radius); padding:34px; }
.tr-form .tr-grid-2 { gap:18px; }
.tr-field { margin-bottom:18px; }
.tr-field label { display:block; font-weight:700; color: var(--tr-navy); font-size:14px; margin-bottom:7px; }
.tr-field label .req { color: var(--tr-mint); }
.tr-field input, .tr-field select, .tr-field textarea {
  width:100%; padding:11px 14px; border:1px solid var(--tr-border-2); border-radius: var(--tr-radius-sm);
  font-size:14.5px; color: var(--tr-text); background:#fff; outline:none; transition: all var(--tr-trans); font-family:inherit;
}
.tr-field input:focus, .tr-field select:focus, .tr-field textarea:focus { border-color: var(--tr-mint); box-shadow:0 0 0 3px var(--tr-mint-soft); }
.tr-field textarea { min-height:130px; resize:vertical; }
.tr-form-note { font-size:13px; color: var(--tr-text-soft); margin-top:6px; }
.tr-form-success { display:none; background: var(--tr-mint-soft); border:1px solid var(--tr-mint); color: var(--tr-mint-2); padding:14px 18px; border-radius: var(--tr-radius-sm); margin-bottom:20px; align-items:center; gap:10px; font-weight:600; }
.tr-form-success.show { display:flex; }

.tr-info-box { background: var(--tr-navy); color:#fff; border-radius: var(--tr-radius); padding:34px; }
.tr-info-box h3 { color:#fff; margin-bottom:22px; }
.tr-info-item { display:flex; gap:14px; align-items:flex-start; margin-bottom:20px; }
.tr-info-item .tr-info-icon { width:42px; height:42px; border-radius:11px; background: rgba(255,255,255,.1); color: var(--tr-sky); display:flex; align-items:center; justify-content:center; font-size:17px; flex-shrink:0; }
.tr-info-item h4 { color:#fff; font-size:15px; margin-bottom:2px; }
.tr-info-item p { color:#bcd3e5; font-size:14px; }
.tr-info-box .tr-btn { margin-top:8px; }

.tr-faq-item { background:#fff; border:1px solid var(--tr-border); border-radius: var(--tr-radius); margin-bottom:12px; overflow:hidden; }
.tr-faq-q { width:100%; text-align:left; padding:18px 22px; border:none; background:transparent; font-weight:700; color: var(--tr-navy); font-size:15.5px; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:14px; }
.tr-faq-q i { color: var(--tr-mint); transition: transform var(--tr-trans); flex-shrink:0; }
.tr-faq-item.open .tr-faq-q i { transform:rotate(180deg); }
.tr-faq-a { max-height:0; overflow:hidden; transition: max-height .35s ease; }
.tr-faq-item.open .tr-faq-a { max-height:600px; }
.tr-faq-a-inner { padding:0 22px 20px; color: var(--tr-text-soft); font-size:14.5px; }

/* legal (policies) */
.tr-legal { background:#fff; border:1px solid var(--tr-border); border-radius: var(--tr-radius); padding:40px; }
.tr-legal h2 { font-size:22px; margin:30px 0 12px; }
.tr-legal h2:first-child { margin-top:0; }
.tr-legal h3 { font-size:17px; margin:20px 0 8px; color: var(--tr-mint); }
.tr-legal p, .tr-legal li { color: var(--tr-text-soft); font-size:15px; margin-bottom:10px; }
.tr-legal ul { padding-left:22px; list-style:disc; }
.tr-legal a { color: var(--tr-mint); }

.tr-burger { display:none; flex-direction:column; gap:5px; width:40px; height:40px; border:1px solid var(--tr-border-2); border-radius:8px; align-items:center; justify-content:center; background:#fff; cursor:pointer; }
.tr-burger span { width:20px; height:2px; background: var(--tr-navy); border-radius:2px; }