/* Kit styles of the export-hair templates (plan 16): fonts, a small reset and the parts toc.js draws.
   The CNTech parts copy kit.css on purpose (same look on all 98 demos); templates never restyle them. */
@import url('../fonts.css');

:root {
  --k-font: 'Be Vietnam Pro', system-ui, sans-serif;
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
body {
  margin: 0;
}
img {
  max-width: 100%;
}
/* toc.js filters products with the hidden attribute; a template's `display: grid` must not bring them back. */
[hidden] {
  display: none !important;
}
.k-icon {
  width: 1.2em;
  height: 1.2em;
  flex: none;
  vertical-align: -0.2em;
  fill: none;
  stroke: currentColor;
}

/* ── CNTech parts (do not restyle) ─────────────────────────────────────────────────────────────────────── */
.k-demobar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 12px;
  margin: 0;
  padding: 6px 12px;
  background: #121212;
  color: #f5f5f5;
  font:
    500 12px/1.4 'Be Vietnam Pro',
    system-ui,
    sans-serif;
  letter-spacing: 0;
  text-transform: none;
}
.k-demobar-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}
.k-demobar-market {
  color: #ffc94a;
  font-weight: 700;
}
.k-demobar-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
}
.k-demobar a {
  color: #f5f5f5;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.k-demobar a.k-demobar-cta {
  color: #ffc94a;
  font-weight: 700;
}
.k-credit {
  margin: 0;
  padding: 16px 16px 20px;
  text-align: center;
  font:
    400 12px/1.5 'Be Vietnam Pro',
    system-ui,
    sans-serif;
  color: inherit;
  opacity: 0.8;
}
.k-credit a {
  color: inherit;
  font-weight: 700;
}
.k-watermark {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-repeat: repeat;
  background-size: 300px 200px;
}

/* ── Toast (kit overlays stay below the watermark) ──────────────────────────────────────────────────────── */
.k-toast {
  position: fixed;
  left: 50%;
  bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: 2147482500;
  display: flex;
  align-items: center;
  gap: 12px;
  width: max-content;
  max-width: calc(100% - 32px);
  padding: 12px 16px;
  border-radius: 14px;
  background: #1c1917;
  color: #fff;
  font: 500 14px/1.4 var(--k-font);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  transform: translateX(-50%);
}