/* ============================================================
   Honseng Gifts — Frontend styles
   Business theme: deep blue (#0a2540) / slate gray / white
   ============================================================ */
:root {
  --c-primary: #0a2540;
  --c-primary-2: #123a63;
  --c-accent: #1d7ef0;
  --c-accent-2: #38bdf8;
  --c-ink: #1f2933;
  --c-body: #4a5560;
  --c-muted: #8a96a3;
  --c-line: #e3e8ee;
  --c-bg: #f6f8fb;
  /* Soft neutral surface: compare-table header + row hover, flowchart media
     placeholder, step-count pill, colour-note panel. */
  --c-bg-soft: #eef2f7;
  /* Legacy alias used by the colour-reference page. */
  --c-soft: var(--c-bg-soft);
  --c-card: #ffffff;
  --c-ok: #1f9d57;
  --c-warn: #d98a00;
  --c-danger: #d9483b;
  --radius: 6px;
  --radius-sm: 4px;
  --shadow: 0 6px 24px rgba(10, 37, 64, 0.08);
  --shadow-sm: 0 2px 8px rgba(10, 37, 64, 0.06);
  --maxw: 1200px;
  --header-h: 72px;
  --font: "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--c-body);
  background: var(--c-bg);
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--c-accent); text-decoration: none; }
a:hover { color: var(--c-primary); }
img, video { max-width: 100%; display: block; }
video { background: var(--c-primary); }
h1, h2, h3, h4 { color: var(--c-ink); line-height: 1.25; margin: 0 0 .5em; font-weight: 700; }
h1 { font-size: 2rem; } h2 { font-size: 1.55rem; } h3 { font-size: 1.2rem; }
p { margin: 0 0 1em; }
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }
.text-center { text-align: center; }
.muted { color: var(--c-muted); }
.primary { color: var(--c-primary); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 22px; border-radius: var(--radius-sm);
  font-weight: 600; font-size: 14px; cursor: pointer;
  border: 1px solid transparent; transition: .18s; line-height: 1;
}
.btn-primary { background: var(--c-accent); color: #fff; }
.btn-primary:hover { background: var(--c-primary); color: #fff; }
.btn-outline { background: transparent; border-color: var(--c-accent); color: var(--c-accent); }
.btn-outline:hover { background: var(--c-accent); color: #fff; }
.btn-ghost { background: rgba(255,255,255,.12); color: #fff; }
.btn-ghost:hover { background: rgba(255,255,255,.22); }
.btn-dark { background: var(--c-primary); color: #fff; }
.btn-dark:hover { background: #06182b; color: #fff; }
.btn-sm { padding: 7px 14px; font-size: 13px; }
.btn-block { width: 100%; justify-content: center; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: #fff; border-bottom: 1px solid var(--c-line);
  box-shadow: var(--shadow-sm);
}
.header-inner { display: flex; align-items: center; height: var(--header-h); gap: 20px; }
.logo { display: flex; align-items: center; gap: 10px; font-weight: 800; color: var(--c-primary); font-size: 1.2rem; }
.logo img { height: 38px; }
.hs-logo { font-family: 'honseng'; speak: never; font-style: normal; font-weight: 400; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.hs-logo::before { content: "\e900"; }
.logo .hs-logo { color: var(--c-accent); font-size: 39px; }
.footer-logo .hs-logo { color: #fff; font-size: 35px; }
.main-nav { display: flex; gap: 4px; margin-left: 40px; flex: 1; }
.main-nav a {
  padding: 10px 14px; color: var(--c-ink); font-weight: 600; font-size: 14px; border-radius: var(--radius-sm);
}
.main-nav a:hover, .main-nav a.active { background: var(--c-bg); color: var(--c-accent); }
.header-tools { display: flex; align-items: center; gap: 10px; }

/* ---- Multi-level dropdown nav ---- */
.main-nav .nav-item { position: relative; }
.main-nav .nav-item > a { display: inline-flex; align-items: center; gap: 4px; padding: 10px 14px; color: var(--c-ink); font-weight: 600; font-size: 14px; border-radius: var(--radius-sm); }
.main-nav .nav-item > a:hover, .main-nav .nav-item.active > a { background: var(--c-bg); color: var(--c-accent); }
.main-nav .caret { opacity: .6; display: inline-flex; align-items: center; }
.main-nav .nav-dropdown {
  position: absolute; top: calc(100% + 2px); left: 0; min-width: 210px;
  background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 6px; margin: 0; list-style: none;
  opacity: 0; visibility: hidden; transform: translateY(6px); transition: all .16s ease; z-index: 60;
}
.main-nav .nav-item.has-child:hover > .nav-dropdown,
.main-nav .nav-item.has-child:focus-within > .nav-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.main-nav .nav-dropdown li a { display: block; padding: 9px 12px; border-radius: var(--radius-sm); font-weight: 500; color: var(--c-ink); }
.main-nav .nav-dropdown li a:hover, .main-nav .nav-dropdown li a.active { background: var(--c-bg); color: var(--c-accent); }
@media (max-width: 1024px) {
  .main-nav .nav-dropdown { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; border-left: 2px solid var(--c-line); margin-left: 12px; }
}
.icon-btn {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--c-line); background: #fff; cursor: pointer; color: var(--c-ink);
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.icon-btn:hover { border-color: var(--c-accent); color: var(--c-accent); }
.icon-btn svg { width: 22px; height: 22px; display: block; }
/* Inline SVG icon aligned with surrounding text (buttons, meta rows, footer). */
.icon-inline { vertical-align: -0.18em; flex: none; }
.cart-badge {
  position: absolute; top: -4px; right: -4px; background: var(--c-danger); color: #fff;
  font-size: 11px; min-width: 18px; height: 18px; border-radius: 9px; display: grid; place-items: center; padding: 0 4px;
}
.search-box { display: none; position: absolute; top: var(--header-h); left: 0; right: 0; background: #fff; padding: 16px 20px; box-shadow: var(--shadow); border-top: 1px solid var(--c-line); }
.search-box.open { display: block; }
.search-box form { display: flex; gap: 10px; max-width: var(--maxw); margin: 0 auto; }
.search-box input { flex: 1; }
.lang-switch a { font-size: 13px; color: var(--c-muted); padding: 4px 6px; }
.lang-switch a.active { color: var(--c-accent); font-weight: 700; }
.menu-toggle { display: none; }

/* ---------- Hero / Banner ---------- */
.hero { position: relative; color: #fff; min-height: 460px; }
.hero-slide { position: absolute; inset: 0; display: flex; align-items: center; opacity: 0; visibility: hidden; pointer-events: none; z-index: 1; transition: opacity .8s ease, visibility 0s linear .8s; }
.hero-slide.active { opacity: 1; visibility: visible; pointer-events: auto; z-index: 2; transition: opacity .8s ease, visibility 0s; }
.hero:not(.is-ready) .hero-slide:first-child { opacity: 1; visibility: visible; } /* no-JS fallback: show first slide until JS marks .hero.is-ready */
@media (prefers-reduced-motion: reduce) {
  .hero-slide { transition: none; }
  .hero-slide.active { transition: none; }
}
.hero-slide .bg { position: absolute; inset: 0; }
.hero-slide .bg img { width: 100%; height: 100%; object-fit: cover; }
.hero-slide .bg::after { content: ""; position: absolute; inset: 0; background: rgba(6,24,43,.55); }
.hero-content { position: relative; max-width: var(--maxw); margin: 0 auto; padding: 0 20px; width: 100%; display: flex; align-items: center; gap: 40px; }
.hero-content > .hero-text { flex: 1 1 auto; min-width: 0; }
.hero-content > .hero-side { flex: 0 0 auto; max-width: 460px; width: 40%; }
.hero-content > .hero-side img { display: block; width: 100%; height: auto; border-radius: var(--radius); box-shadow: 0 14px 40px rgba(0,0,0,.25); animation: heroSideIn .8s ease both; }
@keyframes heroSideIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .hero-content > .hero-side img { animation: none; } }
.hero-content h1 { color: #fff; font-size: 2.6rem; max-width: 640px; }
.hero-content p { color: #d7e6f7; font-size: 1.1rem; max-width: 540px; }
.hero-content .actions { margin-top: 26px; display: flex; gap: 14px; flex-wrap: wrap; }
.hero-dots { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 2; }
.hero-dots button { width: 10px; height: 10px; border-radius: 50%; border: none; background: rgba(255,255,255,.5); cursor: pointer; }
.hero-dots button.active { background: #fff; width: 26px; border-radius: 5px; }
@media (max-width: 900px) {
  /* Side image is a desktop flourish; on narrow viewports the text takes the
     full row so the slide never shrinks the headline. */
  .hero-content > .hero-side { display: none; }
}

/* ---------- Section ---------- */
.section { padding: 64px 0; }
.section.alt { background: #fff; }
.section-head { text-align: center; margin-bottom: 40px; }
.section-head h2 { margin-bottom: 8px; }
.section-head p { color: var(--c-muted); max-width: 620px; margin: 0 auto; }

/* ---------- Cards / Grid ---------- */
.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.card {
  background: var(--c-card); border: 1px solid var(--c-line); border-radius: var(--radius);
  overflow: hidden; transition: .2s;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.card .thumb { aspect-ratio: 4/3; background: var(--c-bg); overflow: hidden; position: relative; }
.card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.card .body { padding: 18px; }
.card.card-text { border-left: 3px solid var(--c-accent); display: flex; flex-direction: column; }
.card.card-text .body { padding: 20px 22px; flex: 1; display: flex; flex-direction: column; justify-content: center; }
/* Flat card — no shadow in any state (e.g. Related Products on detail page). */
.card.card-flat, .card.card-flat:hover { box-shadow: none; }
.card h3 { font-size: 1.05rem; margin: 0 0 6px; }
.card h3 a { color: var(--c-ink); }
.card .meta { font-size: 13px; color: var(--c-muted);display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden; }

/* Homepage category strip: compact horizontal scroll with counts */
.category-strip-wrap {
  position: relative;
}
.category-strip {
  width: 100%;
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  padding: 0 0 4px;
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;       /* IE/Edge legacy */
}
.category-strip::-webkit-scrollbar { display: none; } /* Chrome/Safari */
.category-strip-item {
  flex: 0 0 auto;
  width: 120px;
  text-align: center;
  text-decoration: none;
  color: inherit;
  scroll-snap-align: start;
}
.category-strip-thumb {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #fff;
  border: 1px solid var(--c-line);
  display: grid;
  place-items: center;
  transition: border-color .18s, box-shadow .18s;
}
.category-strip-item:hover .category-strip-thumb {
  border-color: var(--c-accent);
  box-shadow: var(--shadow-sm);
}
.category-strip-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.category-strip-body { padding-top: 12px; }
.category-strip-body h3 {
  font-size: 13px;
  margin: 0 0 3px;
  color: var(--c-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.category-strip-count {
  font-size: 12px;
  color: var(--c-muted);
  margin: 0;
}
.category-strip-arrow {
  position: absolute;
  top: 60px;                       /* centre on the 120px square thumb (border-box) */
  width: 40px;
  height: 40px;
  margin-top: -20px;
  border-radius: 50%;
  border: 1px solid var(--c-line);
  background: #fff;
  color: var(--c-ink);
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 2;
  box-shadow: var(--shadow-sm);
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity .2s, visibility .2s, background .2s, color .2s;
}
.category-strip-arrow--prev { left: 0; }
.category-strip-arrow--next { right: 0; }
.category-strip-wrap:hover .category-strip-arrow:not(.is-hidden) {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}
.category-strip-wrap:hover .category-strip-arrow.is-disabled {
  opacity: .35;
  pointer-events: none;
}
.category-strip-arrow:hover { background: var(--c-accent); color: #fff; border-color: var(--c-accent); }
.category-strip-arrow.is-hidden {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

@media (max-width: 768px) {
  .category-strip { gap: 14px; }
  .category-strip-item { width: 110px; }
  .category-strip-arrow { width: 34px; height: 34px; top: 55px; margin-top: -17px; }
}

/* product card */
.product-card h3 {    display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;min-height: 41px}
.product-card .tags { position: absolute; top: 10px; left: 10px; display: flex; gap: 6px; }
.tag { font-size: 11px; padding: 3px 8px; border-radius: 20px; background: rgba(10,37,64,.8); color: #fff; }
.tag.hot { background: var(--c-danger); }
.price { font-weight: 700; color: var(--c-primary); }
/* Product-card action block: optional price line + one row of three buttons.
   The card body is only ~238px wide inside the 3-column grid, so the buttons
   run on a compact metric — that is what lets "+ Compare / + Inquiry / Inquire"
   share a single row. */
.product-actions { margin-top: 8px; }
.product-actions .price { display: block; }
.product-actions .price + .product-actions-btns { margin-top: 8px; }
/* The three actions are justified edge to edge: first button flush with the
   left gutter, last flush with the right, free space shared between them. */
.product-actions-btns { display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; gap: 5px; }
.product-actions-btns .btn { padding: 6px 8px; font-size: 12.5px; white-space: nowrap; flex: 0 0 auto; }
/* One heavy block per row. Inquire keeps the only saturated fill (navy); the
   other two step down through a blue tonal and plain neutral text, so the row
   reads as one primary action plus two options instead of three buttons all
   shouting. Tier colours are measured against their own background:
     + Inquiry  #1263c6 on #e9f1fd = 5.1:1   (hover #dbe9fb = 4.7:1)
     + Compare  #5b6672 on #fff    = 5.9:1   (hover: --c-ink on --c-bg-soft)
   Both clear AA at 12.5px. --c-muted (#8a96a3) would only reach 3.0:1 on white,
   which is why the neutral tier is painted with #5b6672 instead. */
.product-actions-btns .btn-primary { background: #e9f1fd; border-color: transparent; color: #1263c6; }
.product-actions-btns .btn-primary:hover { background: #dbe9fb; border-color: transparent; color: #1263c6; }
.product-actions-btns .btn-dark { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.product-actions-btns .btn-dark:hover { background: #06182b; border-color: #06182b; color: #fff; }
/* Compare = the old "Add to compare" checkbox wearing a button skin. The
   native input is kept in the DOM (front.js reads [data-compare].checked) but
   painted by the label, which also shows the selected state. */
.product-compare {
  position: relative; user-select: none;
  background: transparent; border-color: transparent;
  color: #5b6672; font-weight: 500;
}
.product-compare:hover { background: var(--c-bg-soft); border-color: transparent; color: var(--c-ink); }
.product-compare-input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
/* Ticked state = green ("added"), and the only moment Compare turns solid: it
   has to out-rank its own resting neutral, not the navy Inquire. The shade is
   deliberately darker than --c-ok (#1f9d57), which only reaches 3.5:1 against
   white at this 12.5px size — #18814a reaches 4.9:1 (AA). */
.product-compare:has(.product-compare-input:checked) { background: #18814a; border-color: #18814a; color: #fff; }
.product-compare:has(.product-compare-input:checked):hover { background: #14703f; border-color: #14703f; color: #fff; }
.product-compare:has(.product-compare-input:focus-visible) { outline: 2px solid var(--c-accent); outline-offset: 2px; }
/* 3 columns still active (the grid drops to 2 only at <=1024px) but the viewport
   is narrow, so the card body is 180–225px wide instead of 238px. Without this
   step the row would drop to two lines between 1025px and ~1180px (measured:
   the row needs 225px and got 180px at 1025px). The padding is deliberately
   small here — the solid fills carry the affordance, the label just names it. */
@media (min-width: 1025px) and (max-width: 1180px) {
  .product-actions-btns { gap: 3px; }
  .product-actions-btns .btn { padding: 5px 3px; font-size: 11px; }
}

/* advantage / stat — left icon + right text (home "Why Choose Us" only) */
.feature-box { padding: 24px; }
.adv-icon { width: 56px; height: 56px; flex: 0 0 56px; border-radius: 14px; background: rgba(29,126,240,.1); color: var(--c-accent); display: grid; place-items: center; }
.adv-icon img { width: 40px; height: 40px; object-fit: contain; }
.feature-box--icon-left { display: flex; align-items: flex-start; gap: 16px; }
.feature-box--icon-left .feature-box__body { min-width: 0; }
.feature-box--icon-left .feature-box__body h3 { margin-top: 2px; }

/* team */
.team-card { padding: 24px; }
.team-avatar, .team-avatar video { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; margin: 0 auto; box-shadow: 0 6px 18px rgba(29,126,240,.18); }
.team-avatar--fallback { font-size: 34px; }
.stat-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; text-align: center; }
.stat .num { font-size: 2.2rem; font-weight: 800; color: var(--c-primary); }
.stat .lbl { color: var(--c-muted); }

/* ---------- About · History Timeline ---------- */
.timeline {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  padding: 12px 0;
}
.timeline::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  background: var(--c-line);
  transform: translateX(-50%);
}
.timeline-item {
  position: relative;
  width: 50%;
  padding: 0 44px 46px;
}
.timeline-item:nth-child(odd) {
  left: 0;
  text-align: right;
}
.timeline-item:nth-child(even) {
  left: 50%;
  text-align: left;
}
.timeline-item:last-child { padding-bottom: 0; }
.timeline-dot {
  position: absolute;
  top: 8px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--c-accent);
  border: 4px solid #fff;
  box-shadow: 0 0 0 2px var(--c-accent);
}
.timeline-item:nth-child(odd) .timeline-dot { right: -9px; }
.timeline-item:nth-child(even) .timeline-dot { left: -9px; }
.timeline-year {
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--c-primary);
  line-height: 1;
  margin-bottom: 10px;
}
.timeline-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--c-ink);
  margin-bottom: 8px;
}
.timeline-desc {
  color: var(--c-body);
  font-size: 15px;
  line-height: 1.65;
}

@media (max-width: 768px) {
  .timeline::before { left: 20px; }
  .timeline-item {
    width: 100%;
    left: 0 !important;
    text-align: left !important;
    padding: 0 0 34px 52px;
  }
  .timeline-dot {
    left: 11px !important;
    right: auto !important;
  }
}

/* ---------- Breadcrumb ---------- */
.breadcrumb { font-size: 13px; color: var(--c-muted); padding: 14px 0; }
.breadcrumb a { color: var(--c-muted); }
.breadcrumb span { margin: 0 6px; }

/* ---------- Page hero (inner pages) ---------- */
.page-hero { background: var(--c-primary); color: #fff; padding: 54px 0; }
.page-hero h1 { color: #fff; }
.page-hero p { color: #cfe2ff; margin: 0; }
.page-hero .breadcrumb a, .page-hero .breadcrumb { color: #aac6ee; }

/* ---------- Forms ---------- */
.field { margin-bottom: 16px; }
.field label { display: block; font-weight: 600; color: var(--c-ink); margin-bottom: 6px; font-size: 14px; }
.field .req { color: var(--c-danger); }
/* Field-level CAPTCHA error: sits directly under the input so the failure is
   noticed at the point of entry, not only in the (scrollable) top alert. */
.inquiry-captcha-error { margin-top: 6px; font-size: 12.5px; line-height: 1.4; color: #b02a1f; }
.inquiry-captcha-error::before { content: "!"; display: inline-block; width: 15px; height: 15px; line-height: 15px; text-align: center; border-radius: 50%; background: #b02a1f; color: #fff; font-size: 11px; font-weight: 700; margin-right: 6px; vertical-align: 1px; }
input.is-invalid, textarea.is-invalid, select.is-invalid { border-color: var(--c-danger); box-shadow: 0 0 0 3px rgba(217,72,59,.12); }
input[type=text], input[type=email], input[type=tel], input[type=number], input[type=url],
textarea, select {
  width: 100%; padding: 11px 13px; border: 1px solid var(--c-line); border-radius: var(--radius-sm);
  font-size: 14px; font-family: inherit; color: var(--c-ink); background: #fff; transition: .15s;
}
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--c-accent); box-shadow: 0 0 0 3px rgba(29,126,240,.12); }
textarea { resize: vertical; min-height: 120px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* Filter bar: selects sit inline (override global select{width:100%}) */
.filter-bar { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
form.filter-bar { margin-bottom: 24px; }
.filter-bar select { width: auto; min-width: 200px; height: 40px; padding: 0 12px; }
.filter-bar .btn { height: 40px; }

/* Inline filter selects: the chevron is painted by us, not by the UA. With the
   native control it sits ~7px from the right border whatever padding-right
   says (measured), which reads as "glued to the frame". A background image
   makes the inset explicit — 13px off the border, with 36px of right padding
   reserving the lane so the label never slides under it. */
.filters select, .filter-bar select {
  appearance: none; -webkit-appearance: none;
  padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6672' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 14px 14px;
}

/* Testimonial cards: avatar left, name/company/content right */
.t-grid { gap: 20px; }
.t-card { padding: 22px; display: flex; gap: 14px; align-items: flex-start; }
.t-avatar {
  flex: 0 0 48px; width: 48px; height: 48px; border-radius: 50%;
  background: rgba(29,126,240,.1); color: var(--c-accent);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 20px; overflow: hidden;
}
.t-avatar img { width: 100%; height: 100%; object-fit: contain; padding: 7px; }
.t-body { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; line-height: 1.5; }
.t-name { color: var(--c-ink); }
.t-content { color: var(--c-ink); margin: 2px 0 0; flex: 1; }

/* ---------- Specifications table (product detail, first tab) ----------
   A plain two-column label/value sheet. The class had no rules at all before
   2026-10-06, so <th> fell back to the UA default `text-align: center`, which
   made the label column look ragged. Labels are left aligned and get a colon
   from ::after so the colon is pure decoration — it is not part of the label
   text, so copying a spec row out of the page does not carry a stray ":". */
.spec-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.spec-table th,
.spec-table td { padding: 11px 0; vertical-align: top; border-bottom: 1px solid var(--c-line, #e3e8ee); }
.spec-table th {
  text-align: left;                 /* was the UA default centre */
  font-weight: 600;
  color: var(--c-ink);
  white-space: nowrap;              /* "Product Material" stays on one line */
  padding-right: 10px;
  width: 1%;                        /* shrink-to-fit: value takes the rest */
}
.spec-table th::after { content: ":"; margin-left: 2px; font-weight: 400; color: var(--c-muted, #8a96a3); }
.spec-table td { color: var(--c-body, #4a5560); padding-left: 0; }
/* Last row: drop the rule so the sheet ends cleanly. */
.spec-table tr:last-child th,
.spec-table tr:last-child td { border-bottom: 0; }
.form-note { font-size: 13px; color: var(--c-muted); }
.alert { padding: 12px 16px; border-radius: var(--radius-sm); margin-bottom: 16px; font-size: 14px; }
.alert-success { background: #e7f6ee; color: #146536; border: 1px solid #b7e4c7; }
.alert-error { background: #fdecea; color: #b02a1f; border: 1px solid #f5c2bc; }
.alert-info { background: #e8f2fd; color: #0b5394; border: 1px solid #bcdcfa; }
.help-text { font-size: 12px; color: var(--c-muted); margin-top: 4px; }

/* ---------- Layout: sidebar + content ---------- */
.layout-2 { display: grid; grid-template-columns: 260px 1fr; gap: 30px; align-items: start; }
/* Products list only: drop border + shadow on the sidebar and product cards
   so both columns sit flush with the page background. Other pages still
   use the lifted `.card` chrome by default. */
.layout-2 .sidebar { border: 0; }
.layout-2 .card, .layout-2 .card:hover { border: 0; box-shadow: none; transform: none; }
.sidebar { background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius); padding: 18px; position: sticky; top: calc(var(--header-h) + 16px); }
.sidebar h4 { margin: 0 0 12px; font-size: 14px; }
.sidebar ul { list-style: none; margin: 0; padding: 0; }
.sidebar a { display: block; padding: 9px 12px; border-radius: var(--radius-sm); color: var(--c-body); font-size: 14px; }
.sidebar a:hover, .sidebar a.active { background: var(--c-bg); color: var(--c-accent); }

/* Sidebar category tree. A parent row carries two independent affordances:
   the NAME filters the grid (plain link), the CARET expands/collapses the
   branch (exclusive: one branch open at a time; logic lives in front.js).
   The panel is a plain [hidden] toggle, so a JS-off visitor still gets the
   server-rendered state and the name link keeps working. */
.sidebar .cat-row { display: flex; align-items: center; gap: 2px; }
.sidebar .cat-row > .cat-head { flex: 1 1 auto; min-width: 0; }
/* A real <button> so the caret is keyboard-reachable and never hijacks the
   link: clicking the row navigates, clicking the caret only toggles. */
.sidebar .cat-toggle {
  flex: 0 0 auto; align-self: stretch; width: 34px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: none; font: inherit; line-height: 0; color: var(--c-muted);
  cursor: pointer; border-radius: var(--radius-sm);
  transition: transform .2s ease, color .2s ease, background .15s ease;
}
.sidebar .cat-toggle:hover { background: var(--c-bg); color: var(--c-accent); }
.sidebar .cat-item.is-open > .cat-row > .cat-toggle { transform: rotate(180deg); color: var(--c-accent); }
.sidebar .cat-toggle:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.sidebar .cat-sub { margin: 2px 0 6px 13px; padding-left: 14px; border-left: 1px solid var(--c-line); }
.sidebar .cat-sub[hidden] { display: none; }
.sidebar .cat-sub:not([hidden]) { animation: catSubIn .18s ease both; }
.sidebar .cat-sub a { font-size: 13px; padding: 8px 12px; color: var(--c-muted); }
.sidebar .cat-sub a:hover, .sidebar .cat-sub a.active { color: var(--c-accent); background: var(--c-bg); }
@keyframes catSubIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .sidebar .cat-toggle { transition: none; }
  .sidebar .cat-sub:not([hidden]) { animation: none; }
}

/* In-place listing navigation (front.js swaps #catSidebar / #productResults
   with the fragments Product::index() returns for an AJAX request). While the
   request is in flight the OUTGOING grid is dimmed rather than replaced by a
   spinner: the layout never jumps and the visitor keeps seeing what they were
   reading. Opacity only — no pointer-events:none — so a scroll started
   mid-request is not interrupted. */
#productResults.is-loading { opacity: .5; transition: opacity .12s ease; }
/* Generic loading state for the other AJAX listings (testimonials / search /
   news / cases) — same affordance as #productResults, keyed on the shared
   [data-list-results] hook so every swapped region dims while it fetches. */
[data-list-results].is-loading { opacity: .5; transition: opacity .12s ease; }
@media (prefers-reduced-motion: reduce) {
  #productResults.is-loading { transition: none; }
  [data-list-results].is-loading { transition: none; }
}

/* ---------- Product detail ---------- */
.pd-grid { display: grid; grid-template-columns: 3fr 4fr; gap: 40px; }
.gallery .main-img { border-radius: var(--radius); overflow: hidden; background: #fff; aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; }
.gallery .main-img img, .gallery .main-img video { width: 100%; height: 100%; object-fit: contain; }
.gallery .main-img video { background: #000; }
/* Thumbnail strip: always one row that spans the full width of the main
   image. Up to 5 thumbs fit exactly; more than that scroll horizontally and
   the prev/next arrows show up (mirrors .category-strip on the homepage). */
.thumbs-strip-wrap { position: relative; margin-top: 14px; }
.thumbs { display: flex; gap: 12px; margin-top: 0; flex-wrap: nowrap; overflow-x: auto; scroll-behavior: smooth; scroll-snap-type: x mandatory; padding: 0 0 4px; scrollbar-width: none; -ms-overflow-style: none; }
.thumbs::-webkit-scrollbar { display: none; }
/* Five slots per view: each thumb takes exactly 1/5 of the strip so a
   full row lines up flush with both edges of the main image above it. */
.thumbs .thumb { position: relative; flex: 0 0 calc((100% - 48px) / 5); padding: 0; background: #fff; border: 0; border-radius: var(--radius-sm); cursor: pointer; transition: opacity .15s, box-shadow .15s; overflow: hidden; aspect-ratio: 1/1; scroll-snap-align: start; }
.thumbs .thumb img { width: 100%; height: 100%; object-fit: contain; }
.thumbs .thumb:hover { box-shadow: var(--shadow-sm); }
/* The active thumb shows the same photo as the main image, so it fades back
   ("misty") — the unselected ones stay crisp to invite a click. */
.thumbs .thumb.active, .thumbs .thumb.active:hover { box-shadow: none; opacity: .42; }
.thumbs .thumb .thumb-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.45); color: #fff; font-size: 18px; z-index: 1; }
/* Arrow buttons — hidden entirely when every thumb already fits. */
.thumbs-strip-arrow { position: absolute; top: 50%; width: 36px; height: 36px; margin-top: -20px; border-radius: 50%; border: 1px solid var(--c-line); background: #fff; color: var(--c-ink); display: grid; place-items: center; cursor: pointer; z-index: 2; box-shadow: var(--shadow-sm); opacity: 0; pointer-events: none; visibility: hidden; transition: opacity .2s, visibility .2s, background .2s, color .2s; }
.thumbs-strip-arrow--prev { left: 0; }
.thumbs-strip-arrow--next { right: 0; }
/* Hidden until the pointer is over the thumbnail row. */
.thumbs-strip-wrap:hover .thumbs-strip-arrow:not(.is-hidden) { opacity: .9; pointer-events: auto; visibility: visible; }
.thumbs-strip-arrow:not(.is-hidden):hover { opacity: 1; background: var(--c-accent); color: #fff; border-color: var(--c-accent); }
/* Greyed out at either end — the row stops there instead of wrapping. */
.thumbs-strip-wrap:hover .thumbs-strip-arrow.is-disabled { opacity: .28; pointer-events: none; }
.thumbs-strip-arrow.is-hidden { display: none; }
/* Touch devices have no hover, so keep the arrows visible there. */
@media (hover: none) {
  .thumbs-strip-arrow:not(.is-hidden) { opacity: .9; pointer-events: auto; visibility: visible; }
  .thumbs-strip-arrow.is-disabled { opacity: .28; pointer-events: none; }
}
.pd-title { font-size: 1.8rem; }
.pd-no { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: .95rem; color: var(--c-muted); margin: 4px 0 10px; letter-spacing: .04em; }
.pd-additional-brief {margin: 14px 0;}
.pd-additional-brief .post-body { font-size: 14.5px; line-height: 1.75; }
.pd-additional-brief .post-body > :first-child { margin-top: 0; }
.pd-additional-brief .post-body > :last-child { margin-bottom: 0; }
/* Product variants: size chips + color swatches (rendered only when admin filled them) */
.pd-variants { display: flex; align-items: center; gap: 40px; flex-wrap: wrap; margin: 16px 0; padding: 16px 0; border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); }
.pd-variant { display: flex; align-items: center; gap: 14px; }
.pv-label { font-weight: 600; color: var(--c-ink); }
.pv-chips { display: inline-flex; gap: 10px; flex-wrap: wrap; }
.pv-chip { min-width: 44px; height: 44px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--c-line); border-radius: 999px; font-size: 14px; color: var(--c-ink); background: #fff; }
.pv-dots { display: inline-flex; gap: 12px; flex-wrap: wrap; }
.pv-dot { width: 26px; height: 26px; border-radius: 50%; display: inline-block; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); }
/* Variants linked to a photo are clickable and show a selected state. */
.pv-chip[data-img], .pv-dot[data-img] { cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.pv-chip[data-img]:hover, .pv-dot[data-img]:hover { border-color: var(--c-muted); }
.pv-chip.selected { border-color: var(--c-ink); box-shadow: inset 0 0 0 1px var(--c-ink); }
.pv-dot.selected { box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--c-ink); }
.pd-params { width: 100%; border-collapse: collapse; margin-top: 16px; }
.pd-params td { padding: 10px 12px; border-bottom: 1px solid var(--c-line); font-size: 14px; }
.pd-params td:first-child { color: var(--c-muted); width: 38%; background: var(--c-bg); }

/* Description / Additional Information section */
.pd-detail-section { margin-bottom: 40px; }
.pd-detail-section h3 { font-size: 1.15rem; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--c-line); }
/* Legacy tab styles kept in case other pages still rely on them */
.pd-tab-nav { display: flex; gap: 34px; border-bottom: 1px solid var(--c-line); }
.pd-tab { appearance: none; background: none; border: 0; padding: 0 2px 12px; margin: 0; font: inherit; font-size: 14px; font-weight: 700; letter-spacing: .02em; color: var(--c-muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .15s, border-color .15s; }
.pd-tab:hover { color: var(--c-ink); }
.pd-tab.active { color: var(--c-accent); border-bottom-color: var(--c-accent); }
.pd-tab-pane { display: none; padding-top: 24px; }
.pd-tab-pane.active { display: block; }
.pd-tab-pane .pd-params { margin-top: 0; max-width: 640px; }
.pd-actions { display: flex; gap: 12px; margin-top: 22px; flex-wrap: wrap; }
.spec-list { list-style: none; padding: 0; margin: 0; }
.spec-list li { padding: 10px 0; border-bottom: 1px dashed var(--c-line); display: flex; justify-content: space-between; }
.spec-list li span:first-child { color: var(--c-muted); }

/* Product detail cluster — parallel tabs (scoped so the legacy .pd-tab rules
   above, which are still kept for safety, don't bleed into this component) */
.pd-details-tabs { scroll-margin-top: calc(var(--header-h) + 24px); }
.pd-details-tabs .pd-tabs { display: flex; flex-wrap: wrap; gap: 28px; border-bottom: 1px solid var(--c-line); }
.pd-details-tabs .pd-tab { font-size: 15px; font-weight: 600; color: #5b6b7b; padding: 0 2px 15px; letter-spacing: normal; }
.pd-details-tabs .pd-tab:hover { color: var(--c-ink); }
.pd-details-tabs .pd-tab.active { color: var(--c-ink); border-bottom-color: var(--c-accent); }
.pd-details-tabs .pd-tab:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; border-radius: 2px; }
.pd-details-tabs .pd-panel { margin-top: 30px; }
.pd-details-tabs .pd-panel[hidden] { display: none; }
.pd-details-tabs .pd-panel.pd-detail-section { margin-bottom: 0; }
/* The tab label already names the block, so the in-panel heading would repeat
   it. Hide it visually only — it stays in the DOM for crawlers, screen readers
   and the no-JS / print views, which restore it below. */
.pd-details-tabs .pd-panel-title { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (max-width: 600px) {
  .pd-details-tabs .pd-tabs { gap: 18px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .pd-details-tabs .pd-tab { font-size: 14px; white-space: nowrap; }
}
@media print {
  .pd-details-tabs .pd-tabs { display: none; }
  .pd-details-tabs .pd-panel { display: block !important; margin-top: 18px; }
  .pd-details-tabs .pd-panel[hidden] { display: block !important; }
  .pd-details-tabs .pd-panel-title { position: static; width: auto; height: auto; margin: 0 0 14px; padding-bottom: 10px; overflow: visible; clip: auto; clip-path: none; white-space: normal; border-bottom: 1px solid var(--c-line); }
}

/* ---------- Inquiry popup / modal ---------- */
.modal-mask { position: fixed; inset: 0; background: rgba(6,24,43,.55); display: none; place-items: center; z-index: 100; padding: 20px; }
.modal-mask.open { display: grid; }
.modal { background: #fff; border-radius: var(--radius); max-width: 520px; width: 100%; max-height: 90vh; overflow: auto; padding: 28px; }
.modal h3 { margin-top: 0; }
.modal-close { float: right; cursor: pointer; font-size: 22px; line-height: 1; color: var(--c-muted); background: none; border: none; }

/* ---------- Floating buttons ---------- */
.float-bar { position: fixed; right: 20px; bottom: 90px; display: flex; flex-direction: column; gap: 12px; z-index: 60; }
.float-btn { width: 52px; height: 52px; border-radius: 50%; background: var(--c-primary); color: #fff; display: grid; place-items: center; box-shadow: var(--shadow); cursor: pointer; border: none; transition: background .2s ease; }
.float-btn:hover { background: var(--c-accent); }
.float-btn svg { width: 24px; height: 24px; display: block; }
#backTop { display: none; }
#backTop.show { display: grid; }

/* ---------- Cookie consent ---------- */
.cookie-bar {
  position: fixed; left: 0; right: 0; bottom: 0; background: rgba(10,37,64,.96); color: #dce8f5;
  padding: 14px 20px; display: flex; gap: 14px; align-items: center; justify-content: center; z-index: 70; font-size: 13px; flex-wrap: wrap;
}
.cookie-bar a { color: #8ec5ff; text-decoration: underline; }
.cookie-bar .btn { padding: 8px 16px; }

/* ---------- Footer ---------- */
.site-footer { background: var(--c-primary); color: #b8c7d8; margin-top: 0; }
.footer-top { padding: 54px 20px 30px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 30px; }
.footer-grid h4 { color: #fff; font-size: 15px; margin-bottom: 16px; }
.footer-grid a { color: #b8c7d8; display: block; padding: 5px 0; font-size: 14px; }
.footer-grid a:hover { color: #fff; }
.footer-logo { display: flex; align-items: center; gap: 10px; color: #fff; font-weight: 800; font-size: 1.2rem; margin-bottom: 14px; }
.footer-logo img { height: 34px; }
.footer-social { display: flex; gap: 10px; margin-top: 14px; }
.footer-social a { width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); display: grid; place-items: center; color: #fff; }
.footer-social a:hover { background: var(--c-accent); border-color: var(--c-accent); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.12); padding: 18px 20px; font-size: 13px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.footer-bottom a:hover, .footer-bottom button:hover { color: #fff; }
.footer-friends { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px; }
.footer-friends a { font-size: 13px; }

/* Newsletter subscribe band — light section sitting ABOVE the dark footer, so
   the two read as separate blocks instead of one heavy dark mass. */
.footer-newsletter {
  background: #fff;
  border-top: 1px solid var(--c-line);
  padding: 46px 0 42px;
  background-image: radial-gradient(680px 240px at 8% 30%, rgba(29,126,240,.07), transparent 70%);
}
.footer-newsletter-inner { display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.footer-newsletter-copy { max-width: 460px; }
.footer-newsletter-eyebrow { margin: 0 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--c-accent); display: flex; align-items: center; gap: 10px; }
.footer-newsletter-eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--c-accent); border-radius: 2px; }
.footer-newsletter-copy h3 { color: var(--c-ink); font-size: 24px; margin: 0 0 8px; letter-spacing: -.01em; }
.footer-newsletter-sub { margin: 0; font-size: 14.5px; line-height: 1.6; color: #5b6b7b; }
.footer-newsletter-form { position: relative; }
.footer-newsletter-name-input {
  flex: 1; min-width: 0;
  background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius-sm);
  padding: 11px 18px; font-size: 14.5px; color: var(--c-ink);
  transition: border-color .18s, box-shadow .18s;
}
.footer-newsletter-name-input::placeholder { color: #8a96a3; }
.footer-newsletter-name-input:focus { outline: none; border-color: var(--c-accent); box-shadow: 0 0 0 4px rgba(29,126,240,.16); }
.footer-newsletter-field {
  display: flex; align-items: center; gap: 10px;
  width: min(440px, 100%); margin: 0 0 10px;
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-sm); padding: 5px 16px;
  transition: border-color .18s, box-shadow .18s;
}
.footer-newsletter-field:focus-within { border-color: var(--c-accent); box-shadow: 0 0 0 4px rgba(29,126,240,.16); }
.footer-newsletter-bottom { display: flex; align-items: center; gap: 10px; width: min(440px, 100%); }
.footer-newsletter-icon { width: 18px; height: 18px; flex: none; color: #8a96a3; }
.footer-newsletter-form input[type="email"] { flex: 1; min-width: 0; background: transparent; border: none; color: var(--c-ink); padding: 9px 4px; font-size: 14.5px; }
.footer-newsletter-form input[type="email"]::placeholder { color: #8a96a3; }
.footer-newsletter-form input[type="email"]:focus { outline: none; }
.footer-newsletter-btn { flex: none; border: none; cursor: pointer; background: var(--c-accent); color: #fff; font-weight: 600; font-size: 14px; padding: 11px 22px; border-radius: var(--radius-sm); transition: background .18s, transform .18s; }
.footer-newsletter-btn:hover { background: var(--c-primary); }
.footer-newsletter-btn:active { transform: scale(.97); }
.footer-newsletter-btn:disabled { opacity: .6; cursor: default; }
.footer-newsletter-status { margin: 10px 4px 0; font-size: 13px; min-height: 18px; }
.footer-newsletter-status .is-ok { color: #177d45; }
.footer-newsletter-status .is-err { color: var(--c-danger); }
.footer-newsletter-legal { margin: 12px 0 0; font-size: 12.5px; color: #5b6b7b; }
.footer-newsletter-legal a { color: var(--c-accent); text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 960px) {
  .footer-newsletter-inner { flex-direction: column; align-items: flex-start; gap: 24px; }
}
@media (max-width: 720px) {
  .footer-newsletter { padding: 38px 0; }
  .footer-newsletter-field { width: 100%; }
  .footer-newsletter-bottom { width: 100%; }
}

/* ---------- Tables (admin + lists) ---------- */
.table { width: 100%; border-collapse: collapse; background: #fff; border-radius: var(--radius); overflow: hidden; }
.table th, .table td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--c-line); font-size: 14px; }
.table th { background: var(--c-bg); color: var(--c-ink); font-weight: 700; }
.table tr:hover td { background: #fafcff; }
.badge { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 600; }
.badge.pending { background: #fff3d6; color: #92670a; }
.badge.replied { background: #dff3e6; color: #1a7a43; }
.badge.converted { background: #dcecff; color: #1a52a3; }
.badge.closed { background: #e9edf2; color: #5a6675; }
.badge.ok { background: #dff3e6; color: #1a7a43; }
.badge.off { background: #fdecea; color: #b02a1f; }

/* ---------- Pagination ---------- */
.pager { display: flex; gap: 6px; justify-content: center; margin-top: 30px; flex-wrap: wrap; }
.pager a, .pager span { padding: 8px 13px; border: 1px solid var(--c-line); border-radius: var(--radius-sm); color: var(--c-ink); font-size: 14px; }
.pager a:hover { border-color: var(--c-accent); color: var(--c-accent); }
.pager .current { background: var(--c-accent); color: #fff; border-color: var(--c-accent); }

/* ---------- Article / post ---------- */
.post-body { font-size: 15.5px; line-height: 1.85; color: var(--c-ink); }
.post-body img { border-radius: var(--radius-sm); margin: 16px 0; }
/* Rich-text output (legal pages, news/case/product bodies). The admin editor
   emits semantic tags — lists, quotes and tables need readable defaults so
   authored content is not flattened on the published page. */
.post-body ul, .post-body ol { margin: 0 0 14px 22px; padding: 0; }
.post-body li { margin-bottom: 6px; }
.post-body blockquote { margin: 0 0 14px; padding: 8px 16px; border-left: 3px solid var(--c-line); color: var(--c-muted); }
.post-body table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 14px; }
.post-body th, .post-body td { border: 1px solid var(--c-line); padding: 10px 12px; text-align: left; vertical-align: top; }
.post-body th { background: var(--c-bg); font-weight: 700; }
.post-meta { color: var(--c-muted); font-size: 13px; margin-bottom: 18px; }

/* ---------- FAQ ---------- */
.faq-item { background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius); margin-bottom: 12px; overflow: hidden; scroll-margin-top: calc(var(--header-h) + 24px); }
.faq-q { padding: 16px 20px; font-weight: 700; color: var(--c-ink); cursor: pointer; display: flex; justify-content: space-between; gap: 12px; }
.faq-q .plus { color: var(--c-accent); font-size: 20px; }
.faq-a { padding: 0 20px 16px; display: none; color: var(--c-body); }
.faq-item.open .faq-a { display: block; }
/* Deep-link landing (/faq#faq-12 from site search): mark the targeted question.
   inset shadow = accent rail without shifting the 1px border box. */
.faq-item.is-target { border-color: var(--c-accent); box-shadow: inset 3px 0 0 var(--c-accent); }

/* ---------- Filters / toolbar ---------- */
.toolbar { display: flex; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 24px; flex-wrap: wrap; }
.toolbar .filters { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { padding: 8px 14px; border: 1px solid var(--c-line); border-radius: 20px; font-size: 13px; color: var(--c-body); background: #fff; cursor: pointer; }
.chip:hover, .chip.active { border-color: var(--c-accent); color: var(--c-accent); background: rgba(29,126,240,.06); }

/* ---------- Compare table ---------- */
.compare-table { width: 100%; border-collapse: collapse; }
.compare-table th, .compare-table td { padding: 12px; border: 1px solid var(--c-line); font-size: 14px; }
.compare-table th { background: var(--c-bg); }
.compare-table td .compare-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.compare-table td .compare-chip { display: inline-flex; padding: 4px 10px; border: 1px solid var(--c-line); border-radius: 20px; font-size: 12px; color: var(--c-body); background: #fff; }
.compare-table td .compare-swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.compare-table td .compare-swatch { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--c-body); }
.compare-table td .compare-swatch-dot { width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--c-line); flex: none; }
.compare-table td .compare-desc { font-size: 13px; color: var(--c-body); line-height: 1.55; max-height: 160px; overflow-y: auto; }
.compare-table td .compare-desc p { margin: 0 0 8px; }
.compare-table td .compare-desc p:last-child { margin-bottom: 0; }
.compare-table td .compare-additional-info { margin: 0; font-size: 13px; line-height: 1.5; }
.compare-table td .compare-additional-row { display: flex; gap: 6px; padding: 3px 0; border-bottom: 1px dashed var(--c-line); }
.compare-table td .compare-additional-row:last-child { border-bottom: 0; }
.compare-table td .compare-additional-row dt { flex: none; min-width: 90px; color: var(--c-muted); font-weight: 500; }
.compare-table td .compare-additional-row dd { flex: 1 1 auto; margin: 0; color: var(--c-body); }

/* ---------- Compare floating bar ---------- */
.compare-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  background: #fff;
  border-top: 1px solid var(--c-line);
  box-shadow: 0 -4px 20px rgba(31, 41, 51, 0.10);
  padding: 12px 0;
  transform: translateY(100%);
  transition: transform 0.25s ease, opacity 0.25s ease;
  opacity: 0;
}
.compare-bar.is-visible {
  transform: translateY(0);
  opacity: 1;
}
.compare-bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: var(--container-w, 1280px);
  margin: 0 auto;
  padding: 0 24px;
}
.compare-bar-info {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: var(--c-body);
}
.compare-bar-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  border-radius: 12px;
  background: var(--c-accent);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
}
.compare-bar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.compare-bar .btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
body.has-compare-bar {
  padding-bottom: 72px;
}
@media (max-width: 600px) {
  .compare-bar-inner { flex-wrap: wrap; padding: 0 16px; }
  .compare-bar-info { width: 100%; justify-content: center; }
  .compare-bar-actions { width: 100%; justify-content: center; }
}

/* ---------- Misc ---------- */
.divider { height: 1px; background: var(--c-line); margin: 30px 0; }
/* minmax(0,…) so no unbreakable content inside a column can widen the track
   and force horizontal page scroll on mobile. */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 30px; }
.info-list { list-style: none; padding: 0; margin: 0; }
.info-list li { padding: 12px 0; border-bottom: 1px solid var(--c-line); display: flex; gap: 12px; align-items: flex-start; }
.info-list .ic { color: var(--c-accent); margin-top: 2px; display: inline-flex; align-items: center; flex: none; }
.info-list .ic svg { display: block; }
.office-row { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--c-line); }
/*.office-row:last-child { border-bottom: 0; }*/
.office-row .office-ic { width: 42px; height: 42px; border-radius: 10px; margin-top:2px;background: rgba(29,126,240,.1); color: var(--c-accent); display: grid; place-items: center; flex: none; }
.office-row .office-ic svg { display: block; }
.map-box { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--c-line); background: var(--c-bg); }
/* Height comes from the wrapper's aspect-ratio (set inline where used); a
   min-height here would force width = min-height * 16/9 (~533px) and blow out
   the viewport on mobile (contact page horizontal scroll). */
.map-box iframe { width: 100%; height: 100%; border: none; display: block; }
.doc-card { display: flex; align-items: center; gap: 14px; padding: 16px; border: 1px solid var(--c-line); border-radius: var(--radius); background: #fff; }
.doc-card .ic { width: 46px; height: 46px; border-radius: 10px; background: rgba(29,126,240,.1); color: var(--c-accent); display: grid; place-items: center; font-size: 20px; flex-shrink: 0; }
.doc-card .ic svg { display: block; }
.i-arrow { vertical-align: -3px; margin-left: 2px; }
/* Off-screen but still read by assistive tech. Used by the products listing
   live region: front.js swaps the grid in place, so there is no page load for
   a screen reader to read the new result count from. */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- Responsive (spec breakpoints: 1024 / 768 / 600) ---------- */
@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .layout-2 { grid-template-columns: 1fr; }
  .sidebar { position: static; }
  .pd-grid { grid-template-columns: 1fr; }
  /* Stacked layout: cap the gallery so the thumb strip does not stretch into
     oversized squares across the full row. */
  .gallery { max-width: 560px; }
  .contact-grid { grid-template-columns: minmax(0, 1fr); }
  .stat-grid { grid-template-columns: repeat(2,1fr); }
  .main-nav { display: none; position: absolute; top: var(--header-h); left: 0; right: 0; flex-direction: column; background: #fff; padding: 12px; box-shadow: var(--shadow); border-top: 1px solid var(--c-line); }
  .main-nav.open { display: flex; }
  .menu-toggle { display: grid; }
  /* Keep the icon cluster inside the viewport on narrow screens. */
  .header-inner { gap: 12px; }
  .logo { gap: 8px; min-width: 0; }
  .logo img { height: 32px; flex: none; }
  .logo .hs-logo { font-size: 33px; }
  /* The logo artwork already contains the wordmark — drop the duplicated text. */
  .logo span { display: none; }
  .header-tools { flex: none; gap: 8px; margin-left: auto; }
}
@media (max-width: 768px) {
  .grid-4 { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .compare-table { display: block; overflow-x: auto; white-space: nowrap; }
  .pd-sticky { padding: 8px 10px; }
  .pd-sticky .btn { padding: 9px 11px; font-size: 13px; }
  /* Narrow screens: 4 thumbs per view so they stay tappable. */
  .thumbs .thumb { flex: 0 0 calc((100% - 36px) / 4); }
  .thumbs-strip-arrow { width: 32px; height: 32px; margin-top: -18px; }
}
@media (max-width: 600px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .hero-content h1 { font-size: 1.9rem; }
  .stat-grid { grid-template-columns: 1fr 1fr; }
}

/* ---- Share row ---- */
.share-row { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:18px 0; }
.share-label { font-weight:600; color:var(--c-ink); }
.share-row .btn { font-size:13px; padding:6px 12px; }

/* ---- Product image lightbox ---- */
.lightbox { position:fixed; inset:0; background:rgba(10,37,64,0.92); display:flex; align-items:center; justify-content:center; z-index:9999; cursor:zoom-out; padding:24px; }
.lightbox img { max-width:92vw; max-height:92vh; border-radius:var(--radius); box-shadow:0 20px 60px rgba(0,0,0,0.5); }

/* ---- Sticky product action bar ---- */
.pd-sticky { position:fixed; left:0; right:0; bottom:0; background:#fff; border-top:1px solid var(--c-line); box-shadow:0 -6px 24px rgba(10,37,64,0.1); padding:10px 16px; display:none; z-index:900; transform:translateY(100%); transition:transform .25s ease; }
.pd-sticky.show { display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:10px; transform:translateY(0); }
.pd-sticky .btn { margin:0; }

/* ---- Announcement bar (single definition — earlier base rule removed as dead code) ---- */
.announce { display:flex; align-items:center; justify-content:center; gap:14px; background:var(--c-primary); color:#fff; font-size:14px; padding:10px 16px; text-align:center; }
.announce a { color:var(--c-accent-2); text-decoration:underline; }
.announce-close { background:none; border:0; color:#fff; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; opacity:.85; }
.announce-close:hover { opacity:1; }
.announce-close svg { display:block; }

/* ---- Responsive: spec breakpoints (1024 / 1440) ---- */
@media (min-width: 1440px) {
  .container { max-width: 1320px; }
}

/* ---- Partner logo wall ---- */
.partner-logo { display:inline-flex; align-items:center; justify-content:center; padding:14px 22px; background:#fff; border:1px solid var(--c-line); border-radius:var(--radius); min-height:64px; transition:box-shadow .2s, transform .2s; }
.partner-logo:hover { box-shadow:var(--shadow); transform:translateY(-2px); }
.partner-logo img { max-height:34px; width:auto; opacity:.85; }
.partner-logo span { font-weight:700; color:var(--c-ink); }

/* About · Who We Are: profile image fills left column */
.about-profile-img { width: 100%; height: 100%; max-height: 300px; object-fit: cover; border-radius: var(--radius); }

/* About · Our Factory: rotating image gallery (right column) */
.factory-carousel { position: relative; width: 100%; aspect-ratio: 16 / 8; border-radius: var(--radius); overflow: hidden; background: var(--c-bg); }
.factory-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s ease; }
.factory-slide.active { opacity: 1; }
.fc-dots { position: absolute; bottom: 12px; left: 0; right: 0; display: flex; gap: 8px; justify-content: center; z-index: 2; }
.fc-dot { width: 9px; height: 9px; border-radius: 50%; border: 0; padding: 0; background: rgba(255, 255, 255, .55); cursor: pointer; box-shadow: 0 0 0 1px rgba(0, 0, 0, .18); }
.fc-dot.active { background: #fff; }

/* Production Process: detail page */
.process-video { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: #000; margin-top: 4px; }
.process-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.process-video video { width: 100%; height: 100%; display: block; object-fit: contain; }
.process-nav { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--c-line); }
.process-nav-link { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--c-line); border-radius: 999px; font-size: 13px; color: var(--c-ink); text-decoration: none; transition: border-color .2s, background .2s; }
.process-nav-link:hover { border-color: var(--c-primary); background: rgba(47, 109, 240, .05); }
.process-nav-no { font-weight: 800; color: var(--c-primary); }

/* Production Process: process index. Text-only cards in a responsive grid —
   each card is a link to the matching detail page. Media (cover image, video)
   lives on that page, never in the grid. */
.process-section-title { margin: 0 0 18px; color: var(--c-ink); font-size: 22px; }
.process-section-hint { margin: -8px 0 18px; color: var(--c-muted); font-size: 14px; }
.process-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; align-items: stretch; }
.process-card { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 18px 20px 16px; background: var(--c-card, #fff); border: 1px solid var(--c-line); border-radius: var(--radius); color: inherit; text-decoration: none; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.process-card:hover,
.process-card:focus-visible { border-color: var(--c-primary); box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.process-card-head { display: flex; align-items: center; gap: 10px; }
.process-card-no { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 999px; background: var(--c-primary); color: #fff; font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; transition: background .2s ease; }
.process-card:hover .process-card-no,
.process-card:focus-visible .process-card-no { background: var(--c-accent); }
.process-card-title { font-size: 16px; font-weight: 600; line-height: 1.35; color: var(--c-ink); }
.process-card-summary { font-size: 13px; line-height: 1.6; color: var(--c-muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.process-card-more { margin-top: auto; padding-top: 4px; font-size: 12px; font-weight: 700; letter-spacing: .02em; color: var(--c-accent); display: inline-flex; align-items: center; gap: 6px; }
.process-card-arrow { transition: transform .2s ease; }
.process-card:hover .process-card-arrow,
.process-card:focus-visible .process-card-arrow { transform: translateX(3px); }
.process-panels-src { display: none; }
.process-panel-head { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 18px; }
.process-panel-cover { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--c-line); }
.process-panel-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.process-panel-intro h3 { margin: 0 0 8px; color: var(--c-ink); font-size: 22px; }
.process-panel-intro p { color: var(--c-muted); margin: 0 0 14px; }
.process-panel-desc { margin-bottom: 22px; }

.flowcharts-section { margin-top: 46px; }
.flowchart-grid { display: grid; grid-template-columns: 1fr; gap: 26px; }
.flowchart-card { background: var(--c-card, #fff); border: 1px solid var(--c-line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; }
.flowchart-media { aspect-ratio: 16 / 9; background: var(--c-bg-soft); overflow: hidden; }
.flowchart-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.flowchart-body { padding: 22px 24px 24px; flex: 1; display: flex; flex-direction: column; }
.flowchart-head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; margin-bottom: 6px; }
.flowchart-title { margin: 0; color: var(--c-ink); font-size: 19px; }
.flowchart-steps-count { font-size: 12px; font-weight: 700; color: var(--c-primary); background: var(--c-bg-soft); border: 1px solid var(--c-line); padding: 3px 10px; border-radius: 999px; }
.flowchart-desc { font-size: 14px; color: var(--c-muted); margin-bottom: 16px; }
.flowchart-desc p:last-child { margin-bottom: 0; }

/* Process Flows — styled to match the homepage "How It Works" stepper: a rail
   runs through numbered circular nodes, each with its title underneath. Steps
   carry no per-step summary, which keeps the sequence compact; each step is a
   button that opens the detail modal. */
/* No horizontal padding: .flow-steps is the scroll container, so a side padding
   shrinks the content box while .flow-steps-inner still asks for min-width:100%
   of it — the 11 steps then miss by a few px and a bogus scrollbar appears
   (Hard Enamel overflowed by 4px). Steps carry their own 0 6px gutter. */
.flow-steps { margin-top: auto; padding: 16px 0 4px; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
.flow-steps::-webkit-scrollbar { height: 6px; }
.flow-steps::-webkit-scrollbar-thumb { background: var(--c-line); border-radius: 999px; }
/* The inner track sizes to its content but never narrower than the card, so a
   short flow spreads evenly (like the homepage) and a long one scrolls. */
.flow-steps-inner { position: relative; display: flex; align-items: flex-start; width: max-content; min-width: 100%; }
.flow-rail { position: absolute; top: 18.5px; left: 0; right: 0; height: 3px; background: #e5e7eb; border-radius: 3px; pointer-events: none; }
.flow-step { position: relative; z-index: 1; flex: 1 0 auto; min-width: 94px; max-width: 150px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 0 6px; background: none; border: 0; font: inherit; color: inherit; cursor: pointer; }
.flow-step-badge { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; background: #fff; border: 2px solid var(--c-accent); color: var(--c-accent); font-weight: 700; font-size: 15px; display: inline-flex; align-items: center; justify-content: center; transition: background .25s ease, color .25s ease, transform .25s ease, box-shadow .25s ease; }
.flow-step:hover .flow-step-badge,
.flow-step:focus-visible .flow-step-badge { background: var(--c-accent); color: #fff; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(29,126,240,.25); }
.flow-step-name { font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--c-ink); transition: color .25s ease; }
.flow-step:hover .flow-step-name,
.flow-step:focus-visible .flow-step-name { color: var(--c-accent); }
/* Fork step ("Die Casting OR Die Struck"): the step is a container, not one big
   button, because each process name is its own click target. The names sit at
   equal weight with an "OR" divider between them — this used to be a 10px grey
   footnote nobody noticed. */
.flow-step.is-fork { cursor: default; }
.flow-step.is-fork:hover .flow-step-badge,
.flow-step.is-fork:focus-within .flow-step-badge { background: #fff; color: var(--c-accent); transform: none; box-shadow: none; }
.flow-step.is-fork:hover .flow-step-name { color: var(--c-ink); }
.flow-step-opt { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-align: inherit; border-radius: 4px; }
.flow-step-opt:hover,
.flow-step-opt:focus-visible { color: var(--c-accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.flow-step-opt:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; }
.flow-step-alt { display: block; font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--c-ink); }
.flow-step-alt .or-sep { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 0 0 2px; font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--c-accent); }
.flow-step-alt .or-sep::before,
.flow-step-alt .or-sep::after { content: ''; flex: 0 1 18px; height: 1px; background: currentColor; opacity: .45; }
.flow-step-flag { font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--c-muted); padding: 1px 8px; border-radius: 999px; border: 1px solid var(--c-line); }
.flow-step.is-optional .flow-step-badge { border-style: dashed; }
/* Process detail modal (opened from a flow step) */
.process-modal { max-width: 760px; }
.process-modal-body .process-panel { padding: 0; }

.process-compare-section { margin-top: 46px; }
.process-compare-table-wrap { overflow-x: auto; border: 1px solid var(--c-line); border-radius: var(--radius); background: var(--c-card, #fff); }
.process-compare-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.process-compare-table th,
.process-compare-table td { padding: 14px 18px; border-bottom: 1px solid var(--c-line); text-align: left; vertical-align: top; }
.process-compare-table th { background: var(--c-bg-soft); color: var(--c-ink); font-weight: 700; }
.process-compare-table td { color: var(--c-muted); }
.process-compare-table tbody tr:last-child td { border-bottom: 0; }
.process-compare-table tbody tr:hover td { background: var(--c-bg-soft); }

@media (max-width: 767px) {
  .process-cards { grid-template-columns: 1fr; gap: 12px; }
  .process-card { padding: 16px 16px 14px; }
  .process-card-title { font-size: 15px; }
  .process-panel-head { grid-template-columns: 1fr; }
}

/* Production Process: detail page intro */
.proc-intro { margin-bottom: 30px; }
.proc-intro-cover { width: 100%; height: auto; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--c-line); margin-bottom: 16px; }
.proc-intro-body { margin-top: 0; }
.proc-others { margin-top: 30px; }
.proc-others h3 { margin: 0 0 12px; color: var(--c-ink); font-size: 16px; }

/* Person avatars. Whether a Gravatar exists is decided server-side
   (gravatar_status()), so the markup ships exactly one layer: the <img> alone
   when the avatar exists (wrapper already carries .is-loaded), or the initials
   alone — with no <img> and therefore no 404 — when it does not. The rules
   below additionally guard the rare "verdict unknown" case, where both nodes
   are emitted and JS has to settle it. */
.avatar {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  overflow: hidden;
  background: var(--c-primary, #2f6f4f);
  color: #fff;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  flex-shrink: 0;
  vertical-align: middle;
}
.avatar-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.avatar-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  /* Transparent until .is-loaded. The class is set by the server when the
     avatar is confirmed to exist (photo paints immediately, no JS involved) and
     by JS only in the unknown case. Still NOT display:none: a display:none
     image has no layout box, so in the unknown case the browser would never
     fetch it and the initials would win forever. Opacity keeps the box (and
     the request) alive.
     No transition on purpose: the initials node is removed the moment the
     image loads, so a fade would leave a frame with neither layer visible
     (letters gone, picture still transparent). Instant swap = exactly one of
     the two is ever painted. */
  opacity: 0;
}
.avatar.is-loaded .avatar-img { opacity: 1; }
/* A loaded gravatar REPLACES the initials. JS removes the fallback node; this
   rule is the safety net (covers the pre-JS window and any stale script) so the
   two layers can never be painted at the same time. In the server-decided
   branches there is only ever one layer to begin with. */
.avatar.is-loaded .avatar-fallback { display: none; }

/* Self-hosted Inter (Latin + Latin-Ext, weights 400/500/600/700). No external font CDN — CSP-clean. */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('../assets/fonts/inter-latin-400.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('../assets/fonts/inter-latin-ext-400.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('../assets/fonts/inter-latin-500.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('../assets/fonts/inter-latin-ext-500.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('../assets/fonts/inter-latin-600.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('../assets/fonts/inter-latin-ext-600.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('../assets/fonts/inter-latin-700.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('../assets/fonts/inter-latin-ext-700.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}

/* Brand logo icon font (IcoMoon export, /assets/fonts/logo). Single glyph
   \e900 = full HONSENG wordmark. font-display:block holds the glyph invisible
   (instead of flashing a fallback font) for the brief load window. Only
   woff/ttf ships — no woff2 was generated by the export. */
@font-face{font-family:'honseng';font-style:normal;font-weight:400;font-display:block;src:url('../assets/fonts/logo/hs.woff') format('woff'),url('../assets/fonts/logo/hs.ttf') format('truetype')}

/* ---------- Homepage "How It Works" stepper (simplified process.html) ---------- */
/* Brand-consistent auto-advancing progress bar: a thin rail with a blue fill +
   moving dot that loops, highlighting each step as the fill passes it. The
   animation is driven by front.js (CSP-safe, no inline <script>). */
.process-stepper { position: relative; padding: 25px 0; }
/* The rail runs THROUGH the numbered nodes: it is absolutely positioned at the
   node centres (25px padding + 20px half node - 1.5px half rail), and the
   opaque white nodes are layered on top so the blue fill + dot pass behind
   them, lighting each step up as it goes. */
.process-track {
  position: absolute;
  top: 43.5px;
  left: 0;
  right: 0;
  height: 3px;
  background: #e5e7eb;
  border-radius: 3px;
}
.process-fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background: var(--c-accent);
  border-radius: 3px;
  transition: width .04s linear;
}
.process-dot {
  position: absolute;
  right: -5px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  background: var(--c-accent);
  border-radius: 50%;
  box-shadow: 0 0 4px rgba(29, 126, 240, .4);
}
/* Step nodes: numbered circle + title + subtitle (previous layout), with the
   active state driven by the front.js auto-progress loop (blue dot passes by). */
.process-steps {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}
.process-step {
  flex: 1;
  text-align: center;
  padding: 0 6px;
}
.process-step__node {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--c-accent);
  color: var(--c-accent);
  font-weight: 700;
  font-size: 15px;
  transition: transform .25s ease, background .25s ease, color .25s ease, box-shadow .25s ease;
}
.process-step__body {
  margin-top: 14px;
  opacity: .55;
  transition: opacity .3s ease;
}
.process-step__title { font-size: 16px; margin: 0 0 4px; color: var(--c-ink); transition: color .3s ease; }
.process-step__desc { color: var(--c-muted); font-size: 13px; line-height: 1.5; margin: 0; }
/* active state: blue dot is over this step -> fill the node + brighten the text */
.process-step.active .process-step__node {
  background: var(--c-accent);
  color: #fff;
  box-shadow: 0 6px 16px rgba(29, 126, 240, .25);
}
.process-step.active .process-step__body { opacity: 1; }
.process-step.active .process-step__title { color: var(--c-accent); }
/* narrow screens: shrink node + text, keep the rail horizontal */
@media (max-width: 640px) {
  .process-step { padding: 0 2px; }
  /* smaller nodes -> the rail follows the new node centre (25px + 15px - 1.5px) */
  .process-track { top: 38.5px; }
  .process-step__node { width: 30px; height: 30px; font-size: 13px; }
  .process-step__title { font-size: 12px; }
  .process-step__desc { font-size: 10px; }
}


/* ---------- Color Chart (single page) ---------- */
.color-cat { margin: 28px 0 14px; font-size: 1.2rem; }
.color-grid { gap: 16px; }
.color-swatch {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 10px 12px; background: var(--c-card); border: 1px solid var(--c-line);
  border-radius: var(--radius); cursor: pointer; font: inherit; color: var(--c-ink);
  text-align: left; transition: .18s; box-shadow: var(--shadow-sm);
}
.color-swatch:hover { border-color: var(--c-accent); transform: translateY(-2px); box-shadow: var(--shadow); }
.color-swatch.copied { border-color: var(--c-ok); }
.color-chip { width: 36px; height: 36px; border-radius: 6px; flex: 0 0 auto; border: 1px solid rgba(0,0,0,.12); }
.color-meta { display: flex; flex-direction: column; line-height: 1.35; }
.color-meta strong { font-size: 14px; }
.color-meta code { font-size: 12px; color: var(--c-muted); letter-spacing: .03em; }
.color-pick { display: inline-flex; align-items: center; gap: 8px; }
.color-pick input[type="color"] { width: 40px; height: 36px; padding: 0; border: 1px solid var(--c-line); border-radius: var(--radius-sm); background: none; cursor: pointer; }

/* ---------- PANTONE reference group ---------- */
.color-cat__count {
  font-size: .72rem; font-weight: 600; color: var(--c-muted);
  background: var(--c-soft); padding: 2px 8px; border-radius: 999px;
  margin-left: 8px; vertical-align: middle; letter-spacing: .02em;
}
.color-note {
  font-size: 13.5px; line-height: 1.7; color: var(--c-muted);
  background: var(--c-soft); border: 1px solid var(--c-line);
  border-radius: var(--radius); padding: 14px 16px; margin: 0 0 18px;
}
.pantone-heading {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin: 32px 0 18px;
}
.pantone-heading .color-cat { margin: 0; }
.pantone-search {
  flex: 0 1 360px; min-width: 220px; max-width: 420px;
  padding: 10px 14px; font: inherit; color: var(--c-ink);
  background: var(--c-card); border: 1px solid var(--c-line);
  border-radius: var(--radius); transition: border-color .18s, box-shadow .18s;
}
.pantone-search:focus {
  outline: none; border-color: var(--c-accent);
  box-shadow: 0 0 0 3px var(--accent-ring, rgba(29,126,240,.18));
}
.pantone-hint { font-size: 12.5px; color: var(--c-muted); }

/* Dense, fully responsive swatch grid — adapts from desktop to phone */
.pantone-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
}
.pantone-grid .color-swatch {
  flex-direction: column; align-items: stretch; gap: 0;
  padding: 0; overflow: hidden;
  min-width: 0;          /* let the grid track shrink around long names like "Pantone Orange 021 C" */
}
.pantone-grid .color-chip {
  width: 100%; height: 64px; border-radius: 0; border: none;
  border-bottom: 1px solid rgba(0,0,0,.08);
}
.pantone-grid .color-meta {
  flex-direction: column; gap: 2px; padding: 8px 10px 10px;
  min-width: 0;           /* let the flex column shrink so the <strong>/<code> wrap, not push the track wider */
}
.pantone-grid .color-meta strong { font-size: 12px; line-height: 1.3; word-break: break-word; }
.pantone-grid .color-meta code { font-size: 11px; }
.pantone-empty { color: var(--c-muted); padding: 18px 0; }

/* Phones: shrink cells so the grid still fits one-handed */
@media (max-width: 480px) {
  .pantone-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
  .pantone-grid .color-chip { height: 52px; }
  .pantone-toolbar { flex-direction: column; align-items: stretch; }
  .pantone-search { max-width: none; }
  .pantone-hint { text-align: center; }
}
/* Tablets: a touch more breathing room */
@media (min-width: 481px) and (max-width: 1024px) {
  .pantone-grid { grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); }
}

/* ---------- Accessories & Packaging (single page option cards) ---------- */
.opt-group-title { margin: 0 0 18px; font-size: 1.2rem; }
.opt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 16px;
}
.opt-card {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 16px 12px; background: var(--c-card); border: 1px solid var(--c-line);
  border-radius: var(--radius); text-align: center; transition: .18s;
}
.opt-card:hover { border-color: var(--c-accent); transform: translateY(-2px); }
.opt-card__img {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 88px; background: #fff;
  overflow: hidden;
}
.opt-card__img img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.opt-card__ph { font-size: 2rem; font-weight: 700; color: var(--c-muted); }
.opt-card__name { font-size: 14px; font-weight: 600; color: var(--c-ink); line-height: 1.35; }
.opt-card__desc { font-size: 12px; color: var(--c-muted); line-height: 1.45; }
.opt-note { color: var(--c-muted); margin: 0 0 14px; }
/* Product-detail sub-group: a small bold group label above its card grid */
.opt-sub__label { font-size: 14px; font-weight: 700; color: var(--c-ink); margin-bottom: 10px; }
/* Product-detail variant: every group's cards on a single row (no wrapping);
   cards shrink equally regardless of count (10 / 8 / 5 ... all fit one line). */
.opt-grid--row { display: flex; flex-wrap: nowrap; }
.opt-grid--row .opt-card { flex: 1 1 0; min-width: 0; padding: 12px 8px; gap: 6px; }
.opt-grid--row .opt-card__img { height: 64px; }
.opt-grid--row .opt-card__name { font-size: 12.5px; }
@media (max-width: 768px) {
  /* Too narrow for 10+ cards on one line: fall back to the wrapping grid. */
  .opt-grid--row { display: grid; flex-wrap: initial; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
  .opt-grid--row .opt-card { padding: 12px; gap: 8px; }
  .opt-grid--row .opt-card__img { height: 68px; }
  .opt-grid--row .opt-card__name { font-size: 14px; }
}
@media (max-width: 480px) {
  .opt-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
  .opt-card__img { height: 68px; }
}

/* ---- Shipment tracking (17TRACK YQV5 classic widget) ---- */
#YQContainer {
  position: relative; /* containing block for our own .track-loading panel below */
  margin-top: 20px;
}
/* CN visitors: extcall.17track.net pins a promo banner (ads.17track.net
   zoneid=12) + a ~36px footer bar to the bottom of its iframe, ignoring the
   rmad flag. The iframe is kept at its full SDK-reported height (shrinking it
   re-pins the banner), so front.js clips the bottom band off by fixing this
   container's height (set from front.js, breakpoint-based) and cutting the
   overflow here — the pinned band falls outside the visible box entirely. */
#YQContainer.cn-clipped {
  overflow: hidden;
  /* The widget's own bottom border sits inside the clipped-off band (it lives
     at the pinned footer bar's bottom edge), so the result box would end open.
     Close it with our own line; only applied once a query has rendered (the
     class is added by front.js together with the fixed height). */
  border-bottom: 1px solid var(--c-line);
}
#YQContainer iframe {
  display: block; /* kill inline baseline gap under the iframe */
  width: 100%;
  border: 0;
}
/* Mirror legacy /tracking/supports.asp: hide the widget's promo ad + 17TRACK
   logo header if the SDK renders them in-page (harmless no-op for the cross-
   origin iframe, where YQ_RmAD / YQ_RmHeader already strip them server-side). */
.yq-panel-logo,
.tracklist-da {
  display: none !important;
}
/* Our own loading panel, shown from submit until 17TRACK posts the resolved
   content height. 17TRACK's loader lives inside the cross-origin iframe and is
   centred in the frame's INTERNAL viewport (308px), while a CN query only
   reveals the top (frameH - band) = 168px of that frame - so the widget's
   spinner landed at the bottom edge of the visible box rather than its centre.
   A cross-origin node cannot be moved, so we cover the box with this centred
   panel instead (created in front.js showTrackLoader). It is opaque, which also
   keeps the CN promo band hidden while the panel is up. */
.track-loading {
  position: absolute;
  inset: 0;
  z-index: 2; /* above the iframe (static, z-index auto) */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: #fff;
  color: var(--c-muted);
  font-size: 14px;
}
/* An author `display` always beats the UA sheet's [hidden]{display:none}, so the
   hidden state must be re-declared here or the panel would never disappear. */
.track-loading[hidden] { display: none; }
.track-spinner {
  width: 26px;
  height: 26px;
  border: 2px solid var(--c-line);
  border-top-color: var(--c-accent);
  border-radius: 50%;
  animation: trackSpin .8s linear infinite;
}
@keyframes trackSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .track-spinner { animation-duration: 2.4s; }
}



/* === extracted inline-style utilities (auto) === */
.u--webkit-box-orient-vertical { -webkit-box-orient:vertical; }
.u--webkit-line-clamp-3 { -webkit-line-clamp:3; }
.u-align-items-baseline { align-items:baseline; }
.u-align-items-center { align-items:center; }
.u-align-items-flex-end { align-items:flex-end; }
.u-align-self-center { align-self:center; }
.u-aspect-ratio-16-9 { aspect-ratio:16/9; }
.u-background-f8fafc { background:#f8fafc; }
.u-background-fff { background:#fff; }
.u-background-fff6e6 { background:#fff6e6; }
.u-background-none { background:none; }
.u-background-rgba-29-126-240-1 { background:rgba(29,126,240,.1); }
.u-background-rgba-47-109-240-06 { background:rgba(47,109,240,.06); }
.u-background-var-c-accent { background:var(--c-accent); }
.u-background-var-c-bg { background:var(--c-bg); }
.u-border-0 { border:0; }
.u-border-1px-solid-var-c-line { border:1px solid var(--c-line); }
.u-border-bottom-1px-solid-var-c-line { border-bottom:1px solid var(--c-line); }
.u-border-radius-10px { border-radius:10px; }
.u-border-radius-4px { border-radius:4px; }
.u-border-radius-6px { border-radius:6px; }
.u-border-radius-8px { border-radius:8px; }
.u-border-radius-var-radius { border-radius:var(--radius); }
.u-color-16a34a { color:#16a34a; }
.u-color-1d7ef0 { color:#1d7ef0; }
.u-color-b8c7d8 { color:#b8c7d8; }
.u-color-d97706 { color:#d97706; }
.u-color-d98a00 { color:#d98a00; }
.u-color-dc2626 { color:#dc2626; }
.u-color-fff { color:#fff; }
.u-color-var-c-accent { color:var(--c-accent); }
.u-color-var-c-danger { color:var(--c-danger); }
.u-color-var-c-ink { color:var(--c-ink); }
.u-color-var-c-muted { color:var(--c-muted); }
.u-cursor-pointer { cursor:pointer; }
.u-display-block { display:block; }
.u-display-flex { display:flex; }
.u-display-grid { display:grid; }
.u-display-inline { display:inline; }
.u-display-inline-flex { display:inline-flex; }
.u-display-none { display:none; }
.u-display-webkit-box { display:-webkit-box; }
.u-flex-1 { flex:1; }
.u-flex-wrap-wrap { flex-wrap:wrap; }
.u-font-family-monospace { font-family:monospace; }
.u-font-inherit { font:inherit; }
.u-font-size-1-05rem { font-size:1.05rem; }
.u-font-size-1-1rem { font-size:1.1rem; }
.u-font-size-1-4rem { font-size:1.4rem; }
.u-font-size-11px { font-size:11px; }
.u-font-size-12px { font-size:12px; }
.u-font-size-13-5px { font-size:13.5px; }
.u-font-size-13px { font-size:13px; }
.u-font-size-14px { font-size:14px; }
.u-font-size-15px { font-size:15px; }
.u-font-size-18px { font-size:18px; }
.u-font-size-1rem { font-size:1rem; }
.u-font-size-5rem { font-size:5rem; }
.u-font-weight-400 { font-weight:400; }
.u-font-weight-600 { font-weight:600; }
.u-font-weight-700 { font-weight:700; }
.u-font-weight-800 { font-weight:800; }
.u-gap-10px { gap:10px; }
.u-gap-12px { gap:12px; }
.u-gap-14px { gap:14px; }
.u-gap-16px { gap:16px; }
.u-gap-18px { gap:18px; }
.u-gap-22px { gap:22px; }
.u-gap-30px { gap:30px; }
.u-gap-6px { gap:6px; }
.u-gap-8px { gap:8px; }
.u-grid-column-1-1 { grid-column:1/-1; }
.u-grid-template-columns-1fr-1fr { grid-template-columns:1fr 1fr; }
.u-height-28px { height:28px; }
.u-height-34px { height:34px; }
.u-height-36px { height:36px; }
.u-height-40px { height:40px; }
.u-height-42px { height:42px; }
.u-height-44px { height:44px; }
.u-height-46px { height:46px; }
.u-height-48px { height:48px; }
.u-height-60px { height:60px; }
.u-height-75px { height:75px; }
.u-height-80px { height:80px; }
.u-justify-content-center { justify-content:center; }
.u-justify-content-space-between { justify-content:space-between; }
.u-left-9999px { left:-9999px; }
.u-line-height-1 { line-height:1; }
.u-line-height-48px { line-height:48px; }
.u-list-style-none { list-style:none; }
.u-margin-0 { margin:0; }
.u-margin-bottom-0 { margin-bottom:0; }
.u-margin-bottom-10px { margin-bottom:10px; }
.u-margin-bottom-12px { margin-bottom:12px; }
.u-margin-bottom-14px { margin-bottom:14px; }
.u-margin-bottom-16px { margin-bottom:16px; }
.u-margin-bottom-18px { margin-bottom:18px; }
.u-margin-bottom-20px { margin-bottom:20px; }
.u-margin-bottom-22px { margin-bottom:22px; }
.u-margin-bottom-24px { margin-bottom:24px; }
.u-margin-bottom-4px { margin-bottom:4px; }
.u-margin-bottom-6px { margin-bottom:6px; }
.u-margin-bottom-8px { margin-bottom:8px; }
.u-margin-left-0 { margin-left:0; }
.u-margin-left-10px { margin-left:10px; }
.u-margin-left-6px { margin-left:6px; }
.u-margin-left-8px { margin-left:8px; }
.u-margin-left-auto { margin-left:auto; }
.u-margin-right-0 { margin-right:0; }
.u-margin-right-14px { margin-right:14px; }
.u-margin-right-6px { margin-right:6px; }
.u-margin-right-auto { margin-right:auto; }
.u-margin-top-0 { margin-top:0; }
.u-margin-top-10px { margin-top:10px; }
.u-margin-top-12px { margin-top:12px; }
.u-margin-top-14px { margin-top:14px; }
.u-margin-top-16px { margin-top:16px; }
.u-margin-top-18px { margin-top:18px; }
.u-margin-top-20px { margin-top:20px; }
.u-margin-top-24px { margin-top:24px; }
.u-margin-top-26px { margin-top:26px; }
.u-margin-top-28px { margin-top:28px; }
.u-margin-top-30px { margin-top:30px; }
.u-margin-top-40px { margin-top:40px; }
.u-margin-top-4px { margin-top:4px; }
.u-margin-top-50px { margin-top:50px; }
.u-margin-top-6px { margin-top:6px; }
.u-margin-top-8px { margin-top:8px; }
.u-max-width-120px { max-width:120px; }
.u-max-width-200px { max-width:200px; }
.u-max-width-240px { max-width:240px; }
.u-max-width-320px { max-width:320px; }
.u-max-width-520px { max-width:520px; }
.u-max-width-560px { max-width:560px; }
.u-max-width-640px { max-width:640px; }
.u-max-width-860px { max-width:860px; }
.u-max-width-880px { max-width:880px; }
.u-max-width-920px { max-width:920px; }
.u-min-height-120px { min-height:120px; }
.u-min-height-160px { min-height:160px; }
.u-min-height-200px { min-height:200px; }
.u-min-height-220px { min-height:220px; }
.u-min-height-90px { min-height:90px; }
.u-min-width-0 { min-width:0; }
.u-min-width-220px { min-width:220px; }
.u-object-fit-contain { object-fit:contain; }
.u-opacity-8 { opacity:.8; }
.u-overflow-auto { overflow:auto; }
.u-overflow-hidden { overflow:hidden; }
.u-overflow-x-auto { overflow-x:auto; }
.u-padding-0 { padding:0; }
.u-padding-16px { padding:16px; }
.u-padding-18px { padding:18px; }
.u-padding-20px { padding:20px; }
.u-padding-22px { padding:22px; }
.u-padding-24px { padding:24px; }
.u-padding-bottom-0 { padding-bottom:0; }
.u-padding-bottom-34px { padding-bottom:34px; }
.u-padding-bottom-5px { padding-bottom:5px; }
.u-padding-bottom-8px { padding-bottom:8px; }
.u-padding-bottom-90px { padding-bottom:90px; }
.u-padding-left-0 { padding-left:0; }
.u-padding-left-14px { padding-left:14px; }
.u-padding-left-20px { padding-left:20px; }
.u-padding-left-22px { padding-left:22px; }
.u-padding-right-0 { padding-right:0; }
.u-padding-right-14px { padding-right:14px; }
.u-padding-right-20px { padding-right:20px; }
.u-padding-right-22px { padding-right:22px; }
.u-padding-top-0 { padding-top:0; }
.u-padding-top-30px { padding-top:30px; }
.u-padding-top-34px { padding-top:34px; }
.u-padding-top-5px { padding-top:5px; }
.u-padding-top-8px { padding-top:8px; }
.u-padding-top-90px { padding-top:90px; }
.u-place-items-center { place-items:center; }
.u-position-absolute { position:absolute; }
.u-position-relative { position:relative; }
.u-text-align-center { text-align:center; }
.u-text-overflow-ellipsis { text-overflow:ellipsis; }
.u-text-transform-uppercase { text-transform:uppercase; }
.u-white-space-nowrap { white-space:nowrap; }
.u-white-space-pre-wrap { white-space:pre-wrap; }
.u-width-100 { width:100%; }
.u-width-120px { width:120px; }
.u-width-130px { width:130px; }
.u-width-140px { width:140px; }
.u-width-150px { width:150px; }
.u-width-160px { width:160px; }
.u-width-200px { width:200px; }
.u-width-40px { width:40px; }
.u-width-48px { width:48px; }
.u-width-56px { width:56px; }
.u-width-60px { width:60px; }
.u-width-64px { width:64px; }
.u-width-90px { width:90px; }
.u-width-auto { width:auto; }