/**
 * Product page type tester — layout + dropdowns.
 * Toolbar controls reuse jt-home-font.css (.jt-home-toolbar*).
 */

.jt-product-type-tester {
  margin: 32px 0 56px;
}

.jt-product-type-tester__shell {
  width: 100%;
  max-width: none;
  margin: 0 auto;
  padding: 0 var(--jt-product-shell-x, 30px);
  box-sizing: border-box;
}

.jt-product-type-tester__controls {
  width: 100%;
}

.jt-product-type-tester .jt-home-toolbar__group--selects {
  flex: 1 1 100%;
}

.jt-tester-selects {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.jt-tester-dd {
  position: relative;
  flex: 0 1 auto;
}

.jt-tester-dd--style {
  flex: 0 0 160px;
  min-width: 140px;
}

.jt-tester-dd--text {
  flex: 1 1 280px;
  min-width: 220px;
}

.jt-tester-dd__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  background: transparent;
  color: var(--jt-text);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.jt-tester-dd__trigger:hover,
.jt-tester-dd.is-open .jt-tester-dd__trigger {
  border-color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.03);
}

.jt-tester-dd__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.jt-tester-dd__chev {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.75;
  transition: transform 0.2s ease;
}

.jt-tester-dd.is-open .jt-tester-dd__chev {
  transform: rotate(180deg);
}

.jt-tester-dd__menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 20;
  display: none;
  min-width: 100%;
  width: max-content;
  max-width: min(420px, calc(100vw - 40px));
  padding: 6px;
  border: 1px solid var(--jt-border);
  border-radius: 12px;
  background: #2a2a2a;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
}

.jt-tester-dd--text .jt-tester-dd__menu {
  min-width: 100%;
}

.jt-tester-dd.is-open .jt-tester-dd__menu {
  display: block;
}

.jt-tester-dd__item {
  display: block;
  width: 100%;
  padding: 12px 14px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--jt-text);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease;
}

.jt-tester-dd__item:hover {
  background: rgba(255, 255, 255, 0.06);
}

.jt-tester-dd__item--custom {
  margin-bottom: 4px;
}

.jt-product-type-tester__stage-wrap {
  width: 100%;
  margin-top: 20px;
}

.jt-product-type-tester__stage {
  --preview-size: 64px;
  --preview-lh: 1.08;
  --preview-ls: -0.03em;
  --preview-align: center;
  --preview-case: none;
  --preview-canvas-bg: #000000;
  --preview-canvas-text: #ffffff;
  --preview-canvas-muted: rgba(255, 255, 255, 0.55);
  --preview-canvas-border: rgba(255, 255, 255, 0.12);
  width: 100%;
  padding: clamp(48px, 8vw, 88px) clamp(20px, 4vw, 40px);
  background: var(--preview-canvas-bg);
  border: 1px solid var(--preview-canvas-border);
  border-radius: var(--jt-radius);
  transition: background 0.25s ease, border-color 0.25s ease;
}

.jt-product-type-tester__stage.jt-preview-canvas--light {
  --preview-canvas-bg: #ffffff;
  --preview-canvas-text: #111111;
  --preview-canvas-muted: #6b6b6b;
  --preview-canvas-border: #e8e8e8;
}

.jt-product-type-tester__preview-wrap {
  position: relative;
  width: 100%;
  text-align: var(--preview-align);
}

.jt-product-type-tester__specimen-type {
  font-size: var(--preview-size);
  line-height: var(--preview-lh);
  letter-spacing: var(--preview-ls);
  color: var(--preview-canvas-text);
  text-transform: var(--preview-case);
  font-feature-settings: "liga" 1;
  word-break: break-word;
  transition: color 0.25s ease, opacity 0.2s ease;
}

.jt-product-type-tester__placeholder {
  display: none;
  width: 100%;
  margin: 0;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  cursor: default;
  color: var(--preview-canvas-muted);
  -webkit-text-fill-color: var(--preview-canvas-muted);
  opacity: 0.45;
}

.jt-product-type-tester__preview-wrap.is-font-ready.is-empty:not(.is-focused) .jt-product-type-tester__placeholder {
  display: block;
}

.jt-product-type-tester__preview {
  display: block;
  width: 100%;
  min-height: 1.2em;
  margin: 0;
  outline: none;
  cursor: text;
  -webkit-user-select: text;
  user-select: text;
}

.jt-product-type-tester__preview-wrap.is-font-ready.is-empty:not(.is-focused) .jt-product-type-tester__preview {
  position: absolute;
  inset: 0;
  min-height: 100%;
  opacity: 0;
  color: transparent;
  caret-color: var(--preview-canvas-text);
}

.jt-product-type-tester__preview-wrap.is-font-ready.is-empty.is-focused .jt-product-type-tester__preview,
.jt-product-type-tester__preview-wrap.is-font-ready:not(.is-empty) .jt-product-type-tester__preview {
  position: static;
  opacity: 1;
}

.jt-product-type-tester__stage:not(.jt-preview-canvas--light) .jt-product-type-tester__specimen-type {
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
}

.jt-product-type-tester__stage:not(.jt-preview-canvas--light) .jt-product-type-tester__placeholder {
  color: rgba(255, 255, 255, 0.45);
  -webkit-text-fill-color: rgba(255, 255, 255, 0.45);
  opacity: 0.45;
}

.jt-product-type-tester__stage.jt-preview-canvas--light .jt-product-type-tester__specimen-type {
  color: #111111;
  -webkit-text-fill-color: #111111;
}

.jt-product-type-tester__stage.jt-preview-canvas--light .jt-product-type-tester__placeholder {
  color: rgba(17, 17, 17, 0.4);
  -webkit-text-fill-color: rgba(17, 17, 17, 0.4);
  opacity: 0.45;
}

.jt-product-type-tester__preview:focus {
  outline: none;
}

html.jt-light .jt-tester-dd__trigger,
body.jt-light .jt-tester-dd__trigger {
  border-color: rgba(0, 0, 0, 0.2);
}

@media (max-width: 767px) {
  .jt-product-type-tester__shell {
    padding: 0 20px;
  }

  .jt-product-type-tester .jt-home-toolbar {
    padding: 14px;
  }

  .jt-product-type-tester .jt-home-toolbar__group--slider {
    max-width: none;
    flex-basis: calc(50% - 8px);
  }

  .jt-tester-dd--style,
  .jt-tester-dd--text {
    flex: 1 1 100%;
    min-width: 0;
  }
}