/* =========================================================
 * Urban Threads · Streetwear Palette (copied from urban-threads/pages/index.html)
 * Applied to Hugo Universal Theme via project-level custom.css
 * Token namespaced as --urban-* (source-compatible)
 * Universal's legacy --primary-accent etc. are remapped at :root below
 * ========================================================= */
:root {
  /* Brand — acid lime (11-step scale from source) */
  --urban-primary-50:  #f7ffe6;
  --urban-primary-100: #edffc7;
  --urban-primary-200: #dcff95;
  --urban-primary-300: #c7ff56;
  --urban-primary-400: #b0f626;
  --urban-primary-500: #98d913;
  --urban-primary-600: #77b009;
  --urban-primary-700: #5a850b;
  --urban-primary-800: #48690f;
  --urban-primary-900: #3d5813;
  --urban-primary-950: #1f3104;

  /* Neutral — warm stone ramp from source */
  --urban-neutral-0:   #ffffff;
  --urban-neutral-50:  #fafafa;
  --urban-neutral-100: #f5f5f5;
  --urban-neutral-200: #e5e5e5;
  --urban-neutral-300: #d4d4d4;
  --urban-neutral-400: #a3a3a3;
  --urban-neutral-500: #737373;
  --urban-neutral-600: #525252;
  --urban-neutral-700: #404040;
  --urban-neutral-800: #262626;
  --urban-neutral-900: #171717;
  --urban-neutral-950: #0d0d0d;

  /* Semantic aliases — light surfaces + white cards (from source) */
  --urban-background:        #f5f5f4;
  --urban-foreground:        #1c1917;
  --urban-card:              #ffffff;
  --urban-card-foreground:   #1c1917;
  --urban-popover:           #ffffff;
  --urban-popover-foreground:#1c1917;
  --urban-primary:           #65a30d;   /* lime-700 — brand signature anchor */
  --urban-primary-foreground:#ffffff;
  --urban-muted:             #f5f5f4;
  --urban-muted-foreground:  #57534e;
  --urban-border:            #e7e5e4;
  --urban-input:             #ffffff;
  --urban-ring:              #65a30d;

  /* State */
  --urban-success: #22c55e;
  --urban-warning: #f59e0b;
  --urban-error:   #ef4444;
  --urban-info:    #3b82f6;

  /* Radius & shadow */
  --urban-radius-sm:  4px;
  --urban-radius-md:  8px;
  --urban-radius-lg:  12px;
  --urban-radius-full:9999px;
  --urban-shadow-float: 0 12px 40px rgba(0,0,0,0.10);

  /* Typography from source — exactly as urban-threads declares */
  --urban-font-display: 'Anton', 'Bebas Neue', 'Impact', sans-serif;
  --urban-font-title:   'Anton', 'Bebas Neue', 'Impact', sans-serif;
  --urban-font-body:    'Inter', 'SF Pro Display', system-ui, -apple-system,
                        'Segoe UI', sans-serif;
  --urban-font-mono:    'JetBrains Mono', 'SF Mono', Consolas, monospace;

  /* ===== Remap legacy Universal theme variables (so 80% of UI updates automatically) ===== */
  --primary-accent:   var(--urban-primary);        /* lime #65a30d */
  --navbar-border-top:var(--urban-primary-800);    /* deep lime #48690f for active nav top-border */
  --button-border:    var(--urban-primary-700);    /* #5a850b — button border */
  --link-focus:       var(--urban-primary-800);    /* #48690f — link focus */
  --form-shadow:      rgba(101, 163, 13, 0.45);   /* lime focus ring */
  --pagination-bg:    var(--urban-primary-100);   /* light lime bg for paginator wrapper */
  --link-hover-bg:    var(--urban-primary-700);   /* #5a850b — hover fills */
  --navbar-focus:     var(--urban-primary-500);   /* #98d913 — nav underline hover */
}

/* =========================================================
 * Global base reset to Urban palette + Inter body + Anton display
 * ========================================================= */
html, body, body p, body li, body td, body th, body input, body textarea, body select, body button {
  font-family: var(--urban-font-body);
  background: var(--urban-background);
  color: var(--urban-foreground);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body {
  font-size: 15px;        /* Urban feels a touch denser than Universal default */
  line-height: 1.65;      /* ~ leading-relaxed per source subtitle */
  letter-spacing: 0;
}

/* ===== Urban Threads shared typography helpers (copied verbatim) ===== */
.font-display { font-family: var(--urban-font-display); font-weight: 400; }
.font-title   { font-family: var(--urban-font-title);   font-weight: 400; }
.font-body    { font-family: var(--urban-font-body); }
.font-mono    { font-family: var(--urban-font-mono); }
/* Tracking helpers for streetwear display type — exactly the two from source */
.tracking-street       { letter-spacing: 0.04em; }
.tracking-tight-street { letter-spacing: -0.02em; }

/* ===== Universal h1..h6 → Anton (display) + uppercase, just like source =====
 * Source applies:  font-display + uppercase + tracking(-tight)-street
 * We mirror this across Universal's canonical heading blocks so the whole
 * site "becomes" Urban at one go, not just hero/banner.
 */
h1, h2, h3, h4, h5, h6,
.heading h1, .heading h2, .heading h3, .heading h4, .heading h5,
#footer h1, #footer h2, #footer h3, #footer h4,
.panel.sidebar-menu .panel-heading h1,
.panel.sidebar-menu .panel-heading h2,
.panel.sidebar-menu .panel-heading h3,
.panel.sidebar-menu .panel-heading h4,
.panel.sidebar-menu .panel-heading h5,
.banner .text h1, .banner .text h2, .banner .text h3,
.home-carousel .caption h1, .home-carousel .caption h2,
.box-simple h3, .box-image-text h3,
.testimonials .item .bottom .name,
#blog-listing-medium .post h2,
#blog-post h1, #blog-post h2, #blog-post h3,
#content h1, #content h2, #content h3,
section.bar h1, section.bar h2, section.bar h3 {
  font-family: var(--urban-font-display);
  font-weight: 400;               /* Anton only ships 400, that's its magic */
  text-transform: uppercase;
  letter-spacing: -0.02em;        /* tracking-tight-street (source hero) */
  line-height: 1.05;              /* leading-[0.95..1.05] street feel */
  color: var(--urban-foreground);
}

/* Eyebrow / chip-like subtitles (source: uppercase + bold + 4% tracking + text-sm) */
.heading h1 small, .heading h2 small, .heading h3 small, .heading h4 small,
section.bar p.lead,
.banner .text p,
.home-carousel .caption p.lead {
  font-family: var(--urban-font-body);
  font-weight: 700;
  letter-spacing: 0.04em;         /* tracking-street */
  text-transform: uppercase;
  font-size: 13px;
  line-height: 1.5;
}

/* Buttons / CTAs → source font: small + bold + uppercase + tracking-street */
.btn-template-main,
.btn-template-primary,
.btn-template-transparent-primary,
.btn-template-transparent-black,
.btn-primary,
.banner .btn,
.home-carousel .btn,
.btn-default {
  font-family: var(--urban-font-body);
  font-weight: 700 !important;    /* bold per source CTAs */
  letter-spacing: 0.04em !important; /* tracking-street */
  text-transform: uppercase;
  font-size: 13px !important;
  line-height: 1.4;
}

/* Sidebar title strips (Categories/Tags/Recent) already use Anton via above,
 * but Universal's older panel title needs smaller tracking to breathe. */
.panel.sidebar-menu .panel-heading h3 { letter-spacing: 0.01em; }

/* Footer: Anton titles but a hair lighter so it doesn't scream */
#footer h1, #footer h2, #footer h3, #footer h4 { letter-spacing: 0.01em; }

/* Body copy/paragraphs use Inter semibold for emphasis tags (source feel) */
strong, b { font-weight: 700; color: var(--urban-foreground); }
p { margin-bottom: 1em; color: var(--urban-neutral-700); }
.lead { font-size: 17px; line-height: 1.7; color: var(--urban-neutral-600); font-weight: 400; }
.small, small, .text-muted, .muted { font-family: var(--urban-font-body); color: var(--urban-muted-foreground); }

/* Mono labels (lang codes / SKUs / refs) — JetBrains Mono per source */
.lang-code, code, kbd, pre, samp, .sku, .ref {
  font-family: var(--urban-font-mono);
  font-feature-settings: "liga" 0, "calt" 0;
}

/* =========================================================
 * Links + accent text
 * ========================================================= */
a, a:visited {
  color: var(--urban-primary);
  text-decoration: none;
  transition: color 0.18s ease-out, background 0.18s ease-out;
}
a:hover, a:focus, a:active {
  color: var(--urban-primary-700);
  text-decoration: underline;
}

.accent,
.required {
  color: var(--urban-primary) !important;
}

/* =========================================================
 * Heading underline + heading icon roundel
 * ========================================================= */
.heading h1, .heading h2, .heading h3, .heading h4, .heading h5 {
  border-bottom-color: var(--urban-primary) !important;
}
.heading h1 i[class^="fa"],
.heading h2 i[class^="fa"],
.heading h3 i[class^="fa"],
.heading h4 i[class^="fa"],
.heading h5 i[class^="fa"] {
  background: var(--urban-primary) !important;
}

/* .ul-icons bullet circles */
.ul-icons li i {
  background: var(--urban-primary) !important;
}

/* =========================================================
 * Top bar (Universal #top) → Urban dark stone
 * ========================================================= */
#top {
  background: var(--urban-neutral-900) !important;
  color: var(--urban-neutral-100) !important;
  border-bottom: 1px solid var(--urban-neutral-800);
  padding: 12px 0 !important;     /* 上下留白 12px，文字和图标不再贴顶 */
  min-height: 60px;               /* 锁定整体高度，内容稳定居中 */
}

/* 统一把顶栏整行做 FLEX 居中：左右两列的中线永远在同一水平线，
   无论字号 / 图标大小怎么调都不会出现上贴边或错位。
   同时保留 Bootstrap col-* 宽度语义，不破坏响应式栅格。 */
#top > .container > .row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;            /* ⭐ 关键：文字和图标统一上下居中 */
  justify-content: space-between;
  margin: 0;
  min-height: 36px;               /* 与图标的 36px 直径一致 */
}
#top > .container > .row::before,
#top > .container > .row::after {
  display: none;                  /* 关掉 Bootstrap row 伪元素，避免 flex 下多出的间隙 */
}
#top > .container > .row > [class^="col-"] {
  display: flex;
  align-items: center;
  min-height: 36px;
  padding-top: 0;
  padding-bottom: 0;
}

/* --- Left side text column (contact / CTA line) --- */
#top p,
#top .login a {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 16px !important;
  line-height: 1 !important;
  height: auto;
  color: var(--urban-primary-500) !important;   /* 品牌酸橙绿 #98d913 */
  font-weight: 500;
  letter-spacing: 0.02em;
  vertical-align: middle;
}
#top .login a:hover {
  color: var(--urban-primary-300) !important;   /* hover 再提亮一点 */
  text-decoration: none;
}

/* --- Right side social container: 右贴边，与左侧行中线对齐 --- */
#top .social {
  display: flex;
  align-items: center;
  justify-content: flex-end;     /* 整体右贴边 */
  align-content: center;
  float: none !important;
  text-align: right !important;
  gap: 0.875rem;                 /* 图标之间的间距（约14px） */
  margin: 0;
  padding: 0 !important;
  width: 100%;
  min-height: 36px;              /* 锁定高度，图标不会上下飘 */
}

/* --- Individual social icon links: circular chip + centered icon ---
       DEFAULT = each platform's OFFICIAL brand color (background) +
                 white icon glyph inside the circle.
       HOVER   = slightly brighten brand color + tiny float + drop shadow.

       ⚠️ PRIMARY SELECTOR STRATEGY: match by HREF ATTRIBUTE, not by class.
       This completely avoids bugs from:
         · menu .Name being Chinese (phone → 电话 → wrong slug)
         · Hugo server not restarting after adding .Identifier to config
         · ordering / .platform-xxx class injection failures
       Class selectors (.platform-xxx) are kept ONLY as a belt-and-braces fallback.
---------------------------------------------------------------------------- */
#top .social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px !important;
  height: 36px !important;
  line-height: 1;
  border-radius: 50% !important;
  color: #ffffff !important;        /* glyph = always white on brand bg */
  transition:
    transform 0.22s cubic-bezier(.2,.8,.2,1),
    box-shadow 0.22s ease-out,
    filter 0.22s ease-out,
    background-color 0.22s ease-out,
    background-image 0.22s ease-out;
  text-decoration: none !important;
  background: var(--urban-neutral-700) !important;   /* unrecognised icon = gray */
  -webkit-transform: none !important;
          transform: none !important;
}
#top .social a i {
  font-size: 16px !important;        /* unify icon size, overrides fa-2x */
  line-height: 1;
}

/* ===== Contact / utility (HREF prefixes) ===== */
#top .social a[href^="tel:"],
#top .social a.platform-phone           { background: #10b981 !important; }
#top .social a[href^="mailto:"],
#top .social a.platform-email           { background: #ea4335 !important; }

/* ===== Social brands (HREF contains platform domain keyword) ===== */
#top .social a[href*="facebook.com"],
#top .social a[href*="fb.com"],
#top .social a.platform-facebook        { background: #1877F2 !important; }

#top .social a[href*="instagram.com"],
#top .social a.platform-instagram {
  background:
    radial-gradient(circle at 30% 110%,
      #feda75  0%, #fa7e1e 22%,
      #d62976 44%, #962fbf 70%,
      #4f5bd5 100%) !important;
}

#top .social a[href*="linkedin.com"],
#top .social a.platform-linkedin        { background: #0A66C2 !important; }

#top .social a[href*="pinterest.com"],
#top .social a[href*="pin.it"],
#top .social a.platform-pinterest       { background: #E60023 !important; }

#top .social a[href*="quora.com"],
#top .social a.platform-quora           { background: #B92B27 !important; }

#top .social a[href*="tiktok.com"],
#top .social a.platform-tiktok          {
  background: #000000 !important;
  position: relative;
}
#top .social a[href*="tiktok.com"]::after,
#top .social a.platform-tiktok::after {
  content: "";
  position: absolute; inset: 0; border-radius: inherit;
  box-shadow:
    inset -1px -1px 0 rgba(0,242,234,0.55),
    inset  1px  1px 0 rgba(255,0,80,0.55);
  pointer-events: none;
}

#top .social a[href*="vk.com"],
#top .social a[href*="vkontakte"],
#top .social a.platform-vkontakte       { background: #0077FF !important; }

#top .social a[href*="wa.me"],
#top .social a[href*="whatsapp"],
#top .social a.platform-whatsapp        { background: #25D366 !important; }

/* X (Twitter) — match x.com OR twitter.com OR old twitter.co(.uk/.jp etc.) */
#top .social a[href*="x.com"],
#top .social a[href*="twitter.co"],
#top .social a.platform-x-twitter       { background: #000000 !important; }

#top .social a[href*="youtube.com"],
#top .social a[href*="youtu.be"],
#top .social a.platform-youtube         { background: #FF0000 !important; }

/* ===== HOVER state — brand color +10% brightness, gentle pop ===== */
#top .social a:hover {
  color: #ffffff !important;
  -webkit-transform: translateY(-2px) !important;
          transform: translateY(-2px) !important;
  filter: brightness(1.08) saturate(1.1);
  -webkit-box-shadow: 0 6px 18px rgba(0,0,0,0.28);
          box-shadow: 0 6px 18px rgba(0,0,0,0.28);
}
/* Black brands: don't "brighten" to gray — switch to near-black soft rim. */
#top .social a[href*="x.com"]:hover,
#top .social a[href*="twitter.co"]:hover,
#top .social a.platform-x-twitter:hover,
#top .social a[href*="tiktok.com"]:hover,
#top .social a.platform-tiktok:hover   {
  filter: none;
  background: #111111 !important;
}
#top.light {
  background: #fff !important;
  color: var(--urban-neutral-600) !important;
  border-bottom: 1px solid var(--urban-border) !important;
}
#top.light .login a { color: var(--urban-neutral-700) !important; }

