/* BurDental v5 - viora skin + ported bndv4 component styles */
/* Brand mapping for viora design system (overrides medical demo palette) */
:root {
  /* Brand palette switched to the logo blue (#0376bb) on 2026-07-06.
     NOTE: the legacy token NAME --teal is kept (63 usages) but its VALUE is
     now the brand blue; true teal lives on as the Lab family accent. */
  --Primary: #0376bb;
  --Secondary: #e7f2fb;
  --Bg-light: #f2f7fc;
}
/* ---- ported bndv4 tokens & components below (colliding classes renamed with bd- prefix) ---- */
/* BurDental v4 — production CSS */
:root {
  --bg: #f8fbfd;
  --bg-2: #eef4f9;
  --surface: #ffffff;
  --ink: #10242c;
  --ink-2: #314650;
  --muted: #617882;
  --muted-2: #91a4ad;
  --line: #dce8ed;
  --line-2: #c8dce3;
  --teal: #0376bb;
  --teal-700: #025e94;
  --teal-50: #e7f2fb;
  --accent: #0077b6;
  --accent-700: #005f92;
  --accent-50: #e8f6fc;
  --success: #1f8f5f;
  --warn: #b7791f;
  --danger: #c53030;
  --r-sm: 4px;
  --r: 6px;
  --r-lg: 8px;
  --content: 1280px;
  --font-sans:
    "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}



.mono {
  font-family: var(--font-mono);
  font-feature-settings:
    "tnum" 1,
    "zero" 1;
  letter-spacing: -0.01em;
}
.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.bd-container {
  max-width: var(--content);
  margin: 0 auto;
  padding: 0 32px;
}

/* Buttons */
.bd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 18px;
  border-radius: var(--r);
  font-weight: 500;
  font-size: 14px;
  transition: all 0.15s ease;
  white-space: nowrap;
  border: 1px solid transparent;
}
.bd-btn-primary {
  background: var(--accent);
  color: #fff;
}
.bd-btn-primary:hover {
  background: var(--accent-700);
}
.bd-btn-teal {
  background: var(--teal);
  color: #fff;
}
.bd-btn-teal:hover {
  background: var(--teal-700);
}
.bd-btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-2);
}
.bd-btn-ghost:hover {
  background: var(--bg-2);
  border-color: var(--ink-2);
}
.bd-btn-dark {
  background: var(--ink);
  color: #fff;
}
.bd-btn-dark:hover {
  background: var(--ink-2);
}
.bd-btn-sm {
  height: 36px;
  padding: 0 14px;
  font-size: 13px;
}
.bd-btn-xs {
  height: 28px;
  padding: 0 10px;
  font-size: 12px;
}
.bd-btn-block {
  width: 100%;
}
.bd-btn-wa {
  background: #25d366;
  color: #fff;
}
.bd-btn-wa:hover {
  filter: brightness(0.95);
}

/* Chips */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 10px;
  border-radius: var(--r-sm);
  background: var(--bg-2);
  font-size: 12px;
  font-family: var(--font-mono);
  color: var(--ink-2);
  border: 1px solid var(--line);
}
.chip-teal {
  background: var(--teal-50);
  color: var(--teal-700);
  border-color: rgba(3, 118, 187, 0.18);
}
.chip-good {
  background: #e8f5ef;
  color: #167a52;
  border-color: rgba(31, 143, 95, 0.2);
}
.chip-warn {
  background: #fdf6e3;
  color: var(--warn);
  border-color: rgba(183, 121, 31, 0.18);
}

/* Cards */
.bd-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}

/* Forms */
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.label {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-2);
}
.label .req {
  color: var(--accent);
}
.input,
.select,
.textarea {
  height: 42px;
  padding: 0 12px;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  background: var(--surface);
  font-size: 14px;
  color: var(--ink);
  outline: none;
  width: 100%;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}
.input:focus,
.select:focus,
.textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0, 119, 182, 0.12);
}
.textarea {
  height: auto;
  padding: 12px;
  min-height: 96px;
  resize: vertical;
}
.help {
  font-size: 12px;
  color: var(--muted);
}
.error {
  color: var(--danger);
  font-size: 12px;
}

/* Header */
.bd-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: saturate(1.2) blur(8px);
  border-bottom: 1px solid var(--line);
}
.bd-header-inner {
  max-width: var(--content);
  margin: 0 auto;
  height: 72px;
  padding: 0 32px;
  display: flex;
  align-items: center;
  gap: 24px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-weight: 700;
  font-size: 18px;
  color: var(--ink);
}
.brand-mark {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: block;
  overflow: hidden;
  background: #d8edf7;
  box-shadow:
    0 0 0 1px rgba(15, 26, 31, 0.08),
    0 4px 10px rgba(15, 26, 31, 0.1);
  flex: 0 0 auto;
}
.brand-mark img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bd-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
}
.bd-nav-link {
  height: 40px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  color: var(--ink-2);
  border-radius: var(--r-sm);
}
.bd-nav-link:hover {
  background: var(--bg-2);
  color: var(--ink);
}
.bd-nav-link.active {
  color: var(--ink);
  font-weight: 500;
}
.bd-nav-link.has-sub::after {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  margin-left: 6px;
  opacity: 0.6;
}
.bd-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}
.icon-btn {
  width: 40px;
  height: 40px;
  border-radius: var(--r-sm);
  display: grid;
  place-items: center;
  color: var(--ink-2);
  position: relative;
}
.icon-btn:hover {
  background: var(--bg-2);
  color: var(--ink);
}
.qbadge {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  display: grid;
  place-items: center;
  padding: 0 4px;
  line-height: 1;
  font-family: var(--font-mono);
}
.wa-btn {
  height: 40px;
  padding: 0 14px;
  border-radius: var(--r-sm);
  background: #25d366;
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
}

/* Mega menu */
.mega-wrap {
  position: absolute;
  left: 0;
  right: 0;
  top: 60px;
  padding: 20px 32px 0;
  pointer-events: none;
  display: none;
}
.mega-wrap.open {
  display: block;
  /* 不在 wrap 上开 pointer-events：仅 .mega 面板捕获点击。wrap 留白展开时会盖住顶栏底部约 12px，
     若它捕获点击会拦截顶栏图标（只关菜单不触发图标）。透明后点击穿透至图标，菜单由 document click 关闭。 */
}
.mega-wrap.open .mega {
  pointer-events: auto;
}
.mega {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: 0 30px 60px -20px rgba(15, 26, 31, 0.18);
  padding: 24px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px 22px;
}
.mega::before {
  content: "";
  position: absolute;
  top: -32px;
  left: 0;
  right: 0;
  height: 32px;
  /* 透明 hover 桥向上延伸会盖到顶栏，设为不捕获点击以免拦截顶栏图标；悬停连续性由 JS 的 safe-zone 几何保证。 */
  pointer-events: none;
}
.mega-family {
  min-width: 0;
}
.mega-family h4 {
  font-size: 12px;
  margin: 0 0 6px;
  letter-spacing: 0;
  color: var(--ink);
  font-weight: 650;
}
.mega-family-desc {
  min-height: 34px;
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}
.mega-family-links {
  display: grid;
  gap: 2px;
}
.mega-family-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 28px;
  padding: 4px 6px;
  border-radius: var(--r-sm);
  color: var(--ink-2);
  font-size: 13px;
}
.mega-family-links a:hover {
  background: var(--bg-2);
  color: var(--teal);
}
.mega-family-links .mono {
  flex: 0 0 auto;
  color: var(--muted-2);
  font-size: 11px;
}
.mega-foot {
  grid-column: 1/-1;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

/* Drawer */
.drawer-bg {
  position: fixed;
  inset: 0;
  background: rgba(15, 26, 31, 0.5);
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
.drawer-bg.open {
  opacity: 1;
  pointer-events: auto;
}
.drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(380px, 90vw);
  background: #fff;
  z-index: 110;
  transform: translateX(100%);
  transition: transform 0.25s ease;
  display: flex;
  flex-direction: column;
}
.drawer.open {
  transform: translateX(0);
}
.drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
}
.drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px 24px;
}
.drawer-foot {
  padding: 12px 20px;
  border-top: 1px solid var(--line);
  display: flex;
  gap: 8px;
}
.drawer-family {
  margin-bottom: 18px;
}
.drawer-family h4 {
  margin: 0 0 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
}
.drawer-family p {
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}
.drawer-family .bd-nav-link {
  height: 42px;
  justify-content: space-between;
  font-size: 14px;
}

/* Footer */
.bd-footer {
  background: linear-gradient(135deg, #10242c 0%, #123849 100%);
  color: #b9cbd2;
}
.bd-footer-inner {
  max-width: var(--content);
  margin: 0 auto;
  padding: 56px 32px 24px;
  display: grid;
  grid-template-columns: 2fr repeat(4, 1fr);
  gap: 40px;
}
.bd-footer h5 {
  font-size: 11px;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #fff;
  margin: 0 0 14px;
  font-weight: 600;
}
.bd-footer a {
  display: block;
  padding: 4px 0;
  font-size: 13px;
}
.bd-footer a:hover {
  color: #fff;
}
.bd-footer-brand .brand {
  color: #fff;
}
.bd-footer-brand .brand-mark {
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.22),
    0 6px 14px rgba(0, 0, 0, 0.22);
}
.bd-footer-brand p {
  font-size: 13px;
  line-height: 1.6;
  max-width: 320px;
  color: #9ab0b8;
}
.bd-footer-bottom {
  max-width: var(--content);
  margin: 0 auto;
  padding: 20px 32px;
  border-top: 1px solid #1c3a48;
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #6e8a95;
}

/* Images */
.imgwrap {
  position: relative;
  overflow: hidden;
  background: var(--bg-2);
}
.imgwrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.home-category-imgwrap {
  background: #fff;
}
.home-category-imgwrap img {
  object-fit: contain;
  padding: 18px;
  background: #fff;
}
.imgph {
  background: repeating-linear-gradient(
    135deg,
    var(--bg-2) 0 8px,
    #dfedf1 8px 16px
  );
  position: relative;
  display: grid;
  place-items: center;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
  text-align: center;
}
.imgph-tag {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--line);
  padding: 4px 8px;
  border-radius: 3px;
  max-width: 80%;
  line-height: 1.3;
}

/* Toast */
.bd-toast {
  position: fixed;
  bottom: 32px;
  right: 32px;
  background: var(--ink);
  color: #fff;
  padding: 14px 18px;
  border-radius: var(--r);
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 14px;
  box-shadow: 0 20px 40px -12px rgba(15, 26, 31, 0.4);
  z-index: 200;
  animation: tin 0.25s ease-out;
  max-width: calc(100vw - 32px);
}
.bd-toast a {
  color: #7ec8e8;
  font-weight: 500;
}
.bd-toast.hidden {
  display: none;
}
@keyframes tin {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Mobile bottom bar */
.mobile-bar {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  border-top: 1px solid var(--line);
  padding: 10px 16px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  z-index: 60;
  gap: 8px;
}
.mobile-bar .bd-btn {
  flex: 1;
}

/* Utility */
.bd-row {
  display: flex;
  align-items: center;
}
.bd-col {
  display: flex;
  flex-direction: column;
}
.gap-4 {
  gap: 4px;
}
.gap-8 {
  gap: 8px;
}
.gap-12 {
  gap: 12px;
}
.gap-16 {
  gap: 16px;
}
.gap-24 {
  gap: 24px;
}
.gap-32 {
  gap: 32px;
}
.dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
  background: currentColor;
}
.text-center {
  text-align: center;
}