/* =========================================================
 * Navbar → light/clean with lime accent (matches source light surfaces)
 * ========================================================= */
.navbar {
  background: #fff !important;
  border-bottom: 1px solid var(--urban-border) !important;
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.04) !important;
          box-shadow: 0 1px 2px rgba(0,0,0,0.04) !important;
}
.navbar ul.nav > li > a {
  color: var(--urban-neutral-700);
  text-decoration: none; /* override default ugly underline in Universal */
  font-weight: 600;
  padding-top: 30px;
  padding-bottom: 30px;
  border-top-width: 4px !important;
}
.navbar ul.nav > li > a:hover {
  color: var(--urban-primary);
  border-top-color: var(--urban-primary) !important;
  background: var(--urban-neutral-50);
}
.navbar ul.nav > li.active > a,
.navbar ul.nav > li.open > a,
.navbar.navbar-light ul.nav > li.active > a,
.navbar.navbar-light ul.nav > li.active > a:hover {
  color: var(--urban-primary-800) !important;
  border-top-color: var(--urban-primary) !important;
  background: #fff !important;
  font-weight: 700;
}

/* Dropdowns */
.dropdown-menu {
  border: 1px solid var(--urban-border);
  border-radius: var(--urban-radius-md);
  -webkit-box-shadow: 0 10px 30px rgba(0,0,0,0.08) !important;
          box-shadow: 0 10px 30px rgba(0,0,0,0.08) !important;
}
.dropdown-menu > li > a {
  color: var(--urban-neutral-700);
  padding: 8px 18px;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
  background: var(--urban-primary-50) !important;
  color: var(--urban-primary-800) !important;
}

/* =========================================================
 * Buttons → lime primary (brand signature from source)
 * ========================================================= */
.btn-template-main,
.btn-template-primary,
.btn-primary,
.banner .btn,
.home-carousel .btn {
  background: var(--urban-primary) !important;
  border-color: var(--urban-primary-700) !important;
  color: var(--urban-primary-foreground) !important;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: var(--urban-radius-md);
  transition: all 0.18s ease-out;
  text-transform: uppercase;
  font-size: 13px;
}
.btn-template-main:hover, .btn-template-main:focus, .btn-template-main:active,
.btn-template-main.active, .open > .dropdown-toggle.btn-template-main,
.btn-template-primary:hover, .btn-primary:hover,
.banner .btn:hover, .home-carousel .btn:hover {
  background: var(--urban-primary-700) !important; /* deep lime hover */
  border-color: var(--urban-primary-800) !important;
  color: #fff !important;
  text-decoration: none;
  -webkit-box-shadow: 0 6px 18px rgba(101,163,13,0.35);
          box-shadow: 0 6px 18px rgba(101,163,13,0.35);
}
.btn-template-main:active,
.btn-template-main.active,
.btn-primary:active,
.btn-primary.active {
  background: var(--urban-primary-800) !important;
  border-color: var(--urban-primary-900) !important;
  -webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,0.18);
          box-shadow: inset 0 2px 4px rgba(0,0,0,0.18);
}
.btn-template-main.disabled, .btn-template-main[disabled],
fieldset[disabled] .btn-template-main,
.btn-primary.disabled, .btn-primary[disabled] {
  background: var(--urban-neutral-300) !important;
  border-color: var(--urban-neutral-400) !important;
  color: #fff !important;
  opacity: 0.7;
  -webkit-box-shadow: none;
          box-shadow: none;
}
.btn-template-main .badge,
.btn-primary .badge {
  background: var(--urban-primary-foreground);
  color: var(--urban-primary);
}

/* Ghost/outline variant — black to lime */
.btn-template-transparent-primary {
  color: var(--urban-primary) !important;
  border-color: var(--urban-primary) !important;
  background: transparent !important;
  border-radius: var(--urban-radius-md);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: 13px;
}
.btn-template-transparent-primary:hover {
  background: var(--urban-primary) !important;
  color: #fff !important;
  border-color: var(--urban-primary-700) !important;
}

.btn-template-transparent-black {
  color: var(--urban-neutral-800) !important;
  border-color: var(--urban-neutral-800) !important;
  background: transparent !important;
  border-radius: var(--urban-radius-md);
  font-weight: 600;
}
.btn-template-transparent-black:hover {
  background: var(--urban-neutral-800) !important;
  color: #fff !important;
  border-color: var(--urban-neutral-900) !important;
}

/* Default btn — tweak to feel modern */
.btn-default {
  border-radius: var(--urban-radius-md);
  color: var(--urban-neutral-700);
  border-color: var(--urban-border);
  background: #fff;
  font-weight: 500;
}
.btn-default:hover {
  background: var(--urban-neutral-50);
  border-color: var(--urban-neutral-300);
  color: var(--urban-neutral-800);
}

/* =========================================================
 * Card surface — white cards with light border (source style)
 * ========================================================= */
.box-simple,
.box-image-text,
.panel.sidebar-menu,
.panel-default,
#blog-listing-medium .post,
#content .content-column,
.see-more,
.testimonials .item .testimonial {
  background: var(--urban-card) !important;
  color: var(--urban-card-foreground) !important;
  border: 1px solid var(--urban-border) !important;
  border-radius: var(--urban-radius-md);
}

/* =========================================================
 * Features (box-simple) — lime icon bubble
 * ========================================================= */
.box-simple {
  padding: 30px 24px;
  -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.04);
          box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}
.box-simple:hover {
  -webkit-transform: translateY(-2px);
          transform: translateY(-2px);
  -webkit-box-shadow: 0 8px 24px rgba(0,0,0,0.08);
          box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}
.box-simple .icon {
  background: var(--urban-primary) !important;
  border-color: var(--urban-primary-700) !important;
  color: #fff !important;
  -webkit-box-shadow: inset 0 -2px 0 rgba(0,0,0,0.08);
          box-shadow: inset 0 -2px 0 rgba(0,0,0,0.08);
}
.box-simple h3 {
  color: var(--urban-foreground);
  font-weight: 700;
}
.box-simple p {
  color: var(--urban-muted-foreground);
  line-height: 1.65;
}

/* box-image-text — banners/category tiles */
.box-image-text .bottom {
  background: #fff;
  border: 1px solid var(--urban-border);
  border-top: 0;
  border-radius: 0 0 var(--urban-radius-md) var(--urban-radius-md);
  padding: 18px 20px 22px;
}
.box-image-text .top {
  border-radius: var(--urban-radius-md) var(--urban-radius-md) 0 0;
  overflow: hidden;
}

/* =========================================================
 * Sidebar panels (widgets: Categories / Tags / Search …)
 * ========================================================= */
.panel.sidebar-menu {
  -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.04);
          box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  overflow: hidden;
}
.panel.sidebar-menu h3,
.panel.sidebar-menu .panel-heading {
  color: var(--urban-foreground);
  background: #fff !important;
  border-bottom: 2px solid var(--urban-primary) !important;  /* lime accent strip */
}
.panel.sidebar-menu .panel-heading h1,
.panel.sidebar-menu .panel-heading h2,
.panel.sidebar-menu .panel-heading h3,
.panel.sidebar-menu .panel-heading h4,
.panel.sidebar-menu .panel-heading h5 {
  color: var(--urban-foreground) !important;
  padding-bottom: 8px;
}
.panel.sidebar-menu .panel-heading .btn.btn-danger {
  background: var(--urban-error);
  border-color: #dc2626;
}
.panel.sidebar-menu ul.nav.category-menu li a,
.panel.sidebar-menu ul.nav ul li a {
  color: var(--urban-neutral-700);
  padding: 10px 14px;
  border-bottom: 1px dashed var(--urban-border);
}
.panel.sidebar-menu ul.nav.category-menu li a:hover,
.panel.sidebar-menu ul.nav.category-menu li a:focus,
.panel.sidebar-menu ul.nav ul li a:hover,
.panel.sidebar-menu ul.nav ul li a:focus {
  background: var(--urban-primary-50) !important;
  color: var(--urban-primary-800) !important;
}

/* Tag cloud — lime chips */
.panel.sidebar-menu ul.tag-cloud li a {
  background: var(--urban-neutral-100);
  border: 1px solid var(--urban-border);
  color: var(--urban-neutral-700);
  border-radius: var(--urban-radius-full);
  padding: 4px 14px;
  font-size: 12px;
  font-weight: 500;
  transition: all 0.18s ease-out;
}
.panel.sidebar-menu ul.tag-cloud li a:hover,
.panel.sidebar-menu ul.tag-cloud li.active a,
.panel.sidebar-menu ul.tag-cloud li.active a:hover {
  background: var(--urban-primary) !important;
  border-color: var(--urban-primary-700) !important;
  color: #fff !important;
  text-decoration: none;
}

/* Recent / popular sidebar list */
.panel.sidebar-menu ul.popular li h5 a,
.panel.sidebar-menu ul.recent li h5 a {
  color: var(--urban-neutral-800);
  font-weight: 600;
}
.panel.sidebar-menu ul.popular li h5 a:hover,
.panel.sidebar-menu ul.recent li h5 a:hover {
  color: var(--urban-primary);
}
.panel.sidebar-menu ul.popular li p.date,
.panel.sidebar-menu ul.recent li p.date {
  color: var(--urban-muted-foreground);
  font-size: 12px;
}
.panel.sidebar-menu .panel-body label:hover {
  color: var(--urban-primary);
}

/* =========================================================
 * Forms + inputs
 * ========================================================= */
.form-control {
  border-color: var(--urban-border);
  border-radius: var(--urban-radius-sm);
  background: var(--urban-input);
  color: var(--urban-foreground);
  -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.03);
          box-shadow: inset 0 1px 2px rgba(0,0,0,0.03);
  font-family: var(--urban-font-body);
}
.form-control:focus {
  border-color: var(--urban-primary) !important;
  outline: 0;
  -webkit-box-shadow: 0 0 0 3px var(--form-shadow) !important;
          box-shadow: 0 0 0 3px var(--form-shadow) !important;
}
.input-group-addon {
  background: var(--urban-neutral-50);
  border-color: var(--urban-border);
  color: var(--urban-neutral-600);
}

/* =========================================================
 * Owl Carousel — dots and nav buttons → lime
 * ========================================================= */
.owl-theme .owl-controls .owl-page span,
.home-carousel .owl-theme .owl-controls .owl-page span {
  background: var(--urban-neutral-300) !important;
  width: 10px; height: 10px; margin: 0 5px;
  border-radius: 50%;
  opacity: 1;
  border: 0;
  transition: all 0.2s ease-out;
}
.owl-theme .owl-controls .owl-page.active span,
.owl-theme .owl-controls.clickable .owl-page:hover span,
.home-carousel .owl-theme .owl-controls .owl-page.active span,
.home-carousel .owl-theme .owl-controls .owl-page:hover span {
  background: var(--urban-primary) !important;
  -webkit-transform: scale(1.2);
          transform: scale(1.2);
}
.owl-theme .owl-controls .owl-buttons div {
  background: var(--urban-neutral-800) !important;
  color: #fff !important;
  border-radius: var(--urban-radius-full);
  padding: 6px 14px !important;
  font-size: 14px;
  opacity: 0.85;
  transition: all 0.18s ease-out;
}
.owl-theme .owl-controls .owl-buttons div:hover {
  background: var(--urban-primary) !important;
  opacity: 1;
}

/* =========================================================
 * Testimonials — lime quote accent
 * ========================================================= */
.testimonials .item .testimonial {
  padding: 28px 28px 24px;
  position: relative;
  -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.04);
          box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.testimonials .item .testimonial:before {
  color: var(--urban-primary-200) !important; /* soft lime quote */
  font-size: 56px;
  opacity: 0.7;
}
.testimonials .item .testimonial .text {
  color: var(--urban-neutral-700);
  line-height: 1.7;
  font-style: normal;
}
.testimonials .item .bottom .name {
  color: var(--urban-foreground);
  font-weight: 700;
}
.testimonials .item .bottom .title {
  color: var(--urban-muted-foreground);
}

/* =========================================================
 * Breadcrumb + Pagination
 * ========================================================= */
.breadcrumb {
  background: var(--urban-neutral-50);
  border: 1px solid var(--urban-border);
  border-radius: var(--urban-radius-md);
}
.breadcrumb > li { color: var(--urban-neutral-600); }
.breadcrumb > li + li:before { color: var(--urban-neutral-400); content: "/\00a0"; }
.breadcrumb > .active { color: var(--urban-neutral-800); }
.breadcrumb a { color: var(--urban-primary); }
.breadcrumb a:hover { color: var(--urban-primary-700); }

.pagination {
  background: var(--urban-neutral-50);
  padding: 10px;
  border-radius: var(--urban-radius-md);
  border: 1px solid var(--urban-border);
  display: inline-block;
}
.pagination > li > a,
.pagination > li > span {
  color: var(--urban-neutral-700);
  background: #fff;
  border: 1px solid var(--urban-border);
  border-radius: var(--urban-radius-sm) !important;
  margin: 0 2px;
  font-weight: 600;
}
.pagination > li > a:hover,
.pagination > li > span:hover,
.pagination > li > a:focus,
.pagination > li > span:focus {
  color: var(--urban-primary-800);
  background: var(--urban-primary-50);
  border-color: var(--urban-primary);
}
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
  background: var(--urban-primary);
  border-color: var(--urban-primary-700);
  color: #fff;
  -webkit-box-shadow: 0 2px 6px rgba(101,163,13,0.3);
          box-shadow: 0 2px 6px rgba(101,163,13,0.3);
}
.pagination > .disabled > span,
.pagination > .disabled > a {
  color: var(--urban-neutral-400) !important;
}

/* =========================================================
 * Badges, Labels, Pills → lime
 * ========================================================= */
.badge {
  background: var(--urban-primary);
  color: #fff;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--urban-radius-full);
}
.label.label-primary,
.label-template-main {
  background: var(--urban-primary) !important;
  color: #fff !important;
}
.label-success { background: var(--urban-success); }
.label-warning { background: var(--urban-warning); }
.label-danger  { background: var(--urban-error); }
.label-info    { background: var(--urban-info); }

.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus {
  background: var(--urban-primary);
  color: #fff;
}
.nav-pills > li > a {
  border-radius: var(--urban-radius-full);
  color: var(--urban-neutral-700);
}
.nav-pills > li > a:hover {
  background: var(--urban-primary-50);
  color: var(--urban-primary-800);
}

.nav-tabs {
  border-bottom-color: var(--urban-border);
}
.nav-tabs > li > a {
  border-radius: var(--urban-radius-md) var(--urban-radius-md) 0 0;
  color: var(--urban-neutral-700);
  border-color: transparent;
  margin-right: 4px;
}
.nav-tabs > li > a:hover {
  border-color: var(--urban-border) var(--urban-border) transparent;
  background: var(--urban-neutral-50);
  color: var(--urban-primary-800);
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  border-color: var(--urban-border) var(--urban-border) #fff;
  color: var(--urban-primary-800);
  font-weight: 700;
}

/* =========================================================
 * Footer — dark stone with lime links (matches source's dark popover feel)
 * ========================================================= */
#footer {
  background: var(--urban-neutral-900) !important;
  color: var(--urban-neutral-300) !important;
  border-top: 4px solid var(--urban-primary);  /* lime signature strip */
  margin-top: 60px;
}
#footer h1, #footer h2, #footer h3, #footer h4 {
  color: #fff !important;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-bottom: 18px;
}
#footer p,
#footer address {
  color: var(--urban-neutral-400);
  line-height: 1.75;
}
#footer a {
  color: var(--urban-primary-300) !important;
  transition: color 0.18s ease-out;
}
#footer a:hover,
#footer a:focus {
  color: var(--urban-primary-100) !important;
  text-decoration: underline;
}
#footer ul.nav-pills > li > a {
  color: var(--urban-neutral-300) !important;
}
#footer ul.nav-pills > li > a:hover {
  background: rgba(255,255,255,0.06);
  color: #fff !important;
}
#footer .blog-thumbnail {
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--urban-radius-sm);
}
#footer #copyright {
  background: var(--urban-neutral-950);
  color: var(--urban-neutral-500);
  border-top: 1px solid rgba(255,255,255,0.06);
  padding: 18px 0;
  margin-top: 30px;
}
#footer #copyright p {
  color: var(--urban-neutral-500);
  margin: 0;
  font-size: 13px;
}
#footer #copyright a {
  color: var(--urban-primary-300) !important;
}
#footer #copyright a:hover {
  color: #fff !important;
}

/* =========================================================
 * Blog listing + content
 * ========================================================= */
#blog-listing-medium .post {
  padding: 0 0 22px;
  margin-bottom: 30px;
  overflow: hidden;
}
#blog-listing-medium .post h2 a {
  color: var(--urban-foreground);
}
#blog-listing-medium .post h2 a:hover {
  color: var(--urban-primary);
}
#blog-listing-medium .post .author-category,
#blog-post .author-date,
#blog-post .comments,
.post-meta {
  color: var(--urban-muted-foreground);
  font-size: 13px;
}
#blog-listing-medium .post .author-category a,
#blog-post .author-date a,
.post-meta a {
  color: var(--urban-primary);
}
#blog-listing-medium .post .intro {
  color: var(--urban-neutral-700);
  line-height: 1.7;
}
#blog-listing-medium .post .clearfix .read-more {
  margin-top: 14px;
}

/* =========================================================
 * Misc — Well, Alert, Progress, Table
 * ========================================================= */
.well {
  background: var(--urban-neutral-50);
  border: 1px solid var(--urban-border);
  border-radius: var(--urban-radius-md);
  -webkit-box-shadow: none;
          box-shadow: none;
}
.alert {
  border-radius: var(--urban-radius-md);
  border: 0;
}
.alert-success { background: var(--urban-success); color: #fff; }
.alert-warning { background: var(--urban-warning); color: #fff; }
.alert-danger  { background: var(--urban-error);   color: #fff; }
.alert-info    { background: var(--urban-info);    color: #fff; }

.progress {
  background: var(--urban-neutral-200);
  border-radius: var(--urban-radius-full);
  -webkit-box-shadow: none;
          box-shadow: none;
  overflow: hidden;
}
.progress-bar {
  background: var(--urban-primary);
  -webkit-box-shadow: none;
          box-shadow: none;
}
.progress-bar-success { background: var(--urban-success); }
.progress-bar-warning { background: var(--urban-warning); }
.progress-bar-danger  { background: var(--urban-error); }
.progress-bar-info    { background: var(--urban-info); }

.table thead > tr > th {
  border-bottom-color: var(--urban-neutral-300);
  color: var(--urban-neutral-800);
}
.table tbody > tr > td {
  border-top-color: var(--urban-border);
  color: var(--urban-neutral-700);
}
.table-hover > tbody > tr:hover > td {
  background: var(--urban-primary-50);
  color: var(--urban-primary-900);
}

/* =========================================================
 * Previous section: Layout helpers preserved from original custom.css
 * ========================================================= */
.box-image-text .image {
  min-height: 150px;
  max-height: 150px;
}
/* ⭐ 卡片封面图: object-fit:cover 填满 150px, 不再因图片比例不同留白 */
.box-image-text.blog .image {
  display: block;
  width: 100%;
  height: 150px;
  min-height: 150px !important;
  max-height: 150px !important;
  overflow: hidden;
}
.box-image-text.blog .image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  display: block;
  max-height: none !important;
}
/* ⭐ 只去掉绿色遮罩层(.bg), 保留悬浮按钮层(.text)
   .top > .bg 是主题默认的 hover 绿色半透明遮罩, 不要;
   .top > .text 是 hover 时图片上出现的 链接按钮, 保留. */
.box-image-text.blog .top > .bg {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  background-color: transparent !important;
  background-image: none !important;
}
/* 悬浮按钮层保留, 但做了一点视觉微调: 位置更居中, 去掉主题默认的偏上定位偏移 */
.box-image-text.blog .top > .text {
  /* 按钮层本身保留: display / opacity 的默认值让 hover 时仍可见,
     这里不写 display:none 了 (上一版写的, 现在放开). */
}
/* 同时清掉 .top 上的主题默认遮罩过渡, 不然某些浏览器会有淡绿残影 */
.box-image-text.blog .top {
  background-image: none !important;
  background-color: transparent !important;
  /* 防止 hover 时 .top 本身有变色遮罩 */
}
/* ⭐ 首页博客卡片(4 张一行)强制统一高度: 标题 2 行, 摘要 3 行截断,
   作者+日期一行, 按钮贴底, 四张卡片完全等高, 不会一长三短. */
.box-image-text.blog {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  height: 100%;     /* ⭐ 靠外层 Bootstrap row+col 的 flex row 拉齐等高.
                        min-height 全部撤掉: 之前 380/395 都是估的最坏情况,
                        当前 4 篇文章都是短标题+短摘要, 实际内容只有 ~330px,
                        多出来的 50 像素全是空白. 现在让行内最高的那张卡片决定高度,
                        其余三张 100% 跟上, 再用 margin-top:auto 贴按钮, 零废白. */
  background-color: #ffffff;
  border: 1px solid rgba(11, 18, 32, 0.06);
  border-radius: var(--urban-radius-md);
  overflow: hidden;
  -webkit-box-shadow: 0 6px 16px rgba(11, 18, 32, 0.05);
          box-shadow: 0 6px 16px rgba(11, 18, 32, 0.05);
  -webkit-transition: -webkit-transform .25s ease, -webkit-box-shadow .25s ease, border-color .25s ease;
  transition: -webkit-transform .25s ease, -webkit-box-shadow .25s ease, border-color .25s ease;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, -webkit-transform .25s ease, -webkit-box-shadow .25s ease;
}
.box-image-text.blog:hover {
  -webkit-transform: translateY(-4px);
      -ms-transform: translateY(-4px);
          transform: translateY(-4px);
  border-color: var(--urban-primary-400);
  -webkit-box-shadow:
    0 14px 32px rgba(152, 217, 19, 0.14),
    0 6px 16px rgba(11, 18, 32, 0.04);
          box-shadow:
    0 14px 32px rgba(152, 217, 19, 0.14),
    0 6px 16px rgba(11, 18, 32, 0.04);
}
.box-image-text.blog .content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  padding: 1rem 1.15rem 1.25rem;
}
.box-image-text.blog .content h4 {
  margin: 0 0 0.55rem 0;
  line-height: 1.4;
  /* ⭐ 标题字号: Material Title Medium 16px/500 + Tailwind text-lg 18px → 折中 17px
        字重: 原 700(太粗) / 500(和正文层级拉不开) → 600 Semi-Bold, Shopify / 电商博客卡片通用值 */
  font-size: 1.0625rem;   /* 17px: 16(Material 标准) 和 18(Tailwind text-lg) 的中间值 */
  font-weight: 600;       /* 600 = Semi-Bold, 比 700 细一级但仍有标题层次, 不会看不清 */
  font-family: var(--urban-font-body);
  letter-spacing: 0.005em;
  /* 标题最多 2 行, 防止长标题撑高卡片 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(1.0625rem * 1.4 * 2);
}
.box-image-text.blog .content h4 a {
  color: #111827;   /* 比 1f2937 稍深, 配合 600 字重阅读更清晰 (符合 WCAG AA 对比度) */
}
.box-image-text.blog .content h4 a:hover {
  color: var(--urban-primary-600);
}
.box-image-text.blog .author-category {
  color: #6b7280;
  /* ⭐ 作者日期: Material Label Medium 12px + Tailwind text-sm 14px → 折中 13px
        Shopify 卡片作者日期实测 12-13px, 我们取上限, 不太小但也不会喧宾夺主 */
  font-size: 0.8125rem;   /* 13px */
  line-height: 1.45;
  font-weight: 400;       /* 和正文一致的字重, 不抢标题视觉 */
  margin: 0 0 0.75rem 0;
  min-height: calc(0.8125rem * 1.45);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.box-image-text.blog .author-category a {
  color: var(--urban-primary-600);
  font-weight: 500;       /* 链接名稍重一级, 更清晰 */
}
.box-image-text.blog .intro {
  color: #374151;
  /* ⭐ 摘要(正文)字号: Nielsen Norman 推荐正文最低 16px, Material Body Medium 14px → 折中 15px
        字重: 之前 500 太粗, 密集小字下糊在一起. 正文标准 400 Regular 才是清晰. */
  font-size: 0.9375rem;   /* 15px: Tailwind text-sm(14) 和 text-base(16) 中间值 */
  line-height: 1.6;
  font-weight: 400;       /* 400 Regular = 正文最通用最清晰字重 */
  margin: 0 0 1rem 0;
  /* 摘要 3 行截断, 保证卡片高度统一 */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(0.9375rem * 1.6 * 3);
}
.box-image-text.blog .read-more {
  margin-top: auto;  /* 把按钮贴底, 让所有卡片按钮在同一条水平线 */
  margin-bottom: 0;
}
.box-image-text.blog .read-more .btn {
  width: 100%;
  border-radius: var(--urban-radius-full);
  padding: 0.55rem 1rem;
  /* ⭐ 按钮字号: 同步抬到 13px (Label Large), 之前 0.82rem≈13.12px, 微调规范一下 */
  font-size: 0.8125rem;   /* 13px */
  letter-spacing: 0.06em;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
}
/* Tablet (sm): 2 张一行. 同样不设 min-height, 靠 height:100% + row 对齐.
   唯一例外: 如果某张卡片换行导致特别高, 也不用人为拔高其他卡片去追它. */
@media (max-width: 991px) {
  .box-image-text.blog {
    /* min-height 彻底移除, 不再估高度 */
  }
}
/* Mobile: 1 张一行, 卡片高度各自内容决定 */
@media (max-width: 767px) {
  .box-image-text.blog {
    height: auto;
  }
  .box-image-text.blog .content h4 {
    min-height: auto;
  }
  .box-image-text.blog .intro {
    min-height: auto;
  }
}

/* ⭐ 首页 "View All Articles / 查看全部文章" 底部按钮.
   和卡片按钮风格一致但更大一号, 有胶囊圆角和箭头. */
.ut-view-all-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.ut-view-all-btn {
  display: -webkit-inline-box !important;
  display: -ms-inline-flexbox !important;
  display: inline-flex !important;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  /* 比卡片按钮大一号 */
  padding: 0.75rem 2rem 0.75rem 2rem !important;
  min-height: 44px;
  min-width: 220px;
  border-radius: 9999px !important;   /* 胶囊圆角 */
  font-size: 0.9375rem !important;    /* 15px */
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  -webkit-transition:
    background-color .2s ease,
    border-color .2s ease,
    color .2s ease,
    -webkit-transform .2s ease,
    -webkit-box-shadow .2s ease;
  transition:
    background-color .2s ease,
    border-color .2s ease,
    color .2s ease,
    -webkit-transform .2s ease,
    -webkit-box-shadow .2s ease;
  transition:
    background-color .2s ease,
    border-color .2s ease,
    color .2s ease,
    transform .2s ease,
    box-shadow .2s ease;
  transition:
    background-color .2s ease,
    border-color .2s ease,
    color .2s ease,
    transform .2s ease,
    box-shadow .2s ease,
    -webkit-transform .2s ease,
    -webkit-box-shadow .2s ease;
}
.ut-view-all-btn:hover {
  -webkit-transform: translateY(-2px);
      -ms-transform: translateY(-2px);
          transform: translateY(-2px);
  -webkit-box-shadow:
    0 10px 22px rgba(152, 217, 19, 0.22),
    0 4px 10px rgba(11, 18, 32, 0.04);
          box-shadow:
    0 10px 22px rgba(152, 217, 19, 0.22),
    0 4px 10px rgba(11, 18, 32, 0.04);
}
/* 移动端: 稍微收窄一点, 避免在小屏按钮太宽 */
@media (max-width: 575px) {
  .ut-view-all-btn {
    width: 100%;
    min-width: 0;
    padding: 0.75rem 1.25rem !important;
    font-size: 0.875rem !important;
  }
  .ut-view-all-wrap {
    margin-top: 2rem !important;
    padding: 0 0.75rem;
  }
}

.box-simple {
  min-height: 230px;
}

/* =========================================================
 * Top bar social — Mobile tuning (no longer hide icons since
 * top-bar language switcher was removed — they all fit on
 * small screens now that there's no EN/ZH pill next to them)
 * ========================================================= */
@media (max-width: 767px) {
  #top .social {
    justify-content: flex-end;     /* 小屏保持右对齐，避免和左侧文字拥挤 */
    padding-left: 0;
    gap: 0.25rem;
  }
  #top .social a {
    width: 30px;
    height: 30px;
  }
  #top .social a i {
    font-size: 14px !important;
  }
}

/* =========================================================
 * Language Switcher - Navbar (globe dropdown, right-most)
 * ========================================================= */
.lang-switcher-nav > a.dropdown-toggle {
  padding-left: 12px;
  padding-right: 12px;
  color: var(--urban-neutral-700) !important;
}
.lang-switcher-nav:hover > a.dropdown-toggle {
  color: var(--urban-primary) !important;
}
.lang-switcher-nav .lang-current {
  margin: 0 2px;
  font-weight: 600;
}
.lang-switcher-nav .lang-dropdown {
  min-width: 210px;
  padding: 6px 0;
  border-radius: var(--urban-radius-md);
  -webkit-box-shadow: 0 10px 30px rgba(0, 0, 0, 0.10);
          box-shadow: 0 10px 30px rgba(0, 0, 0, 0.10);
  border: 1px solid var(--urban-border);
}
.lang-switcher-nav .lang-dropdown > li > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 18px;
  clear: both;
  font-weight: 500;
  line-height: 1.5;
  color: var(--urban-neutral-700);
  white-space: nowrap;
}
.lang-switcher-nav .lang-dropdown > li > a:hover {
  background: var(--urban-primary-50);
  color: var(--urban-primary-800);
}
.lang-switcher-nav .lang-dropdown > li.active > a {
  background: var(--urban-primary-50);
  color: var(--urban-primary-800);
  font-weight: 700;
}
.lang-switcher-nav .lang-code {
  font-family: "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 12px;
  padding: 3px 10px;
  border-radius: var(--urban-radius-full);
  background: var(--urban-neutral-100);
  color: var(--urban-neutral-600);
  letter-spacing: 0.6px;
  min-width: 50px;
  text-align: center;
  border: 1px solid var(--urban-border);
}
.lang-switcher-nav .lang-dropdown > li.active .lang-code {
  background: var(--urban-primary);
  border-color: var(--urban-primary-700);
  color: #fff;
  -webkit-box-shadow: 0 2px 6px rgba(101,163,13,0.3);
          box-shadow: 0 2px 6px rgba(101,163,13,0.3);
}
.lang-switcher-nav .lang-label {
  flex: 1;
  margin-left: 4px;
}
.lang-switcher-nav .lang-check {
  color: var(--urban-primary);
  font-size: 12px;
}
@media (max-width: 767px) {
  .lang-switcher-nav {
    border-top: 1px solid var(--urban-border);
  }
  .lang-switcher-nav > a.dropdown-toggle {
    padding: 12px 16px !important;
  }
}

/* ============================================================
 * Urban Threads — Hero video embedded INSIDE carousel (hero box)
 * Exact visual copy of urban-threads/pages/index.html#L266-L295:
 *   Layer 0 (z=0)  : VD1.mp4 background stretched edge-to-edge
 *   Layer 1 (z=1)  : from-black via-black/60 to-transparent gradient (exact)
 *   Layer 2 (z=20) : sound toggle pill (bottom-right, rounded + backdrop-blur)
 *   Layer 3 (z=30) : original Universal Theme carousel copy + slider + owl nav/dots
 *
 * Old standalone .section-fullscreen-video block is intentionally REMOVED
 * (we no longer want two stacked hero videos on the page).
 * ============================================================ */
.ut-hero-wrapper {
  position: relative;
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  background: #000;
}
/* Layer 0 — video (matches urban-threads hero .absolute.inset-0.z-0 + video) */
.ut-hero-media-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
.ut-hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
  background: #000 center/cover no-repeat;
  opacity: 0.9; /* same as urban-threads hero video class="...opacity-90" */
}
/* Layer 1 — EXACT gradient from Urban Threads:
   bg-gradient-to-r from-black via-black/60 to-transparent */