/* Table */
.tbl {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
}
.tbl th {
  text-align: left;
  font-size: 11px;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  font-weight: 600;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-2);
  white-space: nowrap;
}
.tbl td {
  padding: 14px 12px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.tbl tbody tr:hover {
  background: rgba(0, 119, 182, 0.03);
}
.tbl tfoot td {
  padding: 14px 12px;
  border-top: 2px solid var(--line);
  font-size: 14px;
}

/* Sections */
section.band {
  padding: 64px 0;
}
section.band-tight {
  padding: 40px 0;
}
section.band-dark {
  background: var(--ink);
  color: #fff;
}
section.band-cream {
  background: var(--bg-2);
}

/* (bndv4 global h1-h3 sizing removed - viora styles.css typography applies) */

.ic {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.ic-sm {
  width: 14px;
  height: 14px;
}
.ic-lg {
  width: 22px;
  height: 22px;
}
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* Grids */
.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
.split-wide {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 48px;
  align-items: flex-start;
}
.split-narrow {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 32px;
  align-items: flex-start;
}
.cat-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 32px;
  align-items: flex-start;
}

.show-mobile {
  display: none;
}
.show-tablet {
  display: none;
}

/* Horizontal scroll snap */
.h-scroll {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 78%;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 4px 0 8px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.h-scroll::-webkit-scrollbar {
  display: none;
}
.h-scroll > * {
  scroll-snap-align: start;
}

/* Table scroll wrapper */
.tbl-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Product card */
.product-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.product-card .bd-card-img {
  aspect-ratio: 1;
  background: var(--bg-2);
  overflow: hidden;
}
.product-card .bd-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.product-card .bd-card-body {
  padding: 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Filter sidebar */
.filter-group {
  border-bottom: 1px solid var(--line);
  padding: 14px 0;
}
.filter-group-toggle {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
}
.filter-group-title {
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Diamond bur category — hero */
section.diamond-category-hero {
  padding: 32px 0 0;
}
.diamond-hero-card {
  display: flex;
  align-items: center;
  gap: 32px;
  margin-top: 8px;
  margin-bottom: 0;
}
.diamond-hero-copy {
  flex: 1 1 0%;
  min-width: 0;
}
.diamond-hero-copy h1 {
  font-size: clamp(24px, 3.5vw, 38px);
  margin: 0;
}
.diamond-hero-copy p {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
  max-width: 560px;
  margin: 4px 0 0;
}
.diamond-count-badge {
  display: inline-block;
  margin-top: 10px;
  font-size: 13px;
  color: var(--ink-2);
}
.diamond-count-badge .mono {
  font-size: 16px;
  color: var(--ink);
}
.diamond-hero-actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}
.diamond-hero-actions .bd-btn {
  font-size: 12px;
  gap: 5px;
}
.diamond-hero-media {
  flex: 0 0 180px;
  height: 120px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: var(--r);
}
.diamond-hero-media img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.diamond-hero-shape-img {
  width: 96px;
  height: 96px;
  object-fit: contain;
}

/* Diamond bur category — head shape navigation */
.diamond-head-shapes {
  padding: 18px 0 14px;
}
.diamond-head-shapes-heading {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 10px;
}
.diamond-head-shape-strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 6px;
  scrollbar-width: thin;
}
.diamond-head-shape-tile {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 80px;
  padding: 8px 6px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: #fff;
  text-decoration: none;
  color: var(--ink-2);
  font-size: 11px;
  text-align: center;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}
.diamond-head-shape-tile:hover {
  border-color: var(--teal);
  box-shadow: 0 2px 8px rgba(0, 119, 182, 0.08);
}
.diamond-head-shape-tile.active {
  border-color: var(--teal);
  background: var(--accent-50, rgba(0, 119, 182, 0.06));
}
.diamond-head-shape-tile img {
  width: 60px;
  height: 28px;
  object-fit: contain;
}
.diamond-shape-label {
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.diamond-shape-count {
  color: var(--muted-2);
  font-size: 10px;
}

/* Diamond bur category — inline price form */
.diamond-price-panel {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--bg-2);
  padding: 20px 24px;
  margin: 14px 0;
}
.diamond-price-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px 16px;
}
.diamond-price-msg {
  grid-column: 1 / -1;
}
.diamond-price-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 14px;
}
.diamond-consent {
  font-size: 12px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.diamond-price-success {
  text-align: center;
  padding: 20px;
  color: var(--teal);
  font-size: 14px;
}
.diamond-search {
  flex: 1 1 420px;
  max-width: 620px;
}
.diamond-search-btn {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: 0;
  color: var(--muted);
  cursor: pointer;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
}
.diamond-filter-group {
  padding: 0;
}
.diamond-top-filter .diamond-filter-options {
  position: absolute;
  top: 100%;
  left: -1px;
  right: -1px;
  margin-top: 0;
  display: grid;
  gap: 4px;
  max-height: 260px;
  overflow-y: auto;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid var(--teal);
  border-top: 0;
  border-radius: 0 0 var(--r) var(--r);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}
.diamond-filter-options {
  display: grid;
  gap: 4px;
  margin-top: 10px;
  max-height: 178px;
  overflow-y: auto;
  padding-right: 4px;
}
.diamond-filter-option {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 28px;
  color: var(--ink-2);
  font-size: 13px;
}
.drawer .diamond-filter-option {
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 6px 0;
}
.diamond-filter-option svg {
  color: var(--line-2);
}
.diamond-filter-image {
  width: 24px;
  height: 24px;
  object-fit: contain;
  border-radius: 4px;
  background: #fff;
}
.diamond-filter-option.active,
.diamond-filter-option.active svg {
  color: var(--teal);
}
.diamond-filter-option .mono {
  color: var(--muted-2);
  font-size: 11px;
}
.diamond-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.diamond-sort {
  margin-left: auto;
  flex: 0 0 auto;
}
.diamond-sort .select {
  width: auto;
  height: 36px;
  padding: 0 32px 0 10px;
  font-size: 13px;
}
.diamond-mobile-search {
  width: 100%;
  margin-bottom: 12px;
}
.diamond-filter-bar {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  align-items: start;
  margin-bottom: 14px;
}
.diamond-top-filter {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: #fff;
  padding: 12px;
  min-width: 0;
}
.diamond-top-filter.open {
  border-color: var(--teal);
  border-radius: var(--r) var(--r) 0 0;
  z-index: 20;
}
.diamond-top-filter .filter-group-toggle .ic-sm {
  transition: transform 0.15s ease;
}
.diamond-top-filter.open .filter-group-toggle .ic-sm {
  transform: rotate(180deg);
}
.diamond-top-filter .filter-group-title {
  font-size: 11px;
}
.diamond-top-filter.has-active {
  border-color: var(--teal);
}
.filter-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--teal);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  margin-left: 4px;
  vertical-align: middle;
}
.diamond-top-filter .diamond-filter-option {
  grid-template-columns: 24px minmax(0, 1fr) auto;
  min-height: 30px;
  font-size: 12px;
}
.diamond-top-filter .diamond-filter-option span:not(.mono) {
  overflow: hidden;
  text-overflow: ellipsis;
}
.diamond-active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 14px;
}
.diamond-active-filters .chip {
  cursor: pointer;
  gap: 4px;
}
.diamond-active-filters .chip svg {
  opacity: 0.55;
}
.diamond-clear {
  font-size: 12px;
  color: var(--muted);
  padding: 4px 0;
}
.diamond-bulk-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--accent-50);
  border: 1px solid rgba(0, 119, 182, 0.18);
  border-radius: var(--r);
  margin-bottom: 14px;
  font-size: 13px;
  font-weight: 500;
}
.diamond-bulk-bar #js-bulk-clear {
  margin-left: auto;
}
.diamond-table-shell {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: #fff;
  -webkit-overflow-scrolling: touch;
}
.diamond-table {
  width: 100%;
  min-width: 1120px;
  border-collapse: collapse;
  font-size: 13px;
}
.diamond-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--bg-2);
  color: var(--ink);
  text-align: left;
  font-weight: 600;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.diamond-table th span {
  color: var(--muted);
  font-weight: 400;
}
.diamond-table td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.diamond-table tbody tr:hover {
  background: rgba(0, 119, 182, 0.04);
}
.diamond-table tbody tr:last-child td {
  border-bottom: 0;
}
.diamond-check-cell {
  width: 34px;
}
.diamond-check-cell input {
  width: 16px;
  height: 16px;
  accent-color: var(--teal);
}
.diamond-thumb {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  background: var(--bg-2);
  border-radius: var(--r-sm);
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  text-align: center;
}
.diamond-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 4px;
  background: #fff;
}
.diamond-order {
  display: block;
  color: var(--teal);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.diamond-table small {
  display: block;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.3;
  max-width: 170px;
}
.diamond-iso {
  white-space: nowrap;
}
.diamond-grit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  cursor: default;
}
.diamond-grit.grit-s {
  background: #1a1a1a;
}
.diamond-grit.grit-c {
  background: #2a9d5c;
}
.diamond-grit.grit-m {
  background: #0077b6;
}
.diamond-grit.grit-f {
  background: #cc2936;
}
.diamond-grit.grit-ef {
  background: #d4a929;
}
.diamond-pager {
  margin-top: 28px;
  justify-content: center;
  flex-wrap: wrap;
}
.diamond-empty {
  padding: 48px 32px;
  text-align: center;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: #fff;
}
.diamond-empty h3 {
  font-size: 18px;
  margin-bottom: 8px;
}
.diamond-empty p {
  color: var(--muted);
  font-size: 14px;
  margin: 0;
}

/* ─── Shared spec category (Diamond + TC) ─── */
section.spec-category-hero {
  padding: 32px 0 0;
}
.spec-hero-card {
  display: flex;
  align-items: center;
  gap: 32px;
  margin-top: 8px;
  margin-bottom: 0;
}
.spec-hero-copy {
  flex: 1 1 0%;
  min-width: 0;
}
.spec-hero-copy h1 {
  font-size: clamp(24px, 3.5vw, 38px);
  margin: 0;
}
.spec-hero-copy p {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
  max-width: 560px;
  margin: 4px 0 0;
}
.spec-count-badge {
  display: inline-block;
  margin-top: 10px;
  font-size: 13px;
  color: var(--ink-2);
}
.spec-count-badge .mono {
  font-size: 16px;
  color: var(--ink);
}
.spec-hero-actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}
.spec-hero-actions .bd-btn {
  font-size: 12px;
  gap: 5px;
}
.spec-hero-media {
  flex: 0 0 180px;
  height: 120px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: var(--r);
}
.spec-hero-media img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.spec-hero-shape-img {
  width: 96px;
  height: 96px;
  object-fit: contain;
}
.spec-head-shapes {
  padding: 18px 0 14px;
}
.spec-head-shapes-heading {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 10px;
}
.spec-head-shape-strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 6px;
  scrollbar-width: thin;
}
.spec-head-shape-tile {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 84px;
  padding: 8px 6px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: #fff;
  text-decoration: none;
  color: var(--ink-2);
  font-size: 11px;
  text-align: center;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}