.ut-hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(
      90deg,
      #000000        0%,
      rgba(0,0,0,0.6) 50%,
      rgba(0,0,0,0)  100%
    );
}
/* Layer 2 — sound toggle pill (urban-threads exact rounded-full capsule)
   用户要求：水平居中，不再贴右下角 → 用 left:50% + translateX(-50%) */
.ut-hero-sound-toggle {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 1.5rem;
  z-index: 20;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1rem;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 9999px;
  background: rgba(0,0,0,0.5);
  color: #ffffff;
  /* Backdrop-blur: same visual as source; fall back to plain dark for old browsers */
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  font-size: 0.75rem;
  line-height: 1;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease, background-color .2s ease, transform .2s ease;
  /* ⚠️ transform 不能再写在 hover 里覆盖 left:50% 的 translateX，
     所以用 will-change + 单独属性（如 opacity/阴影）做 hover 反馈。 */
  will-change: transform;
}
.ut-hero-sound-toggle:hover,
.ut-hero-sound-toggle:focus-visible {
  outline: none;
  border-color: #ffffff;
  background: rgba(0,0,0,0.65);
  color: #ffffff;
  -webkit-transform: translateX(-50%) translateY(-1px);
          transform: translateX(-50%) translateY(-1px);
}
.ut-hero-sound-icon {
  display: inline-flex;
  width: 16px;
  height: 16px;
  align-items: center;
  justify-content: center;
  color: #ffffff;
}
.ut-hero-sound-icon svg {
  width: 16px;
  height: 16px;
}

/* Layer 3 — foreground carousel copy + slider must sit above video + scrim */
.ut-hero-foreground {
  position: relative;
  z-index: 30;
}
/* Make sure original owl nav dots + prev/next also sit above video scrim */
.ut-hero-home-carousel .owl-controls,
.ut-hero-home-carousel .owl-nav,
.ut-hero-home-carousel .owl-pagination,
.ut-hero-home-carousel .owl-prev,
.ut-hero-home-carousel .owl-next,
.ut-hero-home-carousel .homepage.owl-carousel .owl-dots {
  z-index: 40;
}

/* ==============================================================
   ⭐ 用户要求：回退到"模仿别人的排版之前" → 也就是简单的居中布局
   · 不再分 eyebrow / 双行H1 / 双按钮
   · H1 统一酸橙绿（用户最近明确要求）+ 大字号 + PC 再放大
   · copy-col 全宽居中（col-sm-12 text-center）
   · 正文保持白色/85%透明度
   · 不再碰 owl slide 宽度 → 避免"两组内容并排"的 bug
   · 不再改 home-carousel 的 overflow
   · home-carousel 改回主题默认的 overflow:hidden 保持 slide 不漏
   ============================================================== */

/* ⭐ Home Carousel 基础：保持主题默认 overflow:hidden，防止 owl 计算错乱 */
.ut-hero-wrapper .home-carousel.ut-hero-home-carousel {
  position: relative;
  width: 100%;
  min-height: min(56.25vw, calc(100vh - 140px));
  overflow: hidden !important;
  padding-top: 8rem;
  padding-bottom: 8rem;
  background-image: none !important;
  background-color: #000 !important;
}
@media (min-width: 768px) {
  .ut-hero-wrapper .home-carousel.ut-hero-home-carousel {
    padding-top: 12rem;
    padding-bottom: 12rem;
  }
}

/* Hero copy: 单列居中（不左对齐，也不百分比挤宽度） */
.ut-hero-home-carousel .ut-hero-copy-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center !important;
  width: 100% !important;
  max-width: 920px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  float: none !important;
  flex-basis: 100% !important;
  flex-grow: 1 !important;
}

/* H1 — 统一酸橙绿 + 大字号 + PC 再放大 + 防切字 padding
   用户要求：标题加大 → 所有 clamp 上下限整体拉高 */
.ut-hero-home-carousel .ut-hero-copy-col h1,
.ut-hero-home-carousel .ut-hero-copy-col h1.ut-hero-h1,
.ut-hero-home-carousel .ut-hero-copy-col h1:not([class*="ut-hero-h1"]) {
  color: var(--urban-primary-400) !important;   /* 酸橙绿 #b0f626 */
  font-family: var(--urban-font-display) !important;
  font-weight: 400;
  text-transform: uppercase !important;
  font-size: clamp(3rem, 6.4vw, 6rem) !important;
  line-height: 1.02 !important;
  letter-spacing: 0.02em !important;
  margin: 0 0 1.85rem 0 !important;
  padding: 0 0.4em !important;   /* 左右 0.4em 留呼吸空间，防切字 */
  overflow: visible !important;
  text-shadow:
    0 3px 18px rgba(0,0,0,0.5),
    0 0 28px rgba(176,246,38,0.22) !important;
}
.ut-hero-home-carousel .ut-hero-copy-col h2 {
  color: #ffffff !important;
  font-family: var(--urban-font-display) !important;
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(2.1rem, 3.6vw, 3.2rem) !important;
  letter-spacing: 0.02em;
  line-height: 1.1 !important;
  margin: 0 0 1.4rem 0 !important;
  text-shadow: 0 2px 12px rgba(0,0,0,0.4) !important;
}

/* H2 以下正文：白色 85% + 再加大一个档位
   用户要求：文字段落也加大 */
.ut-hero-home-carousel .ut-hero-copy-col p,
.ut-hero-home-carousel .ut-hero-copy-col ul,
.ut-hero-home-carousel .ut-hero-copy-col ol,
.ut-hero-home-carousel .ut-hero-copy-col li,
.ut-hero-home-carousel .ut-hero-copy-col span {
  color: rgba(255,255,255,0.86) !important;
  font-family: var(--urban-font-body) !important;
  font-size: clamp(1.28rem, 2vw, 1.72rem) !important;
  line-height: 1.62 !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
  padding: 0 1.5rem !important;
  text-shadow: 0 2px 8px rgba(0,0,0,0.35) !important;
  overflow: visible !important;
}
.ut-hero-home-carousel .ut-hero-copy-col p {
  max-width: 900px;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: 2.25rem !important;
}
.ut-hero-home-carousel .ut-hero-copy-col a:not(.btn):not(.btn-primary):not(.btn-template-main) {
  color: rgba(255,255,255,0.9) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* PC 端 (≥992px) 专项放大 — H1/段落全部再上一个档位 */
@media (min-width: 992px) {
  .ut-hero-home-carousel .ut-hero-copy-col h1 {
    font-size: clamp(4rem, 8.2vw, 7.4rem) !important;
    letter-spacing: 0.025em !important;
    padding: 0 0.5em !important;
    margin-bottom: 2.1rem !important;
  }
  .ut-hero-home-carousel .ut-hero-copy-col p {
    font-size: clamp(1.38rem, 2.2vw, 1.92rem) !important;
    max-width: 960px;
    margin-bottom: 2.7rem !important;
  }
}
/* Mobile 端 (≤767px) — H1/段落全部再加大一档 */
@media (max-width: 767px) {
  .ut-hero-wrapper .home-carousel.ut-hero-home-carousel {
    padding-top: 6rem;
    padding-bottom: 6rem;
    min-height: 56.25vw;
  }
  .ut-hero-sound-toggle {
    /* ⭐ 移动端仍然水平居中 */
    left: 50%;
    transform: translateX(-50%);
    right: auto;
    bottom: 1rem;
    padding: 0.5rem 0.75rem;
  }
  .ut-hero-home-carousel .ut-hero-copy-col h1 {
    font-size: clamp(2.4rem, 11vw, 3.6rem) !important;
    padding: 0 0.3em !important;
  }
  .ut-hero-home-carousel .ut-hero-copy-col p,
  .ut-hero-home-carousel .ut-hero-copy-col ul,
  .ut-hero-home-carousel .ut-hero-copy-col ol,
  .ut-hero-home-carousel .ut-hero-copy-col li,
  .ut-hero-home-carousel .ut-hero-copy-col span {
    font-size: clamp(1.1rem, 4.6vw, 1.32rem) !important;
    padding: 0 0.5rem !important;
  }
}

/* Legacy btn 保留（但不是必须） */
.ut-hero-home-carousel .ut-hero-copy-col .btn,
.ut-hero-home-carousel .ut-hero-copy-col .btn-primary,
.ut-hero-home-carousel .ut-hero-copy-col .btn-template-main {
  border-color: var(--urban-primary-500) !important;
  background: rgba(152,217,19,0.16) !important;
  color: var(--urban-primary-300) !important;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  font-weight: 600 !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.9rem 2rem !important;
  border-radius: 999px !important;
  font-size: 0.95rem !important;
}
.ut-hero-home-carousel .ut-hero-copy-col .btn:hover,
.ut-hero-home-carousel .ut-hero-copy-col .btn-primary:hover,
.ut-hero-home-carousel .ut-hero-copy-col .btn-template-main:hover {
  background: var(--urban-primary-500) !important;
  color: #0b1220 !important;
  border-color: var(--urban-primary-500) !important;
}

/* Respect reduced-motion users — freeze hero video on poster frame. */
@media (prefers-reduced-motion: reduce) {
  .ut-hero-video {
    animation: none;
    -webkit-animation: none;
    /* HTML autoplay will still request; we simply hide <source>s visually by
       forcing poster via the already-set background (belt-and-braces). */
    background-size: cover !important;
  }
}

/* ============================================================
 * Remove unwanted white backgrounds on text & layout containers
 * (the things you notice as "white rectangles behind words")
 *
 * Strategy:
 *   · Kill useless white BG on HEADINGS / PARAGRAPHS / LIST / LINK
 *     text-level nodes — they should never "paint a white box".
 *   · Kill white BG on Bootstrap 3 layout helpers (.row / [class^="col-"]
 *     / .container / section wrappers) because layout should be transparent.
 *   · Kill white BG on hero-specific elements: .home-carousel .item,
 *     .ut-hero-foreground, owl controls, top navbar.
 *   · Kill white BG on "decorative wrappers": .box .box-header / .box-footer,
 *     .testimonials .item, .customers .item, #heading-breadcrumbs,
 *     #copyright, #footer widget rows.
 *   · PRESERVE the meaningful white cards that SHOULD stay white:
 *     .panel, .product, .widget, .modal-content, input/textarea/select,
 *     table cells, .box body itself (but not its header/footer stripes),
 *     dropdown-menu (must remain readable on hover).
 * ============================================================ */

/* --- 1) Text-level: NEVER have a white bg behind a single heading/paragraph. --- */
h1, h2, h3, h4, h5, h6,
p, li, ul, ol, dl, dt, dd,
blockquote, cite, q,
a, span, label, small, strong, em, b, i, u, s,
figcaption, figure, pre, code,
legend, caption {
  background-color: transparent !important;
  background-image: none !important;
}

/* --- 2) Layout helpers (.row / col-*) are ALWAYS transparent. --- */
.container, .container-fluid,
.row,
[class^="col-"], [class*=" col-"],
[class^="col-"]::before, [class*=" col-"]::before,
[class^="col-"]::after,  [class*=" col-"]::after {
  background-color: transparent !important;
  background-image: none !important;
  -webkit-box-shadow: none !important;
          box-shadow: none !important;
}

/* --- 3) Hero / Carousel (TOP AREA) clear every possible white layer. --- */
.ut-hero-wrapper,
.ut-hero-home-carousel,
.ut-hero-foreground,
.ut-hero-copy-col,
.ut-hero-image-col,
.home-carousel,
.home-carousel .item,
.home-carousel .owl-carousel,
.home-carousel .owl-wrapper,
.home-carousel .owl-wrapper-outer,
.home-carousel .homepage,
.home-carousel .row,
.home-carousel [class^="col-"],
.home-carousel [class*=" col-"],
#intro, #intro .item, #intro .container, #intro .row {
  background-color: transparent !important;
  background-image: none !important;
}
/* Also remove the white circular "owl prev/next buttons" in hero →
   they stick out like a sore thumb on the video scrim. */
.ut-hero-home-carousel .owl-controls .owl-buttons div,
.home-carousel .owl-controls .owl-buttons div {
  background-color: rgba(0, 0, 0, 0.55) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.35);
}
/* Keep active owl-pagination dot "white" (readability) but dot body transparent. */
.ut-hero-home-carousel .owl-theme .owl-controls .owl-page span,
.home-carousel .owl-theme .owl-controls .owl-page span {
  background-color: rgba(255, 255, 255, 0.4) !important;
}
.ut-hero-home-carousel .owl-theme .owl-controls .owl-page.active span,
.home-carousel .owl-theme .owl-controls .owl-page.active span {
  background-color: #ffffff !important;
}

/* --- 4) Navbar: Frosted-glass (liquid-glass) look for BOTH desktop
        #navbar bar AND the .dropdown-menu / lang dropdown.
        Old Universal white backgrounds are removed (see below rule). */

/* 4.1 — NAVBAR MAIN BAR: base frosted state (TOP OF PAGE over Hero video).
         RESTORED to the "v1" frosted glass that user said "第一版就不错":
         16% white tint, 14px blur, 140% saturate. This is the sweet spot
         between "transparent enough to see the Hero" and "clearly frosted
         glass (毛玻璃质感明显)" — not too creamy fog, not too clear plastic. */
#navbar.navbar {
  position: relative;
  background-color: rgba(255, 255, 255, 0.20) !important;
  -webkit-backdrop-filter: saturate(60%) blur(14px);
          backdrop-filter: saturate(60%) blur(14px);
  border: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18) !important;
  -webkit-box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.08) inset,
    0 10px 30px rgba(0, 0, 0, 0.12);
          box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.08) inset,
    0 10px 30px rgba(0, 0, 0, 0.12);
  -webkit-transition:
    background-color 240ms ease,
    -webkit-backdrop-filter 240ms ease,
            backdrop-filter 240ms ease,
    border-color 240ms ease,
    -webkit-box-shadow 240ms ease,
            box-shadow 240ms ease;
          transition:
    background-color 240ms ease,
    -webkit-backdrop-filter 240ms ease,
            backdrop-filter 240ms ease,
    border-color 240ms ease,
    -webkit-box-shadow 240ms ease,
            box-shadow 240ms ease;
}

/* 4.2 — SCROLLED state (>120px).
         USER EXPLICIT REQUIREMENT: when scrolling down over content cards,
         you should be able to “vaguely read the text behind the nav bar”.
         Strategy:
           • Drop background white to ONLY 22% (very see-through) so paragraph
             headlines bleed through clearly.
           • Keep nav foreground BLACK — but add a 0.55px nearly-invisible
             WHITE halo so black letters never vanish over a dark card (for
             example when a dark testimonial or client section scrolls by).
           • Reduce blur from 20px → 14px (“clearer” glass, less creamy
             fog) so individual words behind remain distinguishable.
   ----------------------------------------------------------------------------- */
header.navbar-affixed-top[data-nav-scrolled="true"] #navbar.navbar {
  background-color: rgba(255, 255, 255, 0.22) !important;   /* 22% white = clearly see-through */
  background-image: none !important;
  -webkit-backdrop-filter: saturate(150%) blur(14px);
          backdrop-filter: saturate(150%) blur(14px);
  border-bottom-color: rgba(0, 0, 0, 0.10) !important;
  -webkit-box-shadow:
    0 1px 0 rgba(0, 0, 0, 0.08) inset,
    0 10px 28px rgba(0, 0, 0, 0.14);
          box-shadow:
    0 1px 0 rgba(0, 0, 0, 0.08) inset,
    0 10px 28px rgba(0, 0, 0, 0.14);
  -webkit-transition:
    background-color 240ms ease,
    -webkit-backdrop-filter 240ms ease,
    -webkit-box-shadow 240ms ease,
    border-color 240ms ease;
          transition:
    background-color 240ms ease,
    backdrop-filter 240ms ease,
    box-shadow 240ms ease,
    border-color 240ms ease;
}
/* Scrolled state: nav text = crisp BLACK with an almost-invisible WHITE halo.
   On bright white cards the halo is undetectable. On dark surfaces behind the
   bar the halo lifts black letters just enough to keep them readable — the
   exact “透过导航还能依稀看清” sweet spot. */
header.navbar-affixed-top[data-nav-scrolled="true"] #navbar.navbar ul.nav > li > a,
header.navbar-affixed-top[data-nav-scrolled="true"] .lang-switcher-nav > a.dropdown-toggle {
  color: #0b1220 !important;                              /* scrolled = BLACK foreground */
  -webkit-text-stroke: 0;
  text-shadow:
    0 0.55px 0 rgba(255, 255, 255, 0.52),
    0.55px 0 0 rgba(255, 255, 255, 0.52),
    -0.1px -0.1px 0.8px rgba(255, 255, 255, 0.52) !important;
}
/* Hover / focus / open when scrolled: keep BLACK text, ONLY flip the 5px top
   border to lime (so interaction feels responsive but doesn’t turn nav into
   a rainbow on transparent glass). */
header.navbar-affixed-top[data-nav-scrolled="true"] #navbar.navbar ul.nav > li > a:hover,
header.navbar-affixed-top[data-nav-scrolled="true"] #navbar.navbar ul.nav > li.open > a:hover,
header.navbar-affixed-top[data-nav-scrolled="true"] #navbar.navbar ul.nav > li > a:focus,
header.navbar-affixed-top[data-nav-scrolled="true"] #navbar.navbar ul.nav > li.open > a:focus,
header.navbar-affixed-top[data-nav-scrolled="true"] #navbar.navbar ul.nav > li.open > a,
header.navbar-affixed-top[data-nav-scrolled="true"] .lang-switcher-nav > a.dropdown-toggle:hover,
header.navbar-affixed-top[data-nav-scrolled="true"] .lang-switcher-nav.open > a.dropdown-toggle {
  color: #0b1220 !important;
  border-top-color: var(--urban-primary-700) !important;
  background-color: transparent !important;
}
/* Scrolled active page (“where am I?” indicator): deep lime text + 5px lime
   top border. Halo explicitly OFF so the green reads crisp on any surface. */
header.navbar-affixed-top[data-nav-scrolled="true"] #navbar.navbar ul.nav > li.active > a,
header.navbar-affixed-top[data-nav-scrolled="true"] #navbar.navbar ul.nav > li.active > a:hover {
  color: var(--urban-primary-700) !important;
  border-top-color: var(--urban-primary-700) !important;
  background-color: transparent !important;
  text-shadow: none !important;
}
/* 4.3 — Keep original "no white rectangles behind text" rule; the NEW glassy
         background ONLY lives on #navbar.navbar itself, NEVER on a single <a>. */
.navbar .container,
.navbar .navbar-collapse,
.navbar ul.nav,
.navbar ul.nav > li,
.navbar ul.dropdown-menu li,
.navbar .btn-default,
.navbar .btn-default.navbar-toggle,
.navbar.navbar-light ul.nav > li.active > a,
.navbar.navbar-light ul.nav > li.active > a:hover,
.navbar.navbar-light ul.nav > li.open > a:hover,
.navbar.navbar-light ul.nav > li > a:focus,
.navbar.navbar-light ul.nav > li.open > a:focus {
  background-color: transparent !important;
  background-image: none !important;
}
/* ------------------- USER FINAL RULE (explicit):
   Nav bar links DEFAULT = pure BLACK.
   Nav bar links ON HOVER = acid lime GREEN.
   This applies to BOTH the top (over-Hero) state AND the scrolled state.
   No more white text, no more black-shadow on white, no more text halos —
   clean black letters, clean lime hover. Active state is explicitly BLACK
   per user’s "默认是黑色 鼠标经过是绿色" request.
   ----------------------------------------------------------------------------- */
.navbar ul.nav > li > a,
.navbar.navbar-light ul.nav > li > a,
.lang-switcher-nav > a.dropdown-toggle {
  color: #0b1220 !important;                             /* DEFAULT BLACK */
  -webkit-text-stroke: 0;
  text-shadow: none !important;                          /* no halos, no shadows */
  font-weight: 600;
  letter-spacing: 0.08em;
  -webkit-transition:
    color 160ms ease,
    border-top-color 160ms ease,
    background-color 160ms ease;
          transition:
    color 160ms ease,
    border-top-color 160ms ease,
    background-color 160ms ease;
}
/* HOVER / FOCUS / OPEN (dropdown toggled) → ACID LIME green. */
.navbar ul.nav > li > a:hover,
.navbar ul.nav > li > a:focus,
.navbar ul.nav > li.open > a,
.navbar ul.nav > li.open > a:hover,
.navbar ul.nav > li.open > a:focus,
.navbar.navbar-light ul.nav > li > a:hover,
.navbar.navbar-light ul.nav > li.open > a:hover,
.lang-switcher-nav > a.dropdown-toggle:hover,
.lang-switcher-nav > a.dropdown-toggle:focus,
.lang-switcher-nav.open > a.dropdown-toggle {
  color: var(--urban-primary) !important;                /* HOVER = GREEN */
  border-top-color: var(--urban-primary) !important;
  background-color: transparent !important;
  background-image: none !important;
}
/* Active / current page → PER USER REQUEST stays BLACK (default = black).
   The 5px top border still flips to lime so you still know “where am I”. */
.navbar ul.nav > li.active > a,
.navbar ul.nav > li.active > a:hover,
.navbar ul.nav > li.active > a:focus,
.navbar.navbar-light ul.nav > li.active > a,
.navbar.navbar-light ul.nav > li.active > a:hover,
.navbar.navbar-light ul.nav > li.active > a:focus {
  color: #0b1220 !important;                             /* ACTIVE = BLACK */
  border-top-color: var(--urban-primary) !important;
  background-color: transparent !important;
  background-image: none !important;
  text-decoration: none !important;
  text-shadow: none !important;
}
/* Scrolled state — we want the EXACT same rule (no more black-text with white
   halos, no more hover only flipping the top bar green). User wants a single
   rule: default black, hover green. So we OVERWRITE all the scrolled-specific
   color changes back to the same rule. */
header.navbar-affixed-top[data-nav-scrolled="true"] #navbar.navbar ul.nav > li > a,
header.navbar-affixed-top[data-nav-scrolled="true"] .lang-switcher-nav > a.dropdown-toggle {
  color: #0b1220 !important;
  -webkit-text-stroke: 0;
  text-shadow: none !important;
}
header.navbar-affixed-top[data-nav-scrolled="true"] #navbar.navbar ul.nav > li > a:hover,
header.navbar-affixed-top[data-nav-scrolled="true"] #navbar.navbar ul.nav > li.open > a:hover,
header.navbar-affixed-top[data-nav-scrolled="true"] #navbar.navbar ul.nav > li > a:focus,
header.navbar-affixed-top[data-nav-scrolled="true"] #navbar.navbar ul.nav > li.open > a:focus,
header.navbar-affixed-top[data-nav-scrolled="true"] #navbar.navbar ul.nav > li.open > a,
header.navbar-affixed-top[data-nav-scrolled="true"] .lang-switcher-nav > a.dropdown-toggle:hover,
header.navbar-affixed-top[data-nav-scrolled="true"] .lang-switcher-nav.open > a.dropdown-toggle {
  color: var(--urban-primary) !important;
  border-top-color: var(--urban-primary) !important;
  background-color: transparent !important;
}
header.navbar-affixed-top[data-nav-scrolled="true"] #navbar.navbar ul.nav > li.active > a,
header.navbar-affixed-top[data-nav-scrolled="true"] #navbar.navbar ul.nav > li.active > a:hover {
  color: #0b1220 !important;
  border-top-color: var(--urban-primary) !important;
  background-color: transparent !important;
  text-shadow: none !important;
}
/* Brand logo wrapper stays transparent. */
#navbar.navbar .navbar-brand,
#navbar.navbar .navbar-header {
  background-color: transparent !important;
  background-image: none !important;
}

/* 4.4 — MOBILE navbar-collapse glass drawer (when you tap the hamburger).
         ONE rule per user: DEFAULT BLACK text, HOVER GREEN, no shadow/halo.
         Drawer BG switches per state but foreground color never changes. */
@media (max-width: 767px) {
  #navbar.navbar .navbar-collapse#navigation {
    margin-top: 0.5rem;
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background-color: rgba(0, 0, 0, 0.20) !important;   /* dark glass on Hero */
    -webkit-backdrop-filter: saturate(60%) blur(18px);
            backdrop-filter: saturate(60%) blur(18px);
    -webkit-box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
            box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
  }
  header.navbar-affixed-top[data-nav-scrolled="true"] #navbar.navbar .navbar-collapse#navigation {
    background-color: rgba(255, 255, 255, 0.28) !important;   /* scrolled = thin light glass */
    border-color: rgba(0, 0, 0, 0.08);
    -webkit-backdrop-filter: saturate(150%) blur(14px);
            backdrop-filter: saturate(150%) blur(14px);
  }
  /* MOBILE drawer links: ONE rule. Default BLACK, hover GREEN, NO halo. */
  #navbar.navbar .navbar-collapse#navigation ul.nav > li > a,
  header.navbar-affixed-top[data-nav-scrolled="true"] #navbar.navbar .navbar-collapse#navigation ul.nav > li > a {
    color: #0b1220 !important;
    -webkit-text-stroke: 0;
    text-shadow: none !important;
  }
  #navbar.navbar .navbar-collapse#navigation ul.nav > li > a:hover,
  header.navbar-affixed-top[data-nav-scrolled="true"] #navbar.navbar .navbar-collapse#navigation ul.nav > li > a:hover {
    color: var(--urban-primary) !important;
  }
}

/* 4.5 — DROPDOWN MENUS (Products + Language switcher): ONE color rule —
         DEFAULT BLACK + HOVER acid-lime GREEN. No more white top-of-page /
         black scrolled color flip. Only the glass *background* changes
         between dark-Hero and scrolled states. */
#navbar.navbar ul.dropdown-menu,
.lang-switcher-nav .dropdown-menu,
#navbar.navbar .yamm-fw .dropdown-menu {
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  border-radius: 14px;
  background-color: rgba(0, 0, 0, 0.55) !important;       /* dark glass on Hero */
  background-image: none !important;
  -webkit-backdrop-filter: saturate(60%) blur(18px);
          backdrop-filter: saturate(60%) blur(18px);
  -webkit-box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.08) inset,
    0 22px 48px rgba(0, 0, 0, 0.35);
          box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.08) inset,
    0 22px 48px rgba(0, 0, 0, 0.35);
  padding: 0.5rem !important;
}
/* Scrolled state → thin light frosted (30% white) so card text behind the
   dropdown is vaguely readable. DROPDOWN text color does NOT change. */
header.navbar-affixed-top[data-nav-scrolled="true"] #navbar.navbar ul.dropdown-menu,
header.navbar-affixed-top[data-nav-scrolled="true"] .lang-switcher-nav .dropdown-menu {
  background-color: rgba(255, 255, 255, 0.30) !important;
  border-color: rgba(0, 0, 0, 0.10) !important;
  -webkit-backdrop-filter: saturate(150%) blur(14px);
          backdrop-filter: saturate(150%) blur(14px);
  -webkit-box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.85) inset,
    0 22px 48px rgba(0, 0, 0, 0.18);
          box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.85) inset,
    0 22px 48px rgba(0, 0, 0, 0.18);
}
/* Dividers inside the dropdown. */
#navbar.navbar ul.dropdown-menu li,
#navbar.navbar .yamm-content ul li,
.lang-switcher-nav .dropdown-menu li {
  border-bottom-color: rgba(255, 255, 255, 0.18) !important;
}
#navbar.navbar ul.dropdown-menu li:last-child,
#navbar.navbar .yamm-content ul li:last-child,
.lang-switcher-nav .dropdown-menu li:last-child {
  border-bottom: none !important;
}
/* DROPDOWN items — ONE color rule: BLACK default, acid-lime GREEN on hover.
   This applies to BOTH top-of-page AND scrolled state. No switching. */
#navbar.navbar ul.dropdown-menu li a,
#navbar.navbar .yamm-content ul li a,
.lang-switcher-nav .dropdown-menu li a,
header.navbar-affixed-top[data-nav-scrolled="true"] #navbar.navbar ul.dropdown-menu li a,
header.navbar-affixed-top[data-nav-scrolled="true"] .lang-switcher-nav .dropdown-menu li a {
  color: #0b1220 !important;                              /* DEFAULT BLACK */
  -webkit-text-stroke: 0;
  text-shadow: none !important;
  border-radius: 8px;
  padding: 0.5rem 0.875rem !important;
  margin: 0 0.125rem;
  font-weight: 500;
  letter-spacing: 0.06em;
}
#navbar.navbar ul.dropdown-menu li a:hover,
#navbar.navbar .yamm-content ul li a:hover,
.lang-switcher-nav .dropdown-menu li a:hover,
#navbar.navbar ul.dropdown-menu li a:focus,
.lang-switcher-nav .dropdown-menu li a:focus,
header.navbar-affixed-top[data-nav-scrolled="true"] #navbar.navbar ul.dropdown-menu li a:hover,
header.navbar-affixed-top[data-nav-scrolled="true"] .lang-switcher-nav .dropdown-menu li a:hover,
header.navbar-affixed-top[data-nav-scrolled="true"] #navbar.navbar ul.dropdown-menu li a:focus,
header.navbar-affixed-top[data-nav-scrolled="true"] .lang-switcher-nav .dropdown-menu li a:focus {
  background-color: rgba(152, 217, 19, 0.12) !important;   /* light lime-tint highlight */
  background-image: none !important;
  color: var(--urban-primary) !important;                  /* HOVER = GREEN */
  text-shadow: none !important;
  left: 0 !important;
}
/* ================================================================
 * Language Switcher Dropdown — 只改颜色：选中全绿 / 未选中全白
 *   - 不碰其他布局，不加任何额外效果
 * ================================================================ */
/* 未选中的每一项：全白 */
.lang-switcher-nav .dropdown-menu li a,
.lang-switcher-nav .dropdown-menu li a .lang-code,
.lang-switcher-nav .dropdown-menu li a .lang-label,
header.navbar-affixed-top[data-nav-scrolled="true"] .lang-switcher-nav .dropdown-menu li a,
header.navbar-affixed-top[data-nav-scrolled="true"] .lang-switcher-nav .dropdown-menu li a .lang-code,
header.navbar-affixed-top[data-nav-scrolled="true"] .lang-switcher-nav .dropdown-menu li a .lang-label {
  color: #ffffff !important;
}
/* 未选中 hover：保持全白，给点淡绿背景提示即可 */
.lang-switcher-nav .dropdown-menu li a:hover,
.lang-switcher-nav .dropdown-menu li a:focus,
header.navbar-affixed-top[data-nav-scrolled="true"] .lang-switcher-nav .dropdown-menu li a:hover,
header.navbar-affixed-top[data-nav-scrolled="true"] .lang-switcher-nav .dropdown-menu li a:focus {
  background-color: rgba(176, 246, 38, 0.08) !important;
  color: #ffffff !important;
}
/* 选中（active）：整行文字全酸橙绿 */
.lang-switcher-nav .dropdown-menu li.active a,
.lang-switcher-nav .dropdown-menu li.active a .lang-code,
.lang-switcher-nav .dropdown-menu li.active a .lang-label,
.lang-switcher-nav .dropdown-menu li.active a .lang-check,
header.navbar-affixed-top[data-nav-scrolled="true"] .lang-switcher-nav .dropdown-menu li.active a,
header.navbar-affixed-top[data-nav-scrolled="true"] .lang-switcher-nav .dropdown-menu li.active a .lang-code,
header.navbar-affixed-top[data-nav-scrolled="true"] .lang-switcher-nav .dropdown-menu li.active a .lang-label,
header.navbar-affixed-top[data-nav-scrolled="true"] .lang-switcher-nav .dropdown-menu li.active a .lang-check {
  color: var(--urban-primary-400) !important;    /* 酸橙绿 #b0f626 */
  background-color: rgba(176, 246, 38, 0.10) !important;
}
/* Yamm mega-menu headings: same ONE-rule BLACK → GREEN on hover. */
#navbar.navbar .yamm-content h3,
#navbar.navbar .yamm-content h5,
header.navbar-affixed-top[data-nav-scrolled="true"] #navbar.navbar .yamm-content h3,
header.navbar-affixed-top[data-nav-scrolled="true"] #navbar.navbar .yamm-content h5 {
  border-bottom-color: rgba(255, 255, 255, 0.18) !important;
  color: #0b1220 !important;
  -webkit-text-stroke: 0;
  text-shadow: none !important;
}
header.navbar-affixed-top[data-nav-scrolled="true"] #navbar.navbar .yamm-content h3,
header.navbar-affixed-top[data-nav-scrolled="true"] #navbar.navbar .yamm-content h5 {
  border-bottom-color: rgba(0, 0, 0, 0.12) !important;
}
/* Old dropdown-menu default BG override — stays transparent behind our glass. */
.dropdown-menu {
  background-color: transparent !important;
  background-image: none !important;
}