.spec-head-shape-tile:hover {
  border-color: var(--teal);
  box-shadow: 0 2px 8px rgba(0, 119, 182, 0.08);
}
.spec-head-shape-tile.active {
  border-color: var(--teal);
  background: var(--accent-50, rgba(0, 119, 182, 0.06));
}
.spec-head-shape-tile img {
  width: 60px;
  height: 28px;
  object-fit: contain;
}
.spec-shape-label {
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.spec-shape-count {
  color: var(--muted-2);
  font-size: 10px;
}
.spec-price-panel {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--bg-2);
  padding: 20px 24px;
  margin: 14px 0;
}
.spec-price-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px 16px;
}
.spec-price-msg {
  grid-column: 1 / -1;
}
.spec-price-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 14px;
}
.spec-consent {
  font-size: 12px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.spec-price-success {
  text-align: center;
  padding: 20px;
  color: var(--teal);
  font-size: 14px;
}
.spec-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.spec-search {
  flex: 1 1 420px;
  max-width: 620px;
}
.spec-search-btn {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: 0;
  color: var(--muted);
  cursor: pointer;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
}
.spec-sort {
  margin-left: auto;
  flex: 0 0 auto;
}
.spec-sort .select {
  width: auto;
  height: 36px;
  padding: 0 32px 0 10px;
  font-size: 13px;
}
.spec-filter-bar {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  align-items: start;
  margin-bottom: 14px;
}
.spec-top-filter {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: #fff;
  padding: 12px;
  min-width: 0;
}
.spec-top-filter.open {
  border-color: var(--teal);
  border-radius: var(--r) var(--r) 0 0;
  z-index: 20;
}
.spec-top-filter .filter-group-toggle .ic-sm {
  transition: transform 0.15s ease;
}
.spec-top-filter.open .filter-group-toggle .ic-sm {
  transform: rotate(180deg);
}
.spec-top-filter .filter-group-title {
  font-size: 11px;
}
.spec-top-filter.has-active {
  border-color: var(--teal);
}
.spec-top-filter .spec-filter-options {
  position: absolute;
  top: 100%;
  left: -1px;
  right: -1px;
  margin-top: 0;
  display: grid;
  gap: 4px;
  max-height: 260px;
  overflow-y: auto;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid var(--teal);
  border-top: 0;
  border-radius: 0 0 var(--r) var(--r);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}
.spec-filter-option {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 28px;
  color: var(--ink-2);
  font-size: 13px;
}
.spec-filter-option svg {
  color: var(--line-2);
}
.spec-filter-option.active,
.spec-filter-option.active svg {
  color: var(--teal);
}
.spec-filter-option .mono {
  color: var(--muted-2);
  font-size: 11px;
}
.spec-filter-count {
  justify-self: end;
  min-width: 24px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--bg-2);
  text-align: center;
}
.spec-active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 14px;
}
.spec-active-filters .chip {
  cursor: pointer;
  gap: 4px;
}
.spec-active-filters .chip svg {
  opacity: 0.55;
}
.spec-clear {
  font-size: 12px;
  color: var(--muted);
  padding: 4px 0;
}
.spec-bulk-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--accent-50);
  border: 1px solid rgba(0, 119, 182, 0.18);
  border-radius: var(--r);
  margin-bottom: 14px;
  font-size: 13px;
  font-weight: 500;
}
.spec-bulk-bar #js-bulk-clear {
  margin-left: auto;
}
.spec-table-shell {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: #fff;
  -webkit-overflow-scrolling: touch;
}
.spec-product-table {
  width: 100%;
  min-width: 1040px;
  border-collapse: collapse;
  font-size: 13px;
}
.spec-product-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--bg-2);
  color: var(--ink);
  text-align: left;
  font-weight: 600;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.spec-product-table th span {
  color: var(--muted);
  font-weight: 400;
}
.spec-product-table td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.spec-product-table tbody tr:hover {
  background: rgba(0, 119, 182, 0.04);
}
.spec-product-table tbody tr:last-child td {
  border-bottom: 0;
}
.spec-check-cell {
  width: 34px;
}
.spec-check-cell input {
  width: 16px;
  height: 16px;
  accent-color: var(--teal);
}
.spec-thumb {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  background: var(--bg-2);
  border-radius: var(--r-sm);
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  text-align: center;
}
.spec-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 4px;
  background: #fff;
}
.spec-order {
  display: block;
  color: var(--teal);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.spec-product-table small {
  display: block;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.3;
  max-width: 170px;
}
.spec-iso {
  white-space: nowrap;
}
.spec-inferred {
  color: var(--muted);
  font-size: 10px;
}
.spec-pager {
  margin-top: 28px;
  justify-content: center;
  flex-wrap: wrap;
}
.spec-empty {
  padding: 48px 32px;
  text-align: center;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: #fff;
}
.spec-empty h3 {
  font-size: 18px;
  margin-bottom: 8px;
}
.spec-empty p {
  color: var(--muted);
  font-size: 14px;
  margin: 0;
}

/* Spec table on product page */
.spec-row {
  display: flex;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.spec-row:last-child {
  border-bottom: 0;
}
.spec-label {
  flex: 0 0 45%;
  color: var(--muted);
}
.spec-value {
  flex: 1;
  font-family: var(--font-mono);
}

/* Size selector */
.size-btn {
  cursor: pointer;
  height: 36px;
  min-width: 48px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 12px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: #fff;
  color: var(--ink-2);
  transition: all 0.1s;
}
.size-btn.active,
.size-btn:hover {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}

.product-status-line {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  padding: 5px 0;
  font-size: 13px;
  line-height: 1.4;
  color: #27835b;
}
.product-status-line-warn {
  color: var(--ink-2);
}
.product-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #27835b;
  flex: 0 0 auto;
}
.product-status-line-warn .product-status-dot {
  background: #647a86;
}
.product-quality-card {
  padding: 14px 0 0;
  border-top: 1px solid #d7e3e8;
}
.quality-option-label {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #647a86;
}
.quality-option-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 14px;
}
.quality-option {
  display: flex;
  align-items: center;
  min-height: 78px;
  padding: 13px 20px 12px;
  text-align: left;
  white-space: normal;
  font-family: inherit;
  color: #102a36;
  border: 1px solid #d7e3e8;
  border-radius: 10px;
  background: #fff;
  box-shadow: none;
  transition: border-color .15s ease, background-color .15s ease;
}
.quality-option:hover {
  color: #102a36;
  border-color: #a9c2cf;
  background: #fff;
}
.quality-option.active {
  color: #102a36;
  border-color: #174e70;
  background: #f2f8fb;
}
.quality-option-radio {
  width: 18px;
  height: 18px;
  margin-top: 0;
  border: 1px solid #a9c2cf;
  border-radius: 999px;
  background: #fff;
  flex: 0 0 auto;
}
.quality-option.active .quality-option-radio {
  border: 5px solid #087eb5;
}
.quality-option-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 8px;
  flex: 1 1 auto;
}
.quality-option-heading {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.quality-option-title {
  min-width: 0;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.25;
  color: #102a36;
}
.quality-option-price {
  flex: 0 0 auto;
  margin-left: auto;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.25;
  font-weight: 700;
  color: #102a36;
  text-align: right;
}
.quality-option-sub {
  display: block;
  min-height: 18px;
  font-size: 13px;
  line-height: 18px;
  font-weight: 400;
  color: #647a86;
}
.quality-option-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  height: 18px;
  margin-left: 3px;
  padding: 0 7px;
  border: 1px solid #d6e5eb;
  border-radius: 999px;
  background: #edf5f8;
  color: #315b70;
  font-size: 10px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  vertical-align: top;
}
.quality-option-high,
.quality-option-economy,
.quality-option-standard {
  border-color: #d7e3e8;
}
.quality-option-economy,
.quality-option-standard {
  align-items: flex-start;
}
.product-unit-price {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 12px 0 10px;
  border-top: 1px solid #d7e3e8;
  border-bottom: 1px solid #d7e3e8;
}
.product-unit-price-value {
  font-size: 28px;
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.product-quantity-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.product-quantity-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.product-moq-inline {
  margin-left: 4px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: #647a86;
}
.product-qty-control {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  border: 1px solid #d7e3e8;
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
}
.product-qty-btn.bd-btn {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: #fff;
  color: #102a36;
}
.product-qty-btn.bd-btn:hover {
  background: #f5fafc;
  color: #102a36;
}
.product-qty-input-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 82px;
  height: 44px;
  border-left: 1px solid #d7e3e8;
  border-right: 1px solid #d7e3e8;
  background: #fff;
}
.product-qty-input.input {
  width: 100%;
  height: 44px;
  padding: 0 24px 0 8px;
  border: 0;
  border-radius: 0;
  text-align: center;
  font-family: var(--font-mono);
  box-shadow: none;
  appearance: textfield;
  -moz-appearance: textfield;
}
.product-qty-input.input::-webkit-outer-spin-button,
.product-qty-input.input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.product-qty-spin {
  position: absolute;
  right: 9px;
  top: 50%;
  display: flex;
  flex-direction: column;
  width: 16px;
  height: 24px;
  transform: translateY(-50%);
  border-radius: 4px;
  overflow: hidden;
  pointer-events: auto;
}
.product-qty-spin-btn {
  width: 16px;
  height: 12px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: #eef4f7;
  color: #102a36;
  cursor: pointer;
}
.product-qty-spin-btn:hover {
  background: #dbeaf1;
}
.product-qty-spin-btn span {
  display: block;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
}
.product-qty-spin-up span {
  border-bottom: 5px solid currentColor;
}
.product-qty-spin-down span {
  border-top: 5px solid currentColor;
}
.product-action-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.product-main-action {
  flex: 1 1 220px;
  min-width: 180px;
}
.product-whatsapp-action {
  flex: 0 0 auto;
  background: #fff;
  color: #25d366;
  border-color: #d7e3e8;
}
.product-whatsapp-action svg {
  color: #25d366;
}
.product-whatsapp-action:hover {
  background: #f2fbf6;
  color: #20b858;
  border-color: #b9dcc9;
}

/* Tab navigation */
.tab-nav {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
}
.tab-btn {
  padding: 14px 18px;
  border-bottom: 2px solid transparent;
  font-size: 14px;
  font-weight: 400;
  color: var(--muted);
  white-space: nowrap;
  background: none;
  border-top: 0;
  border-left: 0;
  border-right: 0;
  cursor: pointer;
}
.tab-btn.active {
  border-bottom-color: var(--ink);
  font-weight: 500;
  color: var(--ink);
}

/* Product description content: readable long-form text, restrained images */
.content-body {
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink-2);
}
.content-body h2 {
  font-size: 24px;
  line-height: 1.3;
  margin: 4px 0 14px;
  color: var(--ink);
}
.content-body h3 {
  font-size: 19px;
  margin: 26px 0 10px;
  color: var(--ink);
}
.content-body ul {
  list-style: disc;
  padding-left: 24px;
}
.content-body ol {
  list-style: decimal;
  padding-left: 24px;
}
.content-body li {
  margin-bottom: 8px;
  line-height: 1.65;
}
.content-body img {
  display: block;
  max-width: min(100%, 640px);
  height: auto !important;
  margin: 20px auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  padding: 8px;
}

.content-body p:has(> img:only-child) {
  margin: 16px 0;
}

/* Gallery */
.gallery-main {
  aspect-ratio: 1;
  background: var(--bg-2);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.gallery-thumb {
  width: 72px;
  height: 72px;
  padding: 0;
  cursor: pointer;
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}
.gallery-thumb.active {
  border-color: var(--teal);
  border-width: 2px;
}

/* Breadcrumb */
.bd-breadcrumb {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 12px;
}
.bd-breadcrumb a {
  color: inherit;
}
.bd-breadcrumb a:hover {
  color: var(--ink);
}
.bd-breadcrumb .sep {
  margin: 0 6px;
}

/* ─── PROSE / PAGE-CONTENT ─── */
.page-content h2 {
  font-size: 24px;
  margin: 36px 0 14px;
  line-height: 1.25;
}
.page-content h3 {
  font-size: 19px;
  margin: 28px 0 10px;
  line-height: 1.3;
}
.page-content h4 {
  font-size: 16px;
  font-weight: 600;
  margin: 22px 0 8px;
}
.page-content p {
  margin: 0 0 16px;
}
.page-content ul,
.page-content ol {
  margin: 0 0 18px;
  padding-left: 24px;
}
.page-content li {
  margin-bottom: 6px;
}
.page-content li p {
  margin: 0;
}
.page-content a {
  color: var(--teal);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.page-content a:hover {
  color: var(--teal-700);
}
.page-content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--r);
  margin: 8px 0;
}