/* --- 5) Buttons: kill the hollow "white pill on dark scrim" look of the
      Universal theme. Preserve ONLY brand-primary filled buttons. --- */
.btn-template-main,
.btn-template-transparent-primary,
.btn-template-transparent-black,
.btn-default {
  background-color: transparent !important;
  background-image: none !important;
}
/* ⭐ 修复: 透明底按钮 + 白背景 = 白字看不见.
   全局默认把 .btn-template-main 的主色改成深灰黑 (绿边黑字),
   只有在深色/黑底/轮播背景下才单独切回白字. */
.btn-template-main {
  color: #0b1220 !important;                /* 深黑字 (默认: 卡片/页面白背景上) */
  border-color: var(--urban-primary-500) !important;   /* 酸橙绿边 */
}
.btn-template-main:hover,
.btn-template-main:focus,
.btn-template-main:active {
  color: #0b1220 !important;
  border-color: var(--urban-primary-600) !important;
  background-color: rgba(176, 246, 38, 0.12) !important;  /* hover: 淡绿底 */
}
/* Keep btn-template-primary FILLED (it IS the call-to-action). */
.btn-template-primary {
  background-color: var(--urban-primary) !important;
  border-color: var(--urban-primary) !important;
  color: #ffffff !important;
}

/* --- 6) Content stripes — kill .box .box-header / .box-footer gray-white bars. --- */
.box,
.box .box-header,
.box .box-footer,
#heading-breadcrumbs,
.bar.background-white,
.bar.background-gray,
.see-more {
  background-color: var(--urban-background) !important;
  background-image: none !important;
}
/* .panel.sidebar-menu stays white (it IS a side card, it needs contrast). */
.panel.sidebar-menu {
  background-color: var(--urban-card) !important;
}

/* --- 7) Testimonials / Clients / Products strip useless white wrappers. --- */
.testimonials .item,
.customers .item,
.product,
.product .text,
.product .image,
.product .buttons {
  background-color: var(--urban-card) !important;
}
.product .buttons {
  background-color: rgba(245, 245, 244, 0.92) !important; /* urban-background tint */
}
.product:hover .buttons {
  background-color: rgba(245, 245, 244, 0.6) !important;
}

/* --- 8) FOOTER & COPYRIGHT (BOTTOM AREA) — no white stripes. --- */
#footer,
#footer .row,
#footer [class^="col-"],
#footer [class*=" col-"],
#footer .panel,
#footer .panel-body,
#footer .widget,
#footer ul,
#footer h1, #footer h2, #footer h3, #footer h4, #footer h5,
#copyright,
#copyright .row,
#copyright [class^="col-"],
#copyright [class*=" col-"] {
  background-color: transparent !important;
  background-image: none !important;
}
/* The theme ships a "footer on dark" background; keep dark, just ensure NO
   accidental white text boxes rendered on top of it. */
#footer .panel.sidebar-menu {
  background-color: transparent !important;
  border: none !important;
  -webkit-box-shadow: none !important;
          box-shadow: none !important;
}
#footer .panel.sidebar-menu .panel-heading {
  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
  background: transparent !important;
}

/* --- 9) Forms / inputs / tables — KEEP white, they need readability. --- */
/* (Intentionally left empty — we don't override these.) */

/* --- 10) Final safety sweep: if any element still ends up with a #fff bg
         ONLY because of an inline "style='background:#fff'" override via
         old Hugo Universal data files, we clear those on known wrappers. --- */
[style*="background: #fff"],
[style*="background:#fff"],
[style*="background-color: #fff"],
[style*="background-color:#fff"] {
  /* no-op: we don't !important remove user-written inline styles, but the
     classes above cover the theme sources; this anchor exists for future
     surgical fixes once you screenshot the exact box. */
}

/* ============================================================
 * Clients / Partners — CSS 双轨无限滚动 (方向: 从左慢慢往右移)
 * 与 testimonials 同款技术: range 两次 → 30 张卡, translateX(50%) 跑一周期
 * ============================================================ */
.ut-clients-section {
  background-color: var(--urban-background) !important;
}
.ut-clients-stage {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 1.5rem 0 0.75rem;
  /* ⭐ 两边渐隐 mask, 卡片出场/入场不生硬裁切 */
  -webkit-mask-image: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(8%, #000), color-stop(92%, #000), to(transparent));
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
          mask-image: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(8%, #000), color-stop(92%, #000), to(transparent));
          mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-user-select: none;
          user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.ut-clients-track {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  -ms-flex-line-pack: center;
      align-content: center;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  gap: 1.1rem;
  width: -webkit-max-content;
  width: max-content;
  will-change: transform;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
  /* ⭐ 动画: 从左慢慢往右侧移动 (translateX(-50%) 是往左, 所以要相反写 translateX(0) → translateX(+50%)?
        不: 我们把内容复制两份(15+15), 视觉长度 = 2×.
        要往"右"移动: 起点 -50% (显示后半部分), 慢慢移到 0 (显示前半部分),
        这样在屏幕上看就是从左向右滑, 循环回到 -50% 的时候前后完美衔接. */
  -webkit-animation: utClientsScrollRight 55s linear infinite;
          animation: utClientsScrollRight 55s linear infinite;
}
@-webkit-keyframes utClientsScrollRight {
  from { -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); }
  to   { -webkit-transform: translate3d(0,    0, 0); transform: translate3d(0,    0, 0); }
}
@keyframes utClientsScrollRight {
  from { -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); }
  to   { -webkit-transform: translate3d(0,    0, 0); transform: translate3d(0,    0, 0); }
}
/* 鼠标 hover 暂停, 方便客户看清某张卡片 */
.ut-clients-stage:hover .ut-clients-track,
.ut-clients-stage:focus-within .ut-clients-track {
  -webkit-animation-play-state: paused !important;
          animation-play-state: paused !important;
}
/* 系统减少动画用户, 静止不滚动 */
@media (prefers-reduced-motion: reduce) {
  .ut-clients-track {
    -webkit-animation: none !important;
            animation: none !important;
  }
}

/* === 单张卡片样式 === */
.ut-client-card {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: 15.5rem;    /* PC: 一屏能看到约 6-7 张 */
  min-width: 0;
}
.ut-client-card-link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  gap: 0.75rem;
  width: 100%;
  height: 100%;
  padding: 1.1rem 1rem 1rem;
  background-color: var(--urban-card, #ffffff);
  border: 1px solid rgba(11, 18, 32, 0.06);
  border-radius: var(--urban-radius-md, 0.75rem);
  -webkit-box-shadow: 0 6px 16px rgba(11, 18, 32, 0.04);
          box-shadow: 0 6px 16px rgba(11, 18, 32, 0.04);
  color: inherit;
  text-decoration: none !important;
  cursor: pointer;
  -webkit-transition: -webkit-transform .25s ease, -webkit-box-shadow .25s ease, border-color .25s ease;
  transition: -webkit-transform .25s ease, -webkit-box-shadow .25s ease, border-color .25s ease;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, -webkit-transform .25s ease, -webkit-box-shadow .25s ease;
}
.ut-client-card-link:hover {
  -webkit-transform: translateY(-3px);
      -ms-transform: translateY(-3px);
          transform: translateY(-3px);
  border-color: var(--urban-primary-400, #98d913);
  -webkit-box-shadow:
    0 10px 24px rgba(152, 217, 19, 0.16),
    0 6px 14px rgba(11, 18, 32, 0.04);
          box-shadow:
    0 10px 24px rgba(152, 217, 19, 0.16),
    0 6px 14px rgba(11, 18, 32, 0.04);
}
.ut-client-logo-wrap {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: 100%;
  height: 5.5rem;            /* 88px: 更大的 logo 容器, SVG 彩色 logo 不会挤 */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  border-radius: var(--urban-radius-sm, 0.5rem);
  background-color: #ffffff;   /* 白底, 让 SVG 彩色渐变 logo 直接露出, 不会被灰底吃掉 */
  border: 1px solid rgba(11, 18, 32, 0.05);
  overflow: hidden;
  position: relative;         /* 为 ::before 兜底首字母徽标定位 */
  isolation: isolate;
}
.ut-client-logo-img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;       /* 改用 cover + 适当 padding, SVG 渐变占满盒子看起来更大气 */
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  display: block;
  /* 默认不做灰度滤镜: 生成的 SVG 本身是彩色品牌色, 去灰会显得没生气
     如果想要"默认灰 hover 彩"把下面 filter 注释放开即可 */
  /* -webkit-filter: grayscale(0.15);
          filter: grayscale(0.15);
          transition: filter .25s ease; */
}
/* 如果未来想要 hover 变彩, 这里开:
.ut-client-card-link:hover .ut-client-logo-img { filter: grayscale(0); } */

/* ⭐ 兜底层: 图片 onerror 后隐藏自己, 容器 ::before 读 data-monogram 画首字母徽标
   这样即使用户忘放图 / 放错路径, 也绝对不会出现破图图标, 永远是好看的 logo */
.ut-client-logo-wrap::before {
  content: attr(data-monogram);
  position: absolute;
  inset: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-family: var(--urban-font-display, Anton, sans-serif);
  font-size: 2rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  color: var(--urban-primary-500, #98d913);
  background: -webkit-gradient(linear, left top, right top, from(rgba(152,217,19,0.08)),to(rgba(176,246,38,0.18)));
  background: linear-gradient(90deg, rgba(152,217,19,0.08), rgba(176,246,38,0.18));
  z-index: 0;
  opacity: 0;             /* 默认隐藏: 有正常图片时不显示 */
  pointer-events: none;
  -webkit-transition: opacity .2s ease;
  transition: opacity .2s ease;
}
/* img 报错隐藏后, 让 ::before 出来接管 */
.ut-client-logo-wrap:has(> img.ut-logo-error)::before,
.ut-client-logo-wrap > img.ut-logo-error + ::before,
.ut-client-logo-wrap.ut-logo-fallback::before {
  opacity: 1 !important;
  z-index: 2;
}
/* 如果图片藏起来了（error），把 ::before 顶到可见（有些浏览器 :has 不支持就用第二条兜底） */
.ut-client-logo-wrap img.ut-client-logo-img[style*="display: none"] {
  /* img 自己已隐藏，此处再提高一个保险级别（实际隐藏逻辑在 onerror） */
}
@supports not selector(:has(*)) {
  /* 老浏览器 fallback: 如果 img 的 clientWidth 为 0 很难纯 CSS 检测,
     这里保留一个极淡的首字母水印, 永远不会出现"完全空的盒子" */
  .ut-client-logo-wrap::after {
    content: attr(data-monogram);
    position: absolute;
    right: 0.5rem;
    bottom: 0.35rem;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    color: rgba(11,18,32,0.14);
    z-index: 1;
    pointer-events: none;
  }
}

/* 如果没有 logo 图片 (没 image 字段), 直接用 .ut-client-logo-text 接管 */
.ut-client-logo-wrap > .ut-client-logo-text {
  position: relative;
  z-index: 3;
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background: -webkit-gradient(linear, left top, right top, from(rgba(152,217,19,0.08)),to(rgba(176,246,38,0.18)));
  background: linear-gradient(90deg, rgba(152,217,19,0.08), rgba(176,246,38,0.18));
  font-family: var(--urban-font-display, Anton, sans-serif);
  font-size: 2.1rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  color: var(--urban-primary-500, #98d913);
  text-transform: uppercase;
}
.ut-client-meta {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.25rem;
  text-align: center;
}
.ut-client-name {
  display: block;
  width: 100%;
  font-size: 0.875rem;   /* 14px */
  font-weight: 600;       /* Semi-Bold, 品牌名清晰 */
  line-height: 1.35;
  letter-spacing: 0.005em;
  color: #111827;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ut-client-tag {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0.15rem 0.65rem;
  border-radius: 9999px;
  background-color: rgba(152, 217, 19, 0.12);
  color: var(--urban-primary-700, #5a850b);
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* === 响应式: 不同屏宽卡片尺寸 + 动画时长调整 === */
@media (max-width: 1199px) {
  .ut-client-card           { width: 13.5rem; }
  .ut-clients-track         { -webkit-animation-duration: 60s; animation-duration: 60s; }
}
@media (max-width: 991px) {
  .ut-client-card           { width: 12rem; }
  .ut-clients-track         { -webkit-animation-duration: 65s; animation-duration: 65s; }
  .ut-client-logo-wrap      { height: 4rem; }
  .ut-client-logo-text      { font-size: 1.5rem; }
}
@media (max-width: 767px) {
  .ut-clients-stage         { padding: 1rem 0 0.5rem; }
  .ut-client-card           { width: 80vw; max-width: 20rem; }   /* 手机: 1.2 张可见, 提示可滚动 */
  .ut-clients-track         { -webkit-animation-duration: 70s; animation-duration: 70s; }
  .ut-client-logo-wrap      { height: 3.75rem; }
  .ut-client-name           { font-size: 0.9375rem; }            /* 手机稍微加大, 好读 */
  .ut-client-tag            { font-size: 0.7rem; }
}

/* ============================================================
 * Hero sound-hint toast — one-time notice shown ONLY when the
 * browser BLOCKED unmuted autoplay. Otherwise stays hidden.
 * ============================================================ */
.ut-hero-sound-hint {
  position: absolute;
  left: 50%;
  bottom: 1rem;
  z-index: 25;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  max-width: min(640px, calc(100% - 2rem));
  padding: 0.75rem 1rem;
  border-radius: 0.875rem;
  background: rgba(0, 0, 0, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #ffffff;
  font-family: var(--urban-font-body);
  font-size: 0.8125rem;
  line-height: 1.45;
  letter-spacing: 0.01em;
  text-align: left;
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  -webkit-box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
          box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  pointer-events: none; /* hint is read-only, user clicks the real pill */
}
.ut-hero-sound-hint__text {
  display: block;
}
@media (max-width: 767px) {
  .ut-hero-sound-hint {
    bottom: 4.25rem; /* avoid overlap with bottom-right sound pill on mobile */
    padding: 0.625rem 0.875rem;
    font-size: 0.75rem;
    border-radius: 0.75rem;
  }
}

/* ============================================================
 * Testimonials Marquee — 15 cards duplicated, slow infinite left-scroll
 *   Stage: overflow hidden + side fade mask
 *   Track: 2x identical flex row, translateX(-50%) => seamless loop
 *   Hover / focus-within: pause animation
 * ============================================================ */
.ut-testimonials-stage {
  position: relative;
  width: 100%;
  overflow: hidden;
  /* 左右渐隐遮罩, 不要让卡片"硬切"出视野 */
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 5%,
    #000 95%,
    transparent 100%
  );
          mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 5%,
    #000 95%,
    transparent 100%
  );
  padding: 0.25rem 0 0.75rem;   /* 上下给 shadow 和卡片呼吸空间 */
  -webkit-user-select: none;
          user-select: none;
}
.ut-testimonials-track {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  gap: 1.5rem;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  /* 慢速 55s 循环, linear 匀速, infinite 无限循环 */
  -webkit-animation: utTestimonialsScroll 55s linear infinite;
          animation: utTestimonialsScroll 55s linear infinite;
  will-change: transform;
}
/* ⭐ 鼠标 hover 或用户键盘 focus 到里面时, 暂停滚动 */
.ut-testimonials-stage:hover .ut-testimonials-track,
.ut-testimonials-stage:focus-within .ut-testimonials-track {
  -webkit-animation-play-state: paused !important;
          animation-play-state: paused !important;
}
/* 尊重 reduced-motion 用户偏好, 不滚 */
@media (prefers-reduced-motion: reduce) {
  .ut-testimonials-track {
    -webkit-animation: none !important;
            animation: none !important;
  }
}
@-webkit-keyframes utTestimonialsScroll {
  0%   { -webkit-transform: translateX(0); transform: translateX(0); }
  100% { -webkit-transform: translateX(-50%); transform: translateX(-50%); }
}
@keyframes utTestimonialsScroll {
  0%   { -webkit-transform: translateX(0); transform: translateX(0); }
  100% { -webkit-transform: translateX(-50%); transform: translateX(-50%); }
}

/* ------ 单张 testimonial 卡片样式 ------ */
.ut-testimonial-card {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 22rem;
          flex: 0 0 22rem;     /* 固定宽度: PC 一行约 4.5 张可见, 左右衔接自然 */
  max-width: 22rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  background-color: #ffffff;
  background-image: linear-gradient(
    180deg,
    #ffffff 0%,
    #ffffff 78%,
    rgba(176, 246, 38, 0.05) 100%
  );
  border: 1px solid rgba(11, 18, 32, 0.08);
  border-radius: 1rem;
  padding: 1.5rem 1.5rem 1.25rem;
  -webkit-box-shadow:
    0 1px 0 rgba(255,255,255,0.9) inset,
    0 10px 28px rgba(11, 18, 32, 0.08);
          box-shadow:
    0 1px 0 rgba(255,255,255,0.9) inset,
    0 10px 28px rgba(11, 18, 32, 0.08);
  gap: 0.75rem;
  -webkit-transition: -webkit-transform .25s ease, -webkit-box-shadow .25s ease, border-color .25s ease;
  transition: -webkit-transform .25s ease, -webkit-box-shadow .25s ease, border-color .25s ease;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, -webkit-transform .25s ease, -webkit-box-shadow .25s ease;
}
.ut-testimonial-card:hover {
  -webkit-transform: translateY(-4px);
      -ms-transform: translateY(-4px);
          transform: translateY(-4px);
  border-color: var(--urban-primary-400);
  -webkit-box-shadow:
    0 1px 0 rgba(255,255,255,0.9) inset,
    0 18px 40px rgba(152, 217, 19, 0.18);
          box-shadow:
    0 1px 0 rgba(255,255,255,0.9) inset,
    0 18px 40px rgba(152, 217, 19, 0.18);
}
/* 顶部 5 颗酸橙绿星星 */
.ut-testimonial-stars {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0.18rem;
  color: var(--urban-primary-500);
  font-size: 0.8rem;
  line-height: 1;
}
.ut-testimonial-stars .fa-star { color: inherit; }
/* 正文 */
.ut-testimonial-text p {
  color: #2a2f3a;
  font-family: var(--urban-font-body);
  font-size: 0.95rem;
  line-height: 1.65;
  font-weight: 500;
  letter-spacing: 0.01em;
  margin: 0;
  /* 最多显示 5 行, 防止某一条写太长把卡片顶得特别高 */
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* 底部: 头像 + 姓名职位 + 引号图标 */
.ut-testimonial-bottom {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.75rem;
  margin-top: auto;        /* 推到底, 不同长度的正文时视觉底部对齐 */
  padding-top: 0.5rem;
  border-top: 1px solid rgba(11, 18, 32, 0.06);
}
.ut-testimonial-avatar {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 42px;
          flex: 0 0 42px;
  width: 42px;
  height: 42px;
  border-radius: 9999px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-family: var(--urban-font-body);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #ffffff;
  text-transform: uppercase;
  border: 2px solid rgba(255, 255, 255, 0.7);
  -webkit-box-shadow: 0 2px 6px rgba(11,18,32,0.15);
          box-shadow: 0 2px 6px rgba(11,18,32,0.15);
  -webkit-user-select: none;
          user-select: none;
}
/* 5 种渐变背景色, 按 :nth-child(5n+x) 循环.
   15 条评价 ÷ 5 色 = 每色 3 条, 双轨复制后 30 条也按 5n 循环,
   所以第 16 条(=第 1 条的复制)颜色和第 1 条完全一致, 无缝衔接不跳色. */
.ut-testimonial-card:nth-child(5n+1) .ut-testimonial-avatar {
  background: linear-gradient(135deg, #98d913, #77b009);   /* 品牌酸橙绿 */
}
.ut-testimonial-card:nth-child(5n+2) .ut-testimonial-avatar {
  background: linear-gradient(135deg, #1e3a5f, #2c5282);   /* 深海军蓝 */
}
.ut-testimonial-card:nth-child(5n+3) .ut-testimonial-avatar {
  background: linear-gradient(135deg, #553c9b, #6b46c1);   /* 深紫 */
}
.ut-testimonial-card:nth-child(5n+4) .ut-testimonial-avatar {
  background: linear-gradient(135deg, #744210, #975a16);   /* 琥珀棕 */
}
.ut-testimonial-card:nth-child(5n+5) .ut-testimonial-avatar {
  background: linear-gradient(135deg, #0b1220, #2d3748);   /* 深蓝黑 */
}
.ut-testimonial-who { min-width: 0; }
.ut-testimonial-name {
  color: #0b1220;
  font-family: var(--urban-font-body);
  font-size: 0.92rem;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin: 0 0 0.1rem 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ut-testimonial-position {
  color: #6b7280;
  font-family: var(--urban-font-body);
  font-size: 0.75rem;
  line-height: 1.4;
  font-weight: 500;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 右侧引号小图标, 给点绿 */
.ut-testimonial-quote {
  margin-left: auto;
  color: var(--urban-primary-400);
  opacity: 0.85;
  font-size: 0.9rem;
  line-height: 1;
}

/* ------ 响应式: 随屏幕宽度调整单卡宽度, 让可见张数更自然 ------ */
/* ≥1200px: 保持默认 22rem, 可见 ~4.5 张左右 */
@media (max-width: 1199px) {
  .ut-testimonial-card {
    -ms-flex-preferred-size: 20rem;
        flex-basis: 20rem;
    max-width: 20rem;
  }
}
/* Tablet: 992-768 → 单卡更窄, 可见 ~3 张 */
@media (max-width: 991px) {
  .ut-testimonials-track { gap: 1.15rem; }
  .ut-testimonial-card {
    -ms-flex-preferred-size: 19rem;
        flex-basis: 19rem;
    max-width: 19rem;
    padding: 1.25rem 1.25rem 1rem;
  }
  .ut-testimonial-text p { -webkit-line-clamp: 4; }
  /* 慢一点, 小屏宽度短了速度会感觉更快 */
  .ut-testimonials-track {
    -webkit-animation-duration: 65s;
            animation-duration: 65s;
  }
}
/* Mobile: ≤767px 单卡几乎满屏, 可见 1.2 张, 引导左右看 */
@media (max-width: 767px) {
  .ut-testimonials-track { gap: 0.9rem; -webkit-animation-duration: 70s; animation-duration: 70s; }
  .ut-testimonial-card {
    -ms-flex-preferred-size: 80vw;
        flex-basis: 80vw;
    max-width: 80vw;
    padding: 1.15rem 1.1rem 0.95rem;
    border-radius: 0.9rem;
  }
  .ut-testimonial-text p {
    font-size: 0.9rem;
    line-height: 1.6;
    -webkit-line-clamp: 4;
  }
  .ut-testimonial-avatar { width: 38px; height: 38px; -ms-flex-preferred-size: 38px; flex-basis: 38px; font-size: 0.72rem; }
  .ut-testimonial-name { font-size: 0.88rem; }
  .ut-testimonial-position { font-size: 0.72rem; }
  /* 手机上左右渐隐少一点, 让用户更容易看清卡片边缘 */
  .ut-testimonials-stage {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 1.5%, #000 98.5%, transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 1.5%, #000 98.5%, transparent 100%);
  }
}



/* =========================================================
 * Products list page (layouts/products/list.html)
 * Matches Urban palette tokens declared at :root
 * ========================================================= */
.ut-products-intro {
  color: var(--urban-muted-foreground);
  text-align: center;
  margin: 2.5rem auto 1.25rem;
  max-width: 46rem;
  font-size: 1.05rem;
  line-height: 1.7;
}
.ut-products-grid {
  margin-top: 1rem;
  margin-bottom: 2.5rem;
}
.ut-products-grid > [class*="col-"] {
  display: flex;
}
.ut-product-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-bottom: 2rem;
  background: var(--urban-card);
  border: 1px solid var(--urban-border);
  border-radius: var(--urban-radius-lg);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.06);
  transition: box-shadow 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
}
.ut-product-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--urban-shadow-float);
  border-color: var(--urban-primary-300);
}
.ut-product-media {
  display: block;
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--urban-neutral-100);
}
.ut-product-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.ut-product-card:hover .ut-product-media img {
  transform: scale(1.05);
}
.ut-product-media-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  text-align: center;
  color: var(--urban-muted-foreground);
  font-size: 1.25rem;
  text-transform: uppercase;
}
.ut-product-body {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
  padding: 1.4rem 1.5rem 1.6rem;
}
.ut-product-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.7rem;
}
.ut-product-chip {
  display: inline-block;
  padding: 0.22rem 0.7rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--urban-primary-800);
  background: var(--urban-primary-100);
  background-color: var(--urban-primary-100);
  border: 1px solid var(--urban-primary-200);
  border-radius: var(--urban-radius-full);
}
.ut-product-title {
  font-family: var(--urban-font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 1.45rem;
  line-height: 1.15;
  margin: 0 0 0.6rem;
}
.ut-product-title a {
  color: var(--urban-foreground);
}
.ut-product-title a:hover,
.ut-product-title a:focus {
  color: var(--urban-primary-700);
  text-decoration: none;
}
.ut-product-summary {
  color: var(--urban-muted-foreground);
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0;
  flex: 1 0 auto;
}
.ut-product-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.35rem;
}


/* =========================================================
 * Product detail page (layouts/products/single.html)
 * ========================================================= */
.ut-product-page {
  padding: 1.25rem 0 3rem;
}
.ut-crumb {
  margin-bottom: 1.25rem;
  font-size: 0.85rem;
  color: var(--urban-muted-foreground);
}
.ut-crumb ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.ut-crumb li + li::before {
  content: "/";
  margin-right: 0.4rem;
  color: var(--urban-neutral-300);
}
.ut-crumb a { color: var(--urban-muted-foreground); }
.ut-crumb a:hover { color: var(--urban-primary-700); text-decoration: none; }
.ut-crumb li[aria-current="page"] { color: var(--urban-foreground); font-weight: 600; }

.ut-product-header { margin-bottom: 2rem; }
.ut-product-h1 {
  font-family: var(--urban-font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-size: 2.6rem;
  line-height: 1.05;
  margin: 0.5rem 0 0.75rem;
}
.ut-product-lead {
  font-size: 1.05rem;
  color: var(--urban-muted-foreground);
  max-width: 40rem;
  line-height: 1.7;
  margin: 0;
}

.ut-product-main { margin-bottom: 2.5rem; }
.ut-product-gallery-main {
  margin: 0 0 0.75rem;
  background: var(--urban-card);
  border: 1px solid var(--urban-border);
  border-radius: var(--urban-radius-lg);
  overflow: hidden;
}
.ut-product-gallery-main img {
  width: 100%;
  height: auto;
  object-fit: cover;
  aspect-ratio: 4 / 3;
  display: block;
}
.ut-product-gallery-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.ut-product-thumb {
  width: 74px;
  height: 56px;
  padding: 0;
  border: 2px solid var(--urban-border);
  border-radius: var(--urban-radius-sm);
  overflow: hidden;
  cursor: pointer;
  background: var(--urban-card);
  transition: border-color 0.2s ease;
}
.ut-product-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ut-product-thumb.is-active,
.ut-product-thumb:hover { border-color: var(--urban-primary-500); }

.ut-product-info {
  background: var(--urban-card);
  border: 1px solid var(--urban-border);
  border-radius: var(--urban-radius-lg);
  padding: 1.6rem 1.75rem;
}
.ut-product-specs { margin: 0 0 1.5rem; }
.ut-spec {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--urban-border);
}
.ut-spec dt {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--urban-muted-foreground);
  margin: 0;
  white-space: nowrap;
}
.ut-spec dd {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
  text-align: right;
  color: var(--urban-foreground);
}
.ut-product-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.ut-product-response {
  margin: 0.9rem 0 0;
  font-size: 0.85rem;
  color: var(--urban-muted-foreground);
}

.ut-product-content { max-width: 52rem; }
.ut-product-content > h2:first-of-type { margin-top: 0; }
.ut-product-content h2 {
  margin-top: 2.25rem;
  margin-bottom: 1rem;
}

.ut-related { margin-top: 3.5rem; }


/* =========================================================
 * Product detail page v2 — left carousel / right info
 * ========================================================= */
.ut-product-main { margin-bottom: 2.5rem; }

/* --- Left: Bootstrap 3 carousel restyled --- */
.ut-product-carousel {
  background: var(--urban-card);
  border: 1px solid var(--urban-border);
  border-radius: var(--urban-radius-lg);
  overflow: hidden;
}
.ut-product-carousel .carousel-inner,
.ut-product-carousel .carousel-inner > .item {
  aspect-ratio: 4 / 3;
  background: var(--urban-neutral-100);
}
.ut-product-carousel .carousel-inner > .item > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.ut-product-carousel .carousel-control {
  background: none !important;
  width: 44px;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.ut-product-carousel:hover .carousel-control { opacity: 0.85; }
.ut-product-carousel .carousel-control:hover,
.ut-product-carousel .carousel-control:focus { opacity: 1; }
.ut-product-carousel .carousel-control .glyphicon {
  position: absolute;
  top: 50%;
  margin-top: -16px;
  left: 0;
  right: 0;
  font-size: 20px;
  width: 34px;
  height: 34px;
  line-height: 32px;
  margin-left: auto;
  margin-right: auto;
  color: var(--urban-neutral-800);
  background: rgba(255, 255, 255, 0.92);
  border-radius: var(--urban-radius-full);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}
.ut-product-carousel .carousel-indicators {
  bottom: 10px;
}
.ut-product-carousel .carousel-indicators li {
  width: 9px;
  height: 9px;
  margin: 0 4px;
  border: 1px solid #ffffff;
  background: rgba(255, 255, 255, 0.6);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  border-radius: var(--urban-radius-full);
}
.ut-product-carousel .carousel-indicators li.active {
  width: 9px;
  height: 9px;
  margin: 0 4px;
  background: var(--urban-primary-500);
  border-color: #ffffff;
}

/* --- Right: info column --- */
.ut-product-info {
  display: flex;
  flex-direction: column;
}
.ut-product-info .ut-product-chips { margin-bottom: 0.6rem; }
.ut-product-h1 {
  font-family: var(--urban-font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-size: 2.4rem;
  line-height: 1.08;
  margin: 0 0 0.6rem;
}
.ut-product-lead {
  font-size: 1rem;
  color: var(--urban-muted-foreground);
  line-height: 1.7;
  margin: 0 0 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--urban-border);
}
.ut-product-section { margin-bottom: 1.75rem; }
.ut-product-section-title {
  font-family: var(--urban-font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 1.05rem;
  margin: 0 0 0.75rem;
  color: var(--urban-foreground);
}
.ut-product-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ut-product-list li {
  position: relative;
  padding: 0.28rem 0 0.28rem 1.35rem;
  color: var(--urban-foreground);
  font-size: 0.95rem;
  line-height: 1.55;
}
.ut-product-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 7px;
  height: 7px;
  border-radius: var(--urban-radius-full);
  background: var(--urban-primary-500);
}
.ut-product-moq {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
  padding: 0.9rem 1.1rem;
  background: var(--urban-primary-100);
  border: 1px solid var(--urban-primary-200);
  border-radius: var(--urban-radius-md);
}
.ut-product-moq-label {
  font-family: var(--urban-font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.9rem;
  color: var(--urban-primary-800);
}
.ut-product-moq-value {
  font-size: 1rem;
  font-weight: 600;
  color: var(--urban-primary-900);
}
.ut-product-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.ut-product-response {
  margin: 0.9rem 0 0;
  font-size: 0.85rem;
  color: var(--urban-muted-foreground);
}


/* =========================================================
 * Product detail v5 — vertical square thumbnails + main image
 * 数学保证列高=主图高: t=(W-56)/7, 6t+5*8 = W-t-16
 * ========================================================= */
.ut-gallery {
  --g-main-gap: 16px;
  --g-thumb-gap: 8px;
  display: flex;
  gap: var(--g-main-gap);
  align-items: flex-start;
}
.ut-gallery-thumbs-wrap {
  position: relative;
  width: calc((100% - var(--g-main-gap) - var(--g-thumb-gap) * 5) / 7);
  flex-shrink: 0;
}
.ut-gallery-thumbs {
  display: flex;
  flex-direction: column;
  gap: var(--g-thumb-gap);
  overflow: hidden;
}
.ut-gallery-thumb {
  display: block;
  width: 100%;
  flex-shrink: 0;
  aspect-ratio: 1 / 1;
  padding: 0;
  border: 2px solid var(--urban-border);
  border-radius: var(--urban-radius-sm);
  overflow: hidden;
  cursor: pointer;
  background: var(--urban-card);
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.ut-gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ut-gallery-thumb.is-active,
.ut-gallery-thumb:hover { border-color: var(--urban-primary-500); }
.ut-gallery-thumb:hover { transform: translateY(-1px); }
.ut-gallery-nav {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 28px;
  height: 28px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--urban-radius-full);
  background: rgba(255, 255, 255, 0.94);
  color: var(--urban-neutral-800);
  font-size: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
  cursor: pointer;
  z-index: 3;
}
.ut-gallery-nav-prev { top: 6px; }
.ut-gallery-nav-next { bottom: 6px; }
.ut-gallery-nav.is-disabled { opacity: 0.3; cursor: default; pointer-events: none; }
.ut-gallery-nav:hover:not(.is-disabled) { color: var(--urban-primary-700); transform: translateX(-50%) scale(1.1); }
.ut-gallery-main {
  margin: 0;
  flex: 1 1 auto;
  width: 100%;
  max-width: 800px;
  max-height: 800px;
  aspect-ratio: 1 / 1;
  background: var(--urban-card);
  border: 1px solid var(--urban-border);
  border-radius: var(--urban-radius-lg);
  overflow: hidden;
}
.ut-gallery-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (max-width: 575px) {
  .ut-gallery { gap: 0.75rem; }
  .ut-gallery-thumbs { gap: 0.4rem; }
}
/* =========================================================
 * Typography scale — readability pass (base 16px, 1.25 ratio)
 * Body >=16px, secondary >=13px, headings 20/24/32/36px, lh 1.7
 * ========================================================= */
html { font-size: 16px; }
body {
  font-size: 1rem;            /* 16px */
  line-height: 1.7;
}

/* Global body copy floor */
body p, body li, body td, body th, body dd, body blockquote {
  font-size: 1rem;
  line-height: 1.7;
}

/* Headings — modular scale 1.25 */
h1 { font-size: 2.25rem; line-height: 1.18; }        /* 36px */
h2 { font-size: 2rem; line-height: 1.22; }           /* 32px */
h3 { font-size: 1.5rem; line-height: 1.3; }          /* 24px */
h4 { font-size: 1.25rem; line-height: 1.35; }        /* 20px */
h5 { font-size: 1.1rem; line-height: 1.4; }          /* 17.6px */
h6 { font-size: 1rem; line-height: 1.4; }
.heading h1 { font-size: 2rem; }
.heading h2 { font-size: 2rem; }
.heading h3 { font-size: 1.5rem; }
.heading-breadcrumbs h1 { font-size: 1.75rem; }      /* 28px page header */

/* Leads & section subtitles */
.lead { font-size: 1.125rem; line-height: 1.7; }     /* 18px */
section.bar p.lead,
.banner .text p,
.heading h1 small, .heading h2 small, .heading h3 small {
  font-size: 0.875rem;                               /* 14px */
}

/* Buttons — 14px floor (was 13px) */
.btn, .btn-template-main, .btn-template-transparent-primary, .btn-default {
  font-size: 0.875rem !important;                    /* 14px */
  line-height: 1.5;
}

/* Nav / topbar */
#top, #top p { font-size: 0.9375rem; }               /* 15px */
.navbar-nav > li > a { font-size: 0.9375rem; }

/* Blog / content meta */
#blog-listing-medium .post .author-category,
#blog-post .author-date,
#blog-post .comments,
.post-meta,
#footer #copyright p {
  font-size: 0.875rem;                               /* 14px */
}
.box-image-text .content h4 { font-size: 1.25rem; }
.box-image-text .content p.intro { font-size: 1rem; }
.ut-view-all-btn { font-size: 1rem; }

/* Sidebar widgets */
.panel.sidebar-menu ul.tag-cloud li a { font-size: 0.8125rem; }      /* 13px */
.panel.sidebar-menu ul.popular li p.date,
.panel.sidebar-menu ul.recent li p.date { font-size: 0.8125rem; }

/* Homepage: features / clients / testimonials */
.box-simple h3 { font-size: 1.5rem; }
.box-simple p { font-size: 1rem; line-height: 1.7; }
.ut-client-name { font-size: 1rem; }
.ut-client-tag { font-size: 0.8125rem; }
.ut-testimonial-text p { font-size: 1.05rem; line-height: 1.65; }
.ut-testimonial-name { font-size: 1rem; }
.ut-testimonial-position { font-size: 0.8125rem; }

/* Product list cards */
.ut-product-chip { font-size: 0.8125rem; }           /* 13px */
.ut-product-title { font-size: 1.6rem; }
.ut-product-summary { font-size: 1rem; line-height: 1.65; }

/* Product detail */
.ut-crumb { font-size: 0.9375rem; }
.ut-product-h1 { font-size: 2.75rem; line-height: 1.1; }
.ut-product-lead { font-size: 1.125rem; line-height: 1.7; }
.ut-product-section-title { font-size: 1.2rem; }
.ut-product-details-title { font-size: 1.2rem; }
.ut-product-list li { font-size: 1.05rem; line-height: 1.65; }
.ut-product-moq-label { font-size: 0.9375rem; }
.ut-product-moq-value { font-size: 1.125rem; }
.ut-product-response { font-size: 0.9375rem; }
.ut-gallery-nav { font-size: 14px; }

/* Footer */
#footer, #footer p, #footer li, #footer a { font-size: 0.9375rem; }


/* =========================================================
 * Hero: 文字上移，避开屏幕底部固定的声音开关
 * (减小顶部留白；底部留白保留，保持视频区高度)
 * ========================================================= */
@media (min-width: 768px) {
  .ut-hero-wrapper .home-carousel.ut-hero-home-carousel {
    padding-top: 3.5rem;
    padding-bottom: 12rem;
  }
}


/* =========================================================
 * Product detail card: fit within the first screen (no internal scroll)
 * Customization moved to full-width section below
 * ========================================================= */
.ut-product-info {
  max-height: calc(100vh - 235px);  /* content-sized; capped so it never exceeds the first screen */
  overflow-y: auto;
  padding: 1.1rem 1.25rem;
}
.ut-product-info .ut-product-chips { margin-bottom: 0.5rem; }
.ut-product-info .ut-product-h1 { font-size: 2rem; margin-bottom: 0.5rem; }
.ut-product-info .ut-product-lead {
  font-size: 0.95rem;
  line-height: 1.5;
  margin-bottom: 0.8rem;
  padding-bottom: 0.75rem;
}
.ut-product-info .ut-product-section { margin-bottom: 0.8rem; }
.ut-product-info .ut-product-section-cust { margin-bottom: 0.6rem; }
.ut-product-info .ut-product-section-title { font-size: 1rem; margin-bottom: 0.45rem; }
.ut-product-info .ut-product-list li {
  padding: 0.1rem 0 0.1rem 1.1rem;
  font-size: 0.93rem;
  line-height: 1.45;
}
.ut-product-info .ut-product-moq { margin-bottom: 0.9rem; padding: 0.65rem 0.9rem; }
.ut-product-info .ut-product-moq-value { font-size: 1.05rem; }
.ut-product-info .ut-product-cta {
  padding-top: 1rem;
}
.ut-product-info .ut-product-cta .btn { padding: 0.55rem 1.05rem; }
.ut-product-info .ut-product-response { margin-top: 0.5rem; font-size: 0.85rem; }

/* Full-width customization section */
.ut-customization {
  margin: 0 0 3rem;
  padding: 2rem 2.25rem;
  background: var(--urban-card);
  border: 1px solid var(--urban-border);
  border-radius: var(--urban-radius-lg);
}
.ut-customization .heading { margin-bottom: 1.5rem; }
.ut-customization-list {
  columns: 2;
  column-gap: 3rem;
}
.ut-customization-list li {
  break-inside: avoid;
  padding: 0.35rem 0 0.35rem 1.4rem;
  font-size: 1rem;
  line-height: 1.6;
}
@media (max-width: 575px) {
  .ut-customization-list { columns: 1; }
}


/* =========================================================
 * Product info tabs: Reviews / Size / Specs / Details
 * ========================================================= */
.ut-tabs { margin: 2.5rem 0 3rem; }
.ut-tabs-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  border-bottom: 2px solid var(--urban-border);
  margin-bottom: 2rem;
}
.ut-tab-btn {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0.7rem 1.4rem;
  font-family: var(--urban-font-body);
  font-size: 1rem;
  font-weight: 600;
  color: var(--urban-muted-foreground);
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.ut-tab-btn:hover { color: var(--urban-foreground); }
.ut-tab-btn.is-active { color: var(--urban-primary-700); border-bottom-color: var(--urban-primary-500); }
.ut-tab-panel { display: none; }
.ut-tab-panel.is-active { display: block; animation: utFadeIn 0.25s ease; }
@keyframes utFadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.ut-tab-empty { color: var(--urban-muted-foreground); }

/* Reviews */
.ut-review {
  background: var(--urban-card);
  border: 1px solid var(--urban-border);
  border-radius: var(--urban-radius-lg);
  padding: 1.4rem 1.5rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  margin-bottom: 1rem;
}
.ut-review-stars { color: var(--urban-warning); margin-bottom: 0.6rem; font-size: 0.85rem; }
.ut-review-text { font-size: 0.95rem; line-height: 1.6; color: var(--urban-foreground); flex: 1; margin: 0 0 1rem; }
.ut-review-who { display: flex; flex-direction: column; }
.ut-review-name { font-weight: 700; color: var(--urban-foreground); }
.ut-review-position { font-size: 0.85rem; color: var(--urban-muted-foreground); }

/* Tables */
.ut-table-wrap { overflow-x: auto; }
.ut-size-chart,
.ut-spec-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--urban-card);
  border: 1px solid var(--urban-border);
  border-radius: var(--urban-radius-lg);
  overflow: hidden;
}
.ut-size-chart th,
.ut-size-chart td,
.ut-spec-table th,
.ut-spec-table td {
  padding: 0.8rem 1rem;
  border-bottom: 1px solid var(--urban-border);
  text-align: center;
  font-size: 0.95rem;
}
.ut-size-chart thead th {
  background: var(--urban-neutral-100);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.85rem;
  color: var(--urban-muted-foreground);
}
.ut-spec-table th {
  text-align: left;
  width: 38%;
  background: var(--urban-neutral-100);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.85rem;
  color: var(--urban-muted-foreground);
}
.ut-spec-table td { text-align: left; }
.ut-size-note { margin-top: 1rem; font-size: 0.9rem; color: var(--urban-muted-foreground); }

/* Details (image + text) */
.ut-details-text { max-width: 52rem; }
.ut-details-text h2 { margin-top: 2rem; }
.ut-details-images { margin-top: 1.5rem; }
.ut-details-content { margin-top: 1.5rem; line-height: 1.75; }
.ut-details-content img { max-width: 100%; height: auto; border-radius: 6px; margin: 1rem 0; }
.ut-details-content p { margin: 0 0 1rem; }
.ut-detail-img {
  margin: 0 0 1rem;
  border-radius: var(--urban-radius-lg);
  overflow: hidden;
  border: 1px solid var(--urban-border);
  background: var(--urban-card);
}
.ut-detail-img img { width: 100%; height: auto; display: block; }

@media (max-width: 767px) {
  .ut-tab-btn { padding: 0.6rem 0.9rem; font-size: 0.92rem; }
}

.ut-tab-subsection {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--urban-border);
}
.ut-tab-subtitle {
  font-size: 1.1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 0.75rem;
}

.ut-reviews-section {
  margin: 2.5rem 0 1rem;
}

/* Ensure customization list items show the same green dot bullets as features */
.ut-product-info .ut-product-section-cust .ut-product-list li {
  position: relative;
  padding-left: 1.2rem;
}
.ut-product-info .ut-product-section-cust .ut-product-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 7px;
  height: 7px;
  border-radius: 9999px;
  background: var(--urban-primary-500);
}