/* Tables */
.page-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  font-size: 14px;
  line-height: 1.5;
  /* dark outer frame; row separators stay light (var(--line)) */
  border: 1px solid var(--ink);
}
.page-content thead th {
  background: var(--bg-2);
  font-weight: 600;
  text-align: left;
  padding: 10px 14px;
  border-bottom: 2px solid var(--line);
  white-space: nowrap;
}
.page-content tbody td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.page-content tbody tr:last-child td {
  border-bottom: none; /* outer frame supplies the closing line */
}
.page-content tbody tr:hover {
  background: var(--bg-2);
}
.page-content th p,
.page-content td p {
  margin: 0;
  font-size: inherit;
  line-height: inherit;
}

/* Blockquotes / callouts */
.page-content blockquote {
  margin: 20px 0;
  padding: 14px 18px;
  background: var(--bg-2);
  border-left: 4px solid var(--teal);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  color: var(--ink-2);
  font-size: 15px;
}
.page-content blockquote p:last-child {
  margin-bottom: 0;
}

/* Horizontal rules */
.page-content hr {
  border: none;
  border-top: 1px solid var(--line);
  margin: 32px 0;
}

/* Code */
.page-content code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--bg-2);
  padding: 2px 6px;
  border-radius: 4px;
}
.page-content pre {
  background: var(--bg-2);
  border-radius: var(--r-sm);
  padding: 16px;
  overflow-x: auto;
  margin: 16px 0;
  font-size: 13px;
  line-height: 1.6;
}
.page-content pre code {
  background: none;
  padding: 0;
}

/* Legacy content grid (Bootstrap-style classes from CMS pages) */
.page-content .bd-row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -12px;
}
.page-content .bd-row > [class*="col-"] {
  padding: 0 12px;
  box-sizing: border-box;
  width: 100%;
}
.page-content .col-md-6 {
  flex: 0 0 50%;
  max-width: 50%;
}
.page-content .col-lg-5 {
  flex: 0 0 41.666%;
  max-width: 41.666%;
}
.page-content .col-lg-6 {
  flex: 0 0 50%;
  max-width: 50%;
}
.page-content .col-lg-7 {
  flex: 0 0 58.333%;
  max-width: 58.333%;
}
.page-content .col-xl-4 {
  flex: 0 0 33.333%;
  max-width: 33.333%;
}

/* Legacy section spacing */
.page-content .bd-container {
  max-width: 100%;
  padding: 0;
}
.page-content .pt-10 {
  padding-top: 8px;
}
.page-content .pt-30 {
  padding-top: 28px;
}
.page-content .pb-10 {
  padding-bottom: 8px;
}
.page-content .mb-60 {
  margin-bottom: 48px;
}
.page-content .bg-white-f5 {
  background: var(--bg-2);
  border-radius: var(--r);
  padding: 28px 24px;
}
.page-content .text-center {
  text-align: center;
}
.page-content .font-size-18 {
  font-size: 16px;
}
.page-content .clearfix::after {
  content: "";
  display: table;
  clear: both;
}

/* Icon box cards */
.page-content .icon-box {
  padding: 24px 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}
.page-content .icon-box .icon-box-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.page-content .icon-box .icon-wrapper img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  margin: 0 auto 12px;
  display: block;
  border-radius: 0;
}
.page-content .icon-box-title {
  font-size: 2rem !important;
  font-weight: 700 !important;
  color: var(--teal) !important;
  font-family: var(--font-mono) !important;
  margin: 6px 0 !important;
  line-height: 1.2 !important;
}
.page-content .icon-box .content p {
  color: var(--muted);
  font-size: 14px;
  margin: 0;
}
.page-content .icon-box a.icon {
  text-decoration: none;
}

/* Section headings inside legacy content */
.page-content .section-content h2 {
  font-size: 22px;
  letter-spacing: 0.04em;
  margin-bottom: 18px;
}

/* Column text layout */
.page-content .column-three-content {
  column-count: 1;
}