/* Reviews closer to the main image */
.ut-product-main { margin-bottom: 1rem; }
.ut-reviews-section { margin: 0.75rem 0 1.5rem; }

/* Color / SKU options below main image */
.ut-color-options { margin-top: 1.5rem; }
.ut-color-title {
  font-size: 1.05rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 0.8rem;
}
.ut-color-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem 1rem;
}
.ut-color-item {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  cursor: default;
}
.ut-color-swatch {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid #ffffff;
  box-shadow: 0 0 0 1px var(--urban-border), 0 1px 3px rgba(0, 0, 0, 0.15);
  flex-shrink: 0;
}
.ut-color-name {
  font-size: 0.9rem;
  color: var(--urban-muted-foreground);
}

/* Captioned thumbnails (below main image) */
.ut-caption-thumbs {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.5rem 0.75rem;
  margin-top: 0.6rem;
  margin-bottom: 0;
}
.ut-caption-thumb {
  margin: 0;
  width: 72px;
  justify-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.2rem 0.55rem 0.25rem;
  border: 1px solid var(--urban-border);
  border-radius: var(--urban-radius-md);
  background: var(--urban-card);
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.ut-caption-thumb:hover {
  border-color: var(--urban-primary-300);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.ut-caption-thumb.is-active {
  border-color: var(--urban-primary-500);
  background: var(--urban-primary-50);
  box-shadow: 0 2px 10px rgba(101, 163, 13, 0.15);
}
.ut-caption-thumb img {
  width: 50px;
  height: 50px;
  object-fit: cover;
  display: block;
  margin: 0 auto;
  border-radius: var(--urban-radius-sm);
}
.ut-caption-label {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.78rem;
  color: var(--urban-muted-foreground);
  line-height: 1.25;
}


/* Row as CSS grid — left & right columns always equal height */
.ut-product-main {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
}
.ut-product-main > [class*="col-"] {
  display: block;
  width: auto;
  float: none;
  min-width: 0;
}
.ut-product-main > [class*="col-"]:nth-child(1) { grid-column: 1; }
.ut-product-main > [class*="col-"]:nth-child(2) { grid-column: 2; }
.ut-product-info {
  height: 100%;
  max-height: none;
  overflow-y: auto;
}
.ut-product-info .ut-product-cta {
  margin-top: auto;
  padding-top: 1rem;
}
.ut-product-info .ut-product-cta {
  margin-top: auto;
  padding-top: 1rem;
}


@media (max-width: 575px) {
  .ut-caption-thumbs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Related products — horizontal marquee (moves right) */
.ut-related-stage {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 1.5rem 0 0.75rem;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
.ut-related-track {
  display: flex;
  gap: 1.25rem;
  width: max-content;
  animation: utRelatedScrollRight 70s linear infinite;
}
.ut-related-stage:hover .ut-related-track,
.ut-related-stage:focus-within .ut-related-track {
  animation-play-state: paused;
}
@keyframes utRelatedScrollRight {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}
.ut-related-card {
  width: 260px;
  flex: 0 0 auto;
}