/* Mobile: legacy grid collapses */
@media (max-width: 720px) {
  .page-content table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .page-content thead th {
    white-space: nowrap;
  }
  .page-content .col-lg-5,
  .page-content .col-lg-6,
  .page-content .col-lg-7,
  .page-content .col-xl-4 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .page-content .col-xl-4 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .page-content .bg-white-f5 {
    padding: 20px 16px;
  }
}
@media (min-width: 1025px) and (max-width: 1180px) {
  .mega {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 721px) and (max-width: 1024px) {
  .page-content .col-xl-4 {
    flex: 0 0 50%;
    max-width: 50%;
  }
}

.home-product-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  margin-bottom: 24px;
}
.home-product-controls {
  display: flex;
  gap: 8px;
}
.home-product-nav {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  box-shadow: var(--shadow-sm);
}
.home-product-nav:disabled {
  opacity: .35;
  cursor: default;
}
.home-product-scroll {
  grid-auto-columns: minmax(210px, calc((100% - 48px) / 4));
  gap: 16px;
  padding: 4px 2px 12px;
  scroll-padding-left: 2px;
}
.home-product-card {
  height: auto;
  min-height: 0;
}
.home-product-card-img {
  aspect-ratio: 1;
}
.home-product-card-img img,
.home-product-card-img .imgph {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.home-product-card-body {
  padding: 12px;
  flex: 1;
}
.home-product-card-title {
  font-size: 13px;
  line-height: 1.32;
  font-weight: 500;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 34px;
}
.home-product-card .bd-btn-sm {
  width: 100%;
  justify-content: center;
  padding: 7px 10px;
  font-size: 12px;
  margin-top: auto;
}

/* ─── RESPONSIVE ─── */
@media (max-width: 1024px) {
  .bd-nav,
  .wa-btn {
    display: none;
  }
  .bd-footer-inner {
    grid-template-columns: 1fr 1fr;
  }
  .mega-wrap {
    display: none !important;
  }
  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
  .cat-layout {
    grid-template-columns: 1fr;
  }
  .diamond-filter-bar {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .diamond-hero-card {
    gap: 20px;
  }
  .diamond-hero-media {
    flex: 0 0 150px;
    height: 120px;
  }
  .spec-filter-bar {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .spec-hero-card {
    gap: 20px;
  }
  .spec-hero-media {
    flex: 0 0 150px;
    height: 120px;
  }
  h1 {
    font-size: 40px;
  }
  .show-tablet {
    display: initial;
  }
  .hide-tablet {
    display: none !important;
  }
  .mobile-bar {
    display: flex;
  }
  body {
    padding-bottom: 64px;
  }
}

@media (max-width: 720px) {
  body {
    padding-bottom: 64px;
  }
  .bd-container {
    padding: 0 20px;
  }
  .bd-header-inner {
    padding: 0 16px;
    gap: 8px;
    height: 60px;
  }
  .brand {
    gap: 9px;
    font-size: 17px;
  }
  .brand-mark {
    width: 30px;
    height: 30px;
  }
  .bd-footer-inner {
    grid-template-columns: 1fr;
    padding: 40px 20px 20px;
  }
  .bd-footer-bottom {
    padding: 20px;
    flex-direction: column;
    gap: 8px;
  }
  .show-mobile {
    display: initial;
  }
  .home-product-heading {
    align-items: flex-start;
  }
  .home-product-scroll {
    grid-auto-columns: minmax(150px, 54vw);
    gap: 10px;
    padding: 2px 20px 12px 0;
    margin-right: -20px;
    scroll-snap-type: x mandatory;
  }
  .home-product-controls {
    display: none;
  }
  .home-product-card-title {
    font-size: 12px;
    min-height: 31px;
  }
  .hide-mobile {
    display: none !important;
  }
  .bd-header-actions .wa-btn {
    display: none;
  }
  .grid-4,
  .grid-3,
  .grid-2,
  .split,
  .split-wide,
  .split-narrow {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .quality-option-grid {
    grid-template-columns: 1fr;
  }
  .quality-option {
    min-height: 44px;
  }
  .product-action-row {
    flex-direction: column;
    align-items: stretch;
  }
  .product-main-action,
  .product-whatsapp-action {
    width: 100%;
    flex-basis: auto;
  }
  .diamond-hero-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  section.diamond-category-hero {
    padding: 28px 0 0;
  }
  .diamond-hero-copy h1 {
    font-size: 28px;
    line-height: 1.15;
  }
  .diamond-hero-copy p {
    font-size: 13px;
  }
  .diamond-hero-actions {
    flex-wrap: wrap;
    margin-top: 10px;
  }
  .diamond-hero-media {
    display: none;
  }
  .diamond-price-grid {
    grid-template-columns: 1fr;
  }
  .diamond-price-footer {
    flex-direction: column;
    align-items: flex-start;
  }
  .diamond-head-shape-tile {
    width: 72px;
  }
  .diamond-toolbar {
    align-items: stretch;
  }
  .diamond-search {
    flex-basis: 100%;
    max-width: none;
  }
  .diamond-sort {
    width: 100%;
  }
  .diamond-sort .select {
    width: 100%;
  }
  .diamond-filter-bar {
    grid-template-columns: repeat(2, 1fr);
  }
  .diamond-top-filter .diamond-filter-options {
    max-height: 200px;
  }
  .diamond-bulk-bar {
    flex-wrap: wrap;
  }
  .diamond-bulk-bar #js-bulk-clear {
    margin-left: 0;
  }
  .diamond-table {
    min-width: 1040px;
  }
  .diamond-table th,
  .diamond-table td {
    padding: 8px 10px;
  }
  .spec-hero-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  section.spec-category-hero {
    padding: 28px 0 0;
  }
  .spec-hero-copy h1 {
    font-size: 28px;
    line-height: 1.15;
  }
  .spec-hero-copy p {
    font-size: 13px;
  }
  .spec-hero-actions {
    flex-wrap: wrap;
    margin-top: 10px;
  }
  .spec-hero-media {
    display: none;
  }
  .spec-price-grid {
    grid-template-columns: 1fr;
  }
  .spec-price-footer {
    flex-direction: column;
    align-items: flex-start;
  }
  .spec-head-shape-tile {
    width: 76px;
  }
  .spec-toolbar {
    align-items: stretch;
  }
  .spec-search {
    flex-basis: 100%;
    max-width: none;
  }
  .spec-sort {
    width: 100%;
  }
  .spec-sort .select {
    width: 100%;
  }
  .spec-filter-bar {
    grid-template-columns: repeat(2, 1fr);
  }
  .spec-top-filter .spec-filter-options {
    max-height: 200px;
  }
  .spec-bulk-bar {
    flex-wrap: wrap;
  }
  .spec-bulk-bar #js-bulk-clear {
    margin-left: 0;
  }
  .spec-product-table {
    min-width: 960px;
  }
  .spec-product-table th,
  .spec-product-table td {
    padding: 8px 10px;
  }
  section.band {
    padding: 40px 0;
  }
  section.band-tight {
    padding: 28px 0;
  }
  h1 {
    font-size: 30px;
    line-height: 1.1;
  }
  h2 {
    font-size: 22px;
  }
  h3 {
    font-size: 17px;
  }
  .mobile-bar {
    display: flex;
  }
  .bd-toast {
    left: 16px;
    right: 16px;
    bottom: 80px;
  }
  .tbl-scroll .tbl {
    min-width: 720px;
  }
}

/* Category landing pages */
section.category-landing-main {
  padding: 8px 0 44px;
}
.category-landing-container {
  /* match .tf-container so landing pages share the same gutters as other pages */
  max-width: 1440px;
  width: 100%;
  padding-left: 15px;
  padding-right: 15px;
}
/* landing hero: homepage hero-banner-4 look with static copy + static themed image */
.bd-landing-hero { background: var(--fam-tint); position: relative; overflow: hidden; }
.bd-landing-hero .hero-banner-4 { height: auto; }
.bd-landing-hero .row { align-items: stretch; }
.bd-landing-hero .content { padding: 175px 0 70px; }
.bd-landing-hero .tf-breadcrumb { margin-bottom: 18px; }
.bd-landing-hero .bd-landing-eyebrow { color: var(--fam-accent); font-weight: 600; letter-spacing: 0.08em; }
.bd-landing-hero .title { font-size: clamp(32px, 3.5vw, 52px); line-height: 1.12; margin-bottom: 16px; }
.bd-landing-hero .heading p { max-width: 560px; }
.bd-landing-hero .tf-btn.btn-bg-primary-2 { background-color: var(--fam-accent); }
.bd-landing-hero .contact .icon { color: var(--fam-accent); }
.bd-landing-thumbs { height: 100%; display: flex; align-items: flex-end; justify-content: center; padding-top: 150px; }
.bd-landing-thumbs img { width: min(100%, 470px); aspect-ratio: 594 / 633; object-fit: cover; object-position: center top; border-radius: 320px 320px 0 0; display: block; background: #fff; }
@media (max-width: 991px) {
  .bd-landing-hero .content { padding: 130px 0 36px; }
  .bd-landing-thumbs { padding-top: 0; }
  .bd-landing-thumbs img { width: min(100%, 380px); }
}
/* featured categories (viora box-service tabs, family-accented) */
.bd-landing-featured { padding: 64px 0 8px; background: #fff; }
.bd-landing-featured .tab-slide .tab-link.active,
.bd-landing-featured .tab-slide .tab-link:hover { color: var(--fam-accent); }
.bd-landing-featured .box-service .sub { color: var(--fam-accent); }
.bd-landing-featured .btn-arrow { background-color: var(--fam-accent); }
.category-landing-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 22px 24px;
}
.category-landing-card {
  --category-landing-card-size: 220px;
  height: 100%;
  color: #0f172a;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}
.category-landing-card-box {
  width: min(100%, var(--category-landing-card-size));
  height: var(--category-landing-card-size);
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 13px;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
  overflow: hidden;
  padding: 10px;
  transition: all 0.2s ease;
}
.category-landing-card:hover .category-landing-card-box {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
  border-color: #cbd5e1;
}
.category-landing-card-box img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  display: block;
  object-fit: contain;
}
.category-landing-card-title {
  min-height: 42px;
  width: min(100%, var(--category-landing-card-size));
  margin: 10px 0 0;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  color: #0f172a;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.category-landing-card-desc {
  width: min(100%, var(--category-landing-card-size));
  margin: 6px 0 0;
  text-align: center;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.category-landing-card-count {
  display: block;
  margin-top: 6px;
  text-align: center;
  font-size: 11px;
  color: var(--fam-accent);
}
.category-landing-content {
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  color: var(--ink-2);
  line-height: 1.7;
}

/* per-family landing accents (defaults = dental teal) */
.bd-landing-hero,
.bd-landing-featured,
section.category-landing-main {
  --fam-accent: var(--teal);
  --fam-tint: var(--teal-50);
}
.landing-lab-technician {
  --fam-accent: #008c8c; /* true teal, freed by the blue rebrand */
  --fam-tint: #e6f7f7;
}
.landing-nail-products {
  --fam-accent: #b0447c;
  --fam-tint: #faeef4;
}
.landing-other {
  --fam-accent: #617882;
  --fam-tint: #eef2f4;
}
.category-landing-card:hover .category-landing-card-box {
  border-color: var(--fam-accent);
}
.category-landing-card:hover .category-landing-card-title {
  color: var(--fam-accent);
}

@media (max-width: 1280px) {
  .category-landing-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .category-landing-card {
    --category-landing-card-size: 210px;
  }
}

@media (max-width: 1180px) {
  .category-landing-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .category-landing-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .category-landing-card {
    --category-landing-card-size: 190px;
  }
}

@media (max-width: 720px) {
  .category-landing-hero {
    padding: 20px 0 8px;
  }
  .category-landing-head {
    display: block;
  }
  .category-landing-count {
    padding: 9px 0 0;
  }
  .category-landing-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .category-landing-card {
    --category-landing-card-size: 180px;
  }
  .category-landing-card-box {
    padding: 12px;
  }
}

.mega-family-links a.mega-family-all-link,
.drawer-family a.mega-family-all-link {
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  color: var(--teal);
  font-weight: 700;
}
.mega-family-links a.mega-family-all-link:hover,
.drawer-family a.mega-family-all-link:hover {
  color: var(--teal-700);
}


/* CAD/CAM Milling Burs — Diamond-style category layout */
.cadcam-category-hero .diamond-hero-card{margin-bottom:0}
.cadcam-hero-card-diamond{min-height:0}
.cadcam-brand-shapes{padding-top:16px;padding-bottom:12px}
.cadcam-brand-strip{gap:8px}
.cadcam-brand-tile{width:92px;min-height:70px;justify-content:center;padding:8px 6px;gap:2px}
.cadcam-brand-main{-webkit-line-clamp:1;font-weight:600;color:var(--ink-2)}
.cadcam-brand-sub{font-size:10px;color:var(--muted);line-height:1.1}
.cadcam-brand-tile.active .cadcam-brand-main,.cadcam-brand-tile.active .cadcam-brand-sub{color:var(--teal)}
.cadcam-diamond-list{background:#fff}
.cadcam-diamond-main{padding-top:0}
.cadcam-machine-diamond-strip{margin:0 0 12px;padding-bottom:6px}
.cadcam-machine-tile{width:auto;min-width:104px;max-width:180px;min-height:48px;align-items:flex-start;text-align:left;padding:8px 10px}
.cadcam-machine-tile .diamond-shape-label{-webkit-line-clamp:2;font-size:11px}
.cadcam-diamond-filter-form{margin:0 0 14px}
.cadcam-diamond-filter-bar{grid-template-columns:repeat(5,minmax(0,1fr));margin-bottom:0}
.cadcam-diamond-filter-bar .diamond-top-filter{padding:0;overflow:hidden}
.cadcam-diamond-select{width:100%;height:40px;border:0;background:#fff;padding:0 32px 0 12px;font-size:11px;font-family:var(--font-mono);font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--ink);cursor:pointer}
.cadcam-diamond-filter-bar .diamond-top-filter.has-active .cadcam-diamond-select{color:var(--teal)}
.cadcam-table-shell{background:#fff;border-color:var(--line)}
.cadcam-table{min-width:1040px;font-size:12px}
.cadcam-table th{padding:9px 10px;font-size:12px}
.cadcam-table td{padding:8px 10px;line-height:1.3}
.cadcam-table td:nth-child(3){min-width:230px;max-width:300px}
.cadcam-table td:nth-child(8),.cadcam-table td:nth-child(9){max-width:150px;white-space:normal}
.cadcam-table small{font-size:11px;line-height:1.25;color:var(--muted);display:block;margin-top:2px}
.cadcam-thumb img{object-fit:cover;padding:0}
.cadcam-table .bd-btn-xs{height:28px;padding:0 9px;font-size:11px;gap:4px}
@media (max-width:1100px){.cadcam-diamond-filter-bar{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:720px){.cadcam-brand-tile{width:92px}.cadcam-machine-tile{min-width:128px}.cadcam-diamond-filter-bar{grid-template-columns:1fr 1fr}.cadcam-table-shell{margin-left:-16px;margin-right:-16px;border-radius:0;border-left:0;border-right:0}}
@media (max-width:520px){.cadcam-diamond-filter-bar{grid-template-columns:1fr}.cadcam-brand-tile{width:86px}}

/* CAD/CAM detail pass: pagination + tighter Diamond parity */
.cadcam-brand-shapes{padding-top:14px;padding-bottom:10px}
.cadcam-brand-tile{width:82px;min-height:66px;padding:7px 5px;gap:2px}
.cadcam-brand-main{font-size:11px;line-height:1.15;-webkit-line-clamp:1}
.cadcam-brand-sub{font-size:9.5px;line-height:1.05}
.cadcam-brand-tile .diamond-shape-count{font-size:10px;margin-top:1px}
.cadcam-machine-diamond-strip{margin-bottom:10px}
.cadcam-machine-tile{min-height:42px;padding:7px 9px}
.cadcam-diamond-filter-form{margin-bottom:12px}
.cadcam-diamond-filter-bar{gap:8px}
.cadcam-diamond-filter-bar .diamond-top-filter{border:0;background:transparent;padding:0;border-radius:0}
.cadcam-diamond-select{height:36px;border:1px solid var(--line);border-radius:var(--r);background:#fff;font-size:11px;padding-left:10px}
.cadcam-diamond-filter-bar .diamond-top-filter.has-active .cadcam-diamond-select{border-color:var(--teal);background:var(--accent-50,rgba(0,119,182,.06))}
.cadcam-table{min-width:960px;font-size:12px}
.cadcam-table th{padding:8px 9px;font-size:11px}
.cadcam-table td{padding:7px 9px;line-height:1.22}
.cadcam-table td:nth-child(2){width:58px}
.cadcam-table td:nth-child(3){min-width:160px;max-width:210px;width:190px}
.cadcam-table td:nth-child(8){max-width:92px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cadcam-table td:nth-child(9){max-width:120px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cadcam-table td:nth-child(10){width:80px}
.cadcam-table .diamond-order{font-size:12px;white-space:normal;line-height:1.2}
.cadcam-table small{font-size:10px;line-height:1.15;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;margin-top:1px}
.cadcam-thumb{width:36px;height:36px;border-radius:8px}
.cadcam-table .bd-btn-xs{height:26px;padding:0 7px;font-size:10.5px}
.cadcam-table .bd-btn-xs svg{width:12px;height:12px}

/* CAD/CAM detail pass: direct filter selects + full headers */
.cadcam-diamond-filter-bar{grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin-bottom:12px}
.cadcam-diamond-select{height:36px;border:1px solid var(--line);border-radius:var(--r);background:#fff;font-size:11px;font-family:var(--font-mono);font-weight:600;text-transform:uppercase;letter-spacing:.06em;padding:0 30px 0 10px;color:var(--ink)}
.cadcam-diamond-select.active{border-color:var(--teal);background:var(--accent-50,rgba(0,119,182,.06));color:var(--teal)}
.cadcam-table{min-width:980px}
.cadcam-table th{font-size:11px;padding:8px 9px;white-space:nowrap}
.cadcam-table td{padding:7px 9px;line-height:1.2}
.cadcam-table td:nth-child(2){width:58px}
.cadcam-table td:nth-child(3){min-width:118px;max-width:150px;width:132px}
.cadcam-table td:nth-child(4),.cadcam-table td:nth-child(5),.cadcam-table td:nth-child(6),.cadcam-table td:nth-child(7){width:92px;white-space:nowrap}
.cadcam-table td:nth-child(8){max-width:92px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cadcam-table td:nth-child(9){max-width:132px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cadcam-table td:nth-child(10){width:74px;white-space:nowrap}
.cadcam-table .diamond-order{font-size:12px;white-space:nowrap;line-height:1.2}
@media (max-width:1100px){.cadcam-diamond-filter-bar{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:720px){.cadcam-diamond-filter-bar{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.cadcam-diamond-filter-bar{grid-template-columns:1fr}}

/* CAD/CAM detail pass: Diamond-style filter dropdown contents */
.cadcam-diamond-filter-bar .diamond-top-filter{border:1px solid var(--line);background:#fff;padding:12px;border-radius:var(--r);overflow:visible}
.cadcam-diamond-filter-bar .diamond-top-filter.open{border-color:var(--teal);border-radius:var(--r) var(--r) 0 0;z-index:30}
.cadcam-diamond-filter-bar .filter-group-toggle{width:100%}
.cadcam-diamond-filter-bar .diamond-filter-option{grid-template-columns:24px minmax(0,1fr) auto;min-height:30px;font-size:12px}
.cadcam-diamond-filter-bar .diamond-filter-option span:not(.mono){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* CAD/CAM detail pass: keep Diamond-style dropdown content readable */
.cadcam-diamond-filter-bar .diamond-filter-options{left:0;right:auto;min-width:260px;width:max-content;max-width:min(380px,calc(100vw - 32px));z-index:80}
.cadcam-diamond-filter-bar .diamond-top-filter:nth-last-child(-n+2) .diamond-filter-options{left:auto;right:0}
.cadcam-diamond-filter-bar .diamond-filter-option{grid-template-columns:24px minmax(150px,1fr) auto;column-gap:8px;width:100%}
.cadcam-diamond-filter-bar .diamond-filter-option span:not(.mono){white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:280px}
.cadcam-diamond-filter-bar .diamond-filter-option .mono{justify-self:end;min-width:28px;text-align:right}

/* CAD/CAM detail pass: rebalance product table columns */
.cadcam-table{min-width:1180px;table-layout:fixed}
.cadcam-table th,.cadcam-table td{padding-left:8px;padding-right:8px}
.cadcam-table th{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.18;vertical-align:middle}
.cadcam-table th:nth-child(2),.cadcam-table td:nth-child(2){width:88px;padding-right:4px}
.cadcam-table th:nth-child(3),.cadcam-table td:nth-child(3){width:180px;min-width:180px;max-width:180px;padding-left:4px;padding-right:10px}
.cadcam-table th:nth-child(4),.cadcam-table td:nth-child(4){width:104px;padding-left:10px}
.cadcam-table th:nth-child(5),.cadcam-table td:nth-child(5),.cadcam-table th:nth-child(6),.cadcam-table td:nth-child(6),.cadcam-table th:nth-child(7),.cadcam-table td:nth-child(7){width:96px}
.cadcam-table th:nth-child(8),.cadcam-table td:nth-child(8){width:82px;max-width:82px}
.cadcam-table th:nth-child(9),.cadcam-table td:nth-child(9){width:150px;max-width:150px}
.cadcam-table td:nth-child(8),.cadcam-table td:nth-child(9){white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cadcam-table th:nth-child(10),.cadcam-table td:nth-child(10){width:72px}
.cadcam-table th:nth-child(11),.cadcam-table td:nth-child(11){width:120px;padding-left:22px}
.cadcam-table .diamond-order{white-space:normal;overflow-wrap:anywhere;line-height:1.22}
.cadcam-sort-link{display:inline-flex;align-items:center;gap:4px;color:inherit;text-decoration:none}
.cadcam-sort-link:hover,.cadcam-sort-link.active{color:var(--teal)}
.cadcam-sort-indicator{font-size:10px;line-height:1;color:var(--muted)}
.cadcam-sort-link.active .cadcam-sort-indicator{color:var(--teal)}

/* Contact page dedicated layout */
.contact-section .contact-heading {
  max-width: 720px;
  margin-bottom: 0;
}
.contact-section .contact-heading h1 {
  font-size: clamp(30px, 4vw, 42px);
  margin-top: 0;
}
.contact-section .contact-heading p {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.7;
  margin-top: 12px;
}
.contact-info-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 24px 0 32px;
}
.contact-info-card {
  padding: 24px;
}
.contact-info-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--r);
  display: grid;
  place-items: center;
}
.contact-info-icon-email {
  background: var(--teal-50);
  color: var(--teal-700);
}
.contact-info-icon-whatsapp {
  background: #dcfce7;
  color: #15803d;
}
.contact-info-icon-address {
  background: var(--bg-2);
  color: var(--ink-2);
}
.contact-info-title {
  font-weight: 600;
  font-size: 15px;
}
.contact-info-text {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
}
.contact-info-email,
.contact-info-phone,
.contact-info-action {
  margin-top: auto;
}
.contact-info-email {
  font-size: 13px;
  color: var(--teal);
}
.contact-info-phone {
  font-size: 13px;
  color: var(--ink-2);
}
.contact-layout {
  display: grid;
  grid-template-columns: minmax(420px, 560px) minmax(320px, 1fr);
  gap: 48px;
  align-items: start;
}
.contact-form-wrap {
  width: 100%;
  max-width: 560px;
  min-width: 0;
}
.contact-form-card {
  padding: 24px;
}
.contact-image-wrap {
  min-width: 0;
  min-height: 520px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow: visible;
}
.contact-person-image {
  width: 100%;
  max-width: 590px;
  height: auto;
  object-fit: contain;
  object-position: center top;
  display: block;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}
@media (max-width: 900px) {
  .contact-layout,
  .contact-info-grid {
    grid-template-columns: 1fr;
  }
  .contact-form-wrap {
    max-width: none;
  }
  .contact-image-wrap {
    min-height: auto;
    align-items: center;
  }
  .contact-person-image {
    max-width: 520px;
  }
}

/* ============================================================
   bndv5 shell components (viora integration layer)
   ============================================================ */
:root {
  --font-sans: var(--font-main, "Plus Jakarta Sans"), -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}

/* logo */
.bd-site-logo { display: flex; align-items: center; gap: 10px; }
.bd-logo-text { font-weight: 700; font-size: 22px; color: var(--Primary); letter-spacing: -0.02em; }

/* nav hover: viora default hover color (--Secondary) is too pale on white */
.main-menu .navigation > li:hover > a { color: var(--Primary); }
/* our nav markup has a single .text span (no char-flip duplicate); viora's
   hover animation hides .text:nth-child(1), making the only label vanish.
   Keep it visible so hover just recolors to --Primary. */
.main-menu .navigation > li.text-menu:hover .toggle .text:nth-child(1) { opacity: 1; }
.main-menu .navigation > li.text-menu:hover .toggle .text:nth-child(1) .char { transform: none; }
.main-menu.style-1 .navigation > li > a::before { background-color: var(--Primary); }
.navigation .submenu li.current-item > a,
.navigation .submenu li:hover > a { color: var(--Primary); }
.main-menu .current-menu.has-child::after,
.main-menu .current-menu-item.has-child::after { color: var(--Primary); }
.main-menu .current-menu > a { color: var(--Primary) !important; }

/* header actions */
.bd-header-search { width: 150px; }
@media (min-width: 1500px) { .bd-header-search { width: 200px; } }
.bd-header-search fieldset input { padding: 10px 40px 10px 16px; font-size: 13px; }
.bd-header-search .button-submit { font-size: 17px; right: 14px; }
.bd-header-search .button-submit button { background: none; border: 0; color: var(--muted); cursor: pointer; display: flex; }
.bd-header-icon { position: relative; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 50%; color: var(--ink); font-size: 18px; transition: all 0.25s; }
.bd-header-icon:hover { border-color: var(--Primary); color: var(--Primary); }
.bd-header-icon svg { width: 18px; height: 18px; }
.bd-header-wa { color: #1eae53; }
.bd-header-wa:hover { border-color: #1eae53; color: #1eae53; }

/* mega menu content */
.submenu.mega-menu { padding: 40px 0; }
.bd-mega-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bd-mega-family { --fam-accent: var(--Primary); --fam-tint: var(--Secondary); display: flex; flex-direction: column; min-width: 0; padding: 0 28px; border-left: 1px solid var(--line); }
.bd-mega-family:first-child { border-left: 0; padding-left: 0; }
.bd-mega-family:last-child { padding-right: 0; }
.bd-mega-family h6 { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.bd-mega-family h6::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--fam-accent); flex: none; }
.bd-mega-family-desc { font-size: 12px; color: var(--muted); margin-bottom: 14px; }
.bd-mega-family-links { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.bd-mega-family-links a { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 6px 10px; border-radius: 6px; font-size: 13.5px; line-height: 1.35; color: var(--ink); }
.bd-mega-family-links a > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bd-mega-family-links a:hover { background: var(--fam-tint); color: var(--fam-accent); }
.bd-mega-family-links a .mono { color: var(--muted-2); font-size: 11px; flex: none; }
.bd-mega-family-links a:hover .mono { color: var(--fam-accent); }
.bd-mega-family-links .bd-mega-all { margin-top: auto; padding-top: 10px; border-top: 1px dashed var(--line); }
.bd-mega-all span { color: var(--fam-accent); font-weight: 600; }
/* family accents (shared by mega menu + landing pages) */
.bd-fam-dental { --fam-accent: var(--teal); --fam-tint: var(--teal-50); }
.bd-fam-lab { --fam-accent: #008c8c; --fam-tint: #e6f7f7; } /* true teal, freed by the blue rebrand */
.bd-fam-nail { --fam-accent: #b0447c; --fam-tint: #faeef4; }
.bd-fam-other { --fam-accent: #617882; --fam-tint: #eef2f4; }
@media (max-width: 1199px) {
  .bd-mega-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 24px; }
  .bd-mega-family:nth-child(odd) { border-left: 0; padding-left: 0; }
}
.bd-mega-foot { display: flex; gap: 12px; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line); flex-wrap: wrap; }
/* header.style-4 paints .main-menu .tf-btn white; restore viora's dark bordered-button text so "Browse catalogs" stays visible */
.header.style-4 .main-menu .bd-mega-foot .tf-btn.style-border { color: var(--Text-primary); }
.header.style-4 .main-menu .bd-mega-foot .tf-btn.style-border:hover { color: var(--Primary); }

@media (max-width: 1200px) {
  .bd-hide-tablet { display: none !important; }
}
.bd-mobile-count { font-size: 11px; color: var(--muted-2); margin-left: 6px; }

/* page title */
/* soften the banner -> content hand-off: fade the teal tint into the white
   body instead of ending on a hard edge (same treatment as landing heroes) */
.page-layout-v01 { background: linear-gradient(180deg, var(--Secondary) 0%, var(--Secondary) 45%, rgba(255, 255, 255, 0) 100%); }
/* pull banner content in to the .bd-container text zone (also lines up with the header pill logo) */
.page-layout-v01 .tf-container.medium { max-width: var(--content); padding-left: 32px; padding-right: 32px; }
@media (max-width: 767px) { .page-layout-v01 .tf-container.medium { padding-left: 16px; padding-right: 16px; } }
.bd-page-title .title { margin-top: 4px; }
.bd-page-title-intro { max-width: 720px; }
/* banner image (viora page-layout-v01 thumb): arched photo frame matching the
   homepage / landing heroes, standing on the band bottom */
/* fixed width: the .thumb wrapper is absolutely positioned (shrink-to-fit), so a
   min(100%, ...) width resolves against the image's intrinsic size and lets it
   sprawl over the text column */
.bd-page-title .thumb img { width: 430px; max-width: 100%; aspect-ratio: 594 / 633; object-fit: cover; object-position: center top; border-radius: 320px 320px 0 0; display: block; background: #fff; }
@media (max-width: 1400px) { .bd-page-title .thumb img { width: 380px; } }
@media (max-width: 1199px) and (min-width: 992px) {
  /* thumb is in normal flow here: clear the floating header and hug the band bottom */
  .bd-page-title .thumb { height: 100%; padding-top: 140px; align-items: flex-end; justify-content: flex-end; }
}
@media (max-width: 991px) { .bd-page-title .thumb { height: auto; } }
@media (max-width: 991px) { .bd-page-title .thumb img { width: 300px; } }
/* compact banner variant: category image in a white card, aligned with the text block */
.bd-banner-thumb-card { display: flex; align-items: center; justify-content: center; width: 250px; height: 250px; margin-left: auto; padding: 18px; background: #fff; border-radius: 16px; box-shadow: 0 12px 28px rgba(16, 36, 44, 0.1); }
.bd-banner-thumb-card img { max-width: 100%; max-height: 100%; object-fit: contain; }
/* slimmest banner variant: breadcrumb-only strip (product detail) */
.page-layout-v01.bd-crumb-only .content { padding-top: 170px; padding-bottom: 26px; }
@media (max-width: 991px) { .page-layout-v01.bd-crumb-only .content { padding-top: 128px; padding-bottom: 20px; } }
@media (max-width: 767px) { .page-layout-v01.bd-crumb-only .content { padding-top: 114px; padding-bottom: 16px; } }

/* main content generic band */
.bd-main { padding: 40px 0 80px; }

/* product card */
.bd-product-card-media { padding: 8px 8px 0; }
.bd-card-img { display: block; border-radius: var(--r); overflow: hidden; }
.bd-card-img img { width: 100%; aspect-ratio: 1; object-fit: contain; background: #fff; display: block; transition: transform 0.4s; }
.product-card:hover .bd-card-img img { transform: scale(1.05); }
.bd-card-body { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px 16px; flex: 1; }
.bd-product-card-sku { font-size: 11px; color: var(--muted); }
.bd-product-card-name { font-weight: 500; font-size: 14px; line-height: 1.35; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bd-product-card-name:hover { color: var(--Primary); }
.bd-product-card-sub { font-size: 12px; color: var(--muted); }
.bd-product-card-foot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.bd-product-card-price { font-size: 13px; font-weight: 600; color: var(--ink); }
.bd-product-card-price.is-muted { color: var(--muted); }
.bd-product-card-moq { font-size: 11px; color: var(--muted); }

/* document card icon */
.bd-doc-icon { width: 44px; height: 44px; border-radius: var(--r); background: var(--Secondary); display: grid; place-items: center; flex-shrink: 0; color: var(--Primary); font-size: 20px; }

/* CTA banner */
.bd-cta-banner { padding: 0 0 64px; }
.bd-cta-inner { background: var(--Primary); border-radius: 16px; padding: 48px; display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.bd-cta-copy h3 { color: #fff; margin-bottom: 8px; }
.bd-cta-copy p { color: rgba(255, 255, 255, 0.85); margin: 0; }
.bd-cta-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* homepage */
.bd-hero { position: relative; color: #173540; overflow: hidden; }
.bd-hero-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.78) 42%, rgba(255, 255, 255, 0.18) 72%, rgba(255, 255, 255, 0) 100%); }
.bd-hero-container { position: relative; padding-top: 90px; padding-bottom: 110px; min-height: 520px; display: flex; align-items: center; }
.bd-hero-copy { max-width: 680px; }
.bd-hero-eyebrow { color: var(--Primary); font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; font-size: 13px; }
.bd-hero-title { color: #153743; margin-top: 16px; font-size: clamp(32px, 5vw, 56px); line-height: 1.1; }
.bd-hero-text { font-size: 18px; line-height: 1.55; color: #46636f; margin-top: 20px; max-width: 560px; }
.bd-trust-bar { padding: 28px 0; border-bottom: 1px solid var(--line); }
.bd-band-tint { background: var(--Bg-light); }

/* layout fixes: put the in-flow pill header into document flow (viora ships it
   position:absolute over the hero, which hides page tops on non-hero pages),
   and restore a readable default text color (viora body color is the pale
   --Secondary and relies on per-element text classes) */
body { color: var(--ink); line-height: 1.5; }
/* spacer for pages without a full-bleed top band (viora's pill header is position:absolute) */
.bd-header-offset { height: 156px; }
@media (max-width: 991px) { .bd-header-offset { height: 112px; } }
@media (max-width: 767px) { .bd-header-offset { height: 100px; } }

/* mobile header + hero adjustments */
@media (max-width: 991px) {
  .bd-header-icon { width: 36px; height: 36px; font-size: 16px; }
  .bd-header-icon svg { width: 16px; height: 16px; }
  .header .header-right { gap: 8px; }
  .bd-logo-text { font-size: 18px; }
}
@media (max-width: 767px) {
  .bd-hero-overlay { background: rgba(255, 255, 255, 0.9); }
  .bd-hero-container { min-height: 420px; padding-top: 48px; padding-bottom: 64px; }
}
@media (max-width: 480px) {
  .bd-header-wa { display: none; }
}

/* hero thumb: fill the arch with the real photo (demo image is exactly arch-sized) */
.hero-banner-4 .thumbs img { width: 100%; aspect-ratio: 594/633; object-fit: cover; object-position: right center; background: #fff; border-radius: 320px 320px 0 0; }

/* brand-tint the hero gradient (viora medical hardcodes a green tint) */
.tf-slider-2 { background: linear-gradient(86.69deg, #e3f2f2 2.25%, rgba(222, 230, 230, 0.5) 98.6%); }

/* ported v4 sections use inline font-size on headings; keep line-height proportional */
section.band h1, section.band h2, section.band h3,
section.diamond-category-hero h1, section.spec-category-hero h1,
section.cadcam-category-hero h1, section.category-landing-hero h1 { line-height: 1.15; }

/* keep logo/actions clear of the pill's rounded corners (demo markup ships px-0) */
.header.style-4 .header-inner { padding-left: 32px; padding-right: 20px; }
@media (max-width: 1440px) { .header.style-4 .header-inner { padding-left: 28px; padding-right: 18px; } }

/* related articles: white with a hairline divider — the tinted band read as one
   merged block with the identically-colored footer right below it */
.bd-related-band { background: #fff; border-top: 1px solid var(--line); }

/* blog cards: uniform image height so mixed-ratio featured images stay tidy */
/* small blog cards only (related articles grid) — the v-list items on the
   blog list page show their featured image at natural ratio */
.blog-item:not(.v-list) .img-style img { width: 100%; aspect-ratio: 4 / 3; max-height: 240px; object-fit: cover; }
.blog-item:not(.v-list) .imgph { max-height: 240px; }
.blog-item.v-list .img-style img { width: 100%; height: auto; }
/* blog cards: viora's h5/body-default scale is oversized next to site cards — tighten */
.blog-item .content .title { font-size: 16px; line-height: 1.4; font-weight: 600; }
.blog-item .content .text-body-default { font-size: 13.5px; line-height: 1.55; }
.blog-item .content .meta-post .text-caption-1 { font-size: 12px; }
.blog-item .content .meta-post { margin-bottom: 8px; }

/* blog article: long-form reading layout (backlinko-style measure + sidebar) */
.bd-article-layout { display: grid; grid-template-columns: minmax(0, 760px) 320px; gap: 64px; justify-content: center; align-items: start; }
@media (max-width: 1099px) { .bd-article-layout { grid-template-columns: minmax(0, 760px); } }

/* article body: Inter for long-form screen reading (headings keep Plus Jakarta) */
.bd-article { font-family: var(--font-sans); min-width: 0; }
.bd-article-lede { font-size: 21px; line-height: 1.6; color: var(--ink); font-weight: 500; }
.bd-article-body { font-size: 19px; line-height: 1.85; color: var(--ink-2); }
.bd-article-body p { margin: 0 0 22px; }
.bd-article-body h2 { font-size: 30px; line-height: 1.3; margin: 44px 0 18px; color: var(--ink); }
.bd-article-body h3 { font-size: 24px; line-height: 1.35; margin: 36px 0 14px; color: var(--ink); }
.bd-article-body h4 { font-size: 20px; line-height: 1.4; margin: 28px 0 10px; color: var(--ink); }
.bd-article-body ul, .bd-article-body ol { margin: 0 0 22px; padding-left: 26px; }
.bd-article-body li { margin-bottom: 10px; line-height: 1.7; }
.bd-article-body table { font-size: 15px; }
.bd-article-body blockquote { font-size: 17px; }
.bd-article-body img { border-radius: 10px; margin: 12px 0; }
@media (max-width: 767px) {
  .bd-article-body { font-size: 17px; line-height: 1.8; }
  .bd-article-lede { font-size: 18px; }
  .bd-article-body h2 { font-size: 25px; margin-top: 36px; }
  .bd-article-body h3 { font-size: 21px; }
}

/* sidebar */
.bd-article-sidebar { display: flex; flex-direction: column; gap: 24px; }
.bd-side-block { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 20px; }
.bd-side-heading { font-size: 16px; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 2px solid var(--teal); }
.bd-side-posts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.bd-side-posts a { display: flex; gap: 12px; align-items: flex-start; }
.bd-side-thumb { flex: none; width: 64px; height: 64px; border-radius: 8px; overflow: hidden; background: var(--bg-2); }
.bd-side-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bd-side-post-info { min-width: 0; }
.bd-side-post-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13.5px; font-weight: 600; line-height: 1.4; color: var(--ink); }
.bd-side-posts a:hover .bd-side-post-title { color: var(--teal); }
.bd-side-post-meta { display: block; margin-top: 4px; font-size: 12px; color: var(--muted); }
.bd-side-cat-group { margin-bottom: 14px; }
.bd-side-cat-group:last-child { margin-bottom: 0; }
.bd-side-cat-title { font-size: 13px; margin-bottom: 6px; color: var(--fam-accent, var(--ink)); }
.bd-side-cats { list-style: none; margin: 0; padding: 0; }
.bd-side-cats a { display: flex; justify-content: space-between; gap: 10px; padding: 5px 8px; border-radius: 6px; font-size: 13.5px; color: var(--ink-2); }
.bd-side-cats a:hover { background: var(--teal-50); color: var(--teal); }
.bd-side-cats a .mono { color: var(--muted-2); font-size: 11px; flex: none; }
.bd-side-cat-all a { color: var(--teal); font-weight: 600; }

/* banner meta (date / reads): viora dims trailing items to a light gray that
   vanishes on the tinted band */
.bd-page-title .meta-post li { color: var(--ink-2); }

/* blog detail banner: featured image as a rounded card on the right */
.bd-blog-banner-img { max-width: 460px; border-radius: 16px; overflow: hidden; box-shadow: 0 16px 36px rgba(16, 36, 44, 0.14); }
.bd-blog-banner-img img { display: block; width: 100%; height: auto; max-height: 340px; object-fit: cover; }
/* the featured image carries the height, so trim the empty tall paddings */
.page-layout-v01.bd-blog-banner .content { padding-top: 190px; padding-bottom: 64px; }
@media (max-width: 991px) { .page-layout-v01.bd-blog-banner .content { padding-top: 150px; padding-bottom: 32px; } }

/* about page (corporate demo sections): their --Secondary is dark, ours is a
   pale tint — re-darken the overview story panel, vision overlay and counter */
.section-overview .testimonial { background-color: var(--teal-700); }
.section-overview .col-content.vision::after { background: linear-gradient(180deg, rgba(16, 36, 44, 0) 46%, rgba(16, 36, 44, 0.55) 73%, #10242c 100%); }
.section-overview .counter-item .counter { color: var(--teal-700); }
.section-video .widget-video img.image-inner { width: 100%; display: block; }

/* dou_msg / 404 page: section-404 is 100vh in viora — trim for our flow;
   bd-msg-card is the centered action-notice panel */
.section-404 { height: auto; min-height: 58vh; padding: 48px 0 80px; background-color: #fff; }
.section-404 .img img { max-width: 100%; height: auto; }
.bd-msg-section { min-height: 60vh; }
.bd-msg-card { max-width: 560px; margin: 0 auto; padding: 44px 40px; background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 18px 45px rgba(16, 36, 44, 0.08); text-align: center; }
.bd-msg-icon { width: 68px; height: 68px; margin: 0 auto 18px; border-radius: 50%; background: var(--teal-50); color: var(--teal); display: flex; align-items: center; justify-content: center; }
.bd-msg-btn { margin: 0 auto; }

/* pagination: the mt_40 utility class never existed in any stylesheet, so
   pagers everywhere hugged the content above them */
.wg-pagination { margin-top: 48px; }

/* category page: viora form-search element in the sidebar */
.bd-cat-search fieldset input { width: 100%; padding: 11px 40px 11px 16px; font-size: 13px; }
.bd-cat-search .button-submit { right: 14px; }
.bd-cat-search .button-submit button { background: none; border: 0; color: var(--muted); cursor: pointer; display: flex; }

/* category page: sidebar category tree (current branch expanded) */
.bd-cat-tree-list { list-style: none; margin: 8px 0 0; padding: 0; max-height: 430px; overflow-y: auto; scrollbar-width: thin; }
.bd-cat-tree-list > li > a { display: block; padding: 5px 8px; border-radius: 6px; font-size: 13px; color: var(--ink-2); line-height: 1.4; }
.bd-cat-tree-list a:hover { color: var(--teal); background: var(--teal-50); }
.bd-cat-tree-list a.is-current { color: var(--teal); font-weight: 600; background: var(--teal-50); }
.bd-cat-tree-list > li.is-open > a { font-weight: 600; color: var(--ink); }
.bd-cat-tree-list > li > ul { list-style: none; margin: 2px 0 6px; padding: 0 0 0 14px; border-left: 2px solid var(--teal-50); }
.bd-cat-tree-list > li > ul a { display: block; padding: 4px 8px; border-radius: 6px; font-size: 12.5px; color: var(--muted); }

/* CTA banner: our generated factory backdrop is pre-darkened for white text,
   so show it properly instead of viora's 10% texture opacity */
.section-banner .banner img { opacity: 0.55; }

/* add-to-quote/order buttons: added-state toggle (check -> hover shows remove) */
.js-add-quote.is-in-quote { background: var(--teal-50) !important; background-color: var(--teal-50) !important; color: var(--teal) !important; border: 1px solid var(--teal) !important; }
.js-add-quote.is-in-quote .when-hover { display: none; }
.js-add-quote.is-in-quote:hover .when-idle { display: none; }
.js-add-quote.is-in-quote:hover .when-hover { display: inline-flex; align-items: center; gap: 6px; }
.js-add-quote.is-in-quote .when-idle { display: inline-flex; align-items: center; gap: 6px; }

/* homepage hero band: viora ships a hardcoded pale-green gradient in
   styles.css (.tf-slider-2) that survived the blue rebrand — repaint it */
.tf-slider-2 { background: linear-gradient(86.69deg, #e7f2fb 2.25%, rgba(226, 237, 248, 0.5) 98.6%); }

/* static info pages: icon-box glyphs in brand color */
.band .tf-box-icon.style-3 .icon i { color: var(--Primary); font-size: 30px; }

/* FAQ page: corporate-demo accordion layout */
.bd-faq-section { padding: 24px 0 80px; }
.bd-faq-side { position: sticky; top: 110px; }
.bd-faq-side-nav { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.bd-faq-side-nav a { display: block; padding: 9px 14px; border-radius: 8px; font-size: 14.5px; font-weight: 500; color: var(--ink-2); }
.bd-faq-side-nav a:hover { background: var(--teal-50); color: var(--teal); }
.bd-faq-cta { padding: 20px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.bd-faq-group + .bd-faq-group { margin-top: 48px; }
.bd-faq-group-title { font-size: 21px; margin-bottom: 8px; scroll-margin-top: 110px; }
.bd-faq-group .accordion-item.style-1 .heading .title { font-size: 16.5px; line-height: 1.45; }
@media (max-width: 991px) { .bd-faq-side { position: static; margin-bottom: 32px; } }

/* footer typography: viora's demo scale (17px links, 24-32px headings)
   reads oversized next to the site's 14-15px body copy — bring it in line */
.footer-style-3 .text-body-default { font-size: 14.5px; line-height: 24px; }
.footer-style-3 .footer-heading { font-size: 16px; line-height: 24px; }
.footer-style-3 .footer-about h4 { font-size: 26px; line-height: 34px; }
.footer-style-3 .footer-about .h5 { font-size: 17px; line-height: 26px; }
.footer-style-3 .text-caption-1 { font-size: 13px; }

/* footer logo + socials */
.bd-footer-logo img { width: 169px; height: 52px; }
.tf-social.style-2 .bd-social-wa svg { width: 20px; height: 20px; }
/* full wordmark logo (old main-site logo.svg) — no rounding */
.bd-site-logo img { border-radius: 0; }

/* line-style select matching viora .style-line-bottom inputs */
.bd-select-line { width: 100%; border: 0; border-bottom: 1px solid var(--Line, #e4e4e4); padding: 12px 0; font-size: 15px; line-height: 22px; background: transparent; color: var(--ink); appearance: auto; border-radius: 0; }
.bd-select-line:focus { outline: none; border-bottom-color: var(--Primary); }

/* product detail polish */
.product-action-row .tf-btn { flex: 1 1 auto; justify-content: center; gap: 8px; }
.product-action-row .tf-btn svg { width: 16px; height: 16px; }
.tab-nav { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 8px; flex-wrap: wrap; }
.tab-btn { padding: 12px 18px; font-size: 14px; font-weight: 600; color: var(--muted); border: 0; background: none; cursor: pointer; position: relative; }
.tab-btn::after { content: ""; position: absolute; left: 18px; right: 18px; bottom: -1px; height: 2px; background: transparent; transition: background 0.2s; }
.tab-btn.active { color: var(--Primary); }
.tab-btn.active::after { background: var(--Primary); }
/* CMS content areas: editorial heading scale, not display scale */
.content-body h1, .page-content h1 { font-size: 26px; line-height: 1.3; margin: 24px 0 12px; }
.content-body h2, .page-content h2 { font-size: 22px; line-height: 1.3; margin: 22px 0 10px; }
.content-body h3, .page-content h3 { font-size: 18px; line-height: 1.35; margin: 18px 0 8px; }
.content-body h4, .page-content h4 { font-size: 16px; margin: 16px 0 8px; }
.content-body p, .page-content p { margin: 0 0 12px; }
.content-body ul, .page-content ul, .content-body ol, .page-content ol { margin: 0 0 12px; padding-left: 22px; }
.content-body li, .page-content li { margin-bottom: 6px; }

/* search category shortcut cards */
.bd-search-cat { display: flex; align-items: center; gap: 12px; padding: 12px 14px; text-decoration: none; border-bottom: 3px solid var(--Primary); }
.bd-search-cat-thumb { flex: none; width: 56px; height: 56px; border-radius: 10px; background: var(--bg-2); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.bd-search-cat-thumb img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.bd-search-cat-info { min-width: 0; }
.bd-search-cat strong { display: block; font-size: 14.5px; line-height: 1.35; color: var(--ink); }
.bd-search-cat-info > span { display: block; margin-top: 4px; font-size: 12px; color: var(--muted); }
.bd-search-cat.is-active { background: var(--Secondary); border-bottom-color: var(--ink); }
.bd-search-cat.is-active strong { color: var(--Primary); }
.bd-search-cat .bd-search-cat-selected { color: var(--Primary); font-weight: 600; margin-top: 8px; }
/* compact variant of the title band for utility pages */
.page-layout-v01.bd-compact .content { padding-top: 190px; padding-bottom: 48px; }
@media (max-width: 991px) { .page-layout-v01.bd-compact .content { padding-top: 150px; padding-bottom: 32px; } }
/* Portfolio style-2 corner arrow: image is masked with a bottom-right notch (shape-card.svg), so .btn-arrow must sit OUTSIDE the masked .img-style or the mask erases it (the "white, invisible arrow" bug). This wrapper boxes only the image + arrow so the arrow anchors to the image notch regardless of the text height below. */
.portfolio-item.style-2 .bd-img-arrow { position: relative; margin-bottom: 20px; }
.portfolio-item.style-2 .bd-img-arrow .img-style { margin-bottom: 0; }
/* Spec/diamond data tables: override the viora base `table{table-layout:fixed}` (styles.css) so columns size to their content. Fixed layout squeezed the long ISO 6360 codes (e.g. 500 314 001 001 006) narrower than their nowrap text, spilling them over the Shank column. auto layout + the existing .spec-table-shell/.diamond-table-shell overflow-x scroll keeps every column readable. cadcam tables opt into fixed on purpose and keep it. */
.spec-product-table, .diamond-table:not(.cadcam-table) { table-layout: auto; }
/* Fix stray vertical scrollbars on buttons/inputs/tabs. The viora base reset (styles.css "General") applies `overflow-x:hidden; overflow-y:auto` to body AND every button/input/select/textarea, so any 1px sub-pixel overflow (e.g. the .tab-btn active underline at bottom:-1px) shows a tiny draggable scrollbar. Restore normal overflow on these controls; leave body (intentional no-x-scroll) and textarea (needs y-scroll) alone. */
button, input, select { overflow: visible; }
.tab-nav { overflow: visible; }

/* Homepage Browse by category: four business groups */
.bd-home-category-groups .bd-home-category-wrap {
  align-items: stretch;
}
.bd-home-category-groups .bd-home-category-tabs {
  flex: 0 0 240px;
}
.bd-home-category-groups .bd-home-category-tabs .menu-tab {
  width: 100%;
}
.bd-home-category-content {
  flex: 1 1 0;
  min-width: 0;
}
.bd-home-category-card .tf-grid-layout {
  min-height: 380px;
  grid-template-columns: minmax(260px, 38%) minmax(0, 62%);
}
.bd-home-category-image {
  display: block;
  background: radial-gradient(circle at 30% 22%, #f7fcfd 0, #fff 46%, #e7f2fb 100%);
}
.bd-home-category-image img {
  width: 100%;
  height: 380px;
  object-fit: contain;
  padding: 26px;
  background: #fff;
}
.bd-home-category-card .content-inner {
  padding-top: 34px;
  padding-bottom: 34px;
}
.bd-home-category-card .heading {
  margin-bottom: 16px;
}
.bd-home-category-card .text-body-2 {
  line-height: 1.5;
}
.bd-home-category-btn {
  margin-top: 16px;
}
.bd-home-category-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 16px;
}
.bd-home-category-link {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  border: 1px solid rgba(3, 118, 187, 0.18);
  border-radius: 12px;
  padding: 7px 10px;
  color: var(--Text);
  background: #fff;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
}
.bd-home-category-link:hover {
  border-color: rgba(3, 118, 187, 0.45);
  color: var(--Primary);
  background: #f2f7fc;
}
.bd-home-category-link-img {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid rgba(3, 118, 187, 0.14);
  background: #fff;
}
.bd-home-category-link-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 4px;
}
@media (max-width: 991px) {
  .bd-home-category-groups .bd-home-category-wrap {
    display: block !important;
  }
  .bd-home-category-groups .bd-home-category-tabs {
    width: 100%;
    margin-bottom: 24px;
    overflow-x: auto;
  }
  .bd-home-category-groups .bd-home-category-tabs .menu-tab {
    flex-direction: row !important;
    gap: 12px;
    min-width: max-content;
  }
  .bd-home-category-groups .bd-home-category-tabs .nav-tab-item {
    min-width: 230px;
  }
  .bd-home-category-card .tf-grid-layout {
    min-height: 0;
    grid-template-columns: 1fr;
  }
  .bd-home-category-image img {
    height: 300px;
  }
}
@media (max-width: 575px) {
  .bd-home-category-groups .bd-home-category-tabs .nav-tab-item {
    min-width: 76vw;
  }
  .bd-home-category-image img {
    height: 260px;
    padding: 20px;
  }
  .bd-home-category-links {
    grid-template-columns: 1fr;
  }
  .bd-home-category-btn {
    width: 100%;
  }
}

.bd-products-carousel .swiper {
  padding-bottom: 18px;
}
.bd-products-carousel .bd-products-scrollbar {
  position: relative;
  height: 5px;
  max-width: 420px;
  margin: 20px auto 0;
  border-radius: 999px;
  background: rgba(3, 118, 187, 0.12);
}
.bd-products-carousel .bd-products-scrollbar .swiper-scrollbar-drag {
  height: 100%;
  border-radius: 999px;
  background: var(--Primary);
  cursor: grab;
}
.bd-products-carousel .bd-products-scrollbar .swiper-scrollbar-drag:active {
  cursor: grabbing;
}
@media (max-width: 575px) {
  .bd-products-carousel .bd-products-scrollbar {
    max-width: 100%;
  }
}