.qvalitet-measurement {
  clear: both;
  padding: clamp(20px, 3vw, 28px);
  margin: 28px 0 8px;
  border: 1px solid var(--qv-line, #d9d7d0);
  border-radius: var(--qv-radius, 20px);
  background: var(--qv-sand, #f2e9dc);
  color: var(--qv-ink, #17231f);
}

.qvalitet-measurement__heading {
  display: grid;
  gap: 5px;
  margin-bottom: 18px;
}

.qvalitet-measurement__heading h2 {
  margin: 0;
  font-size: clamp(1.25rem, 2vw, 1.55rem);
  line-height: 1.15;
}

.qvalitet-measurement__heading p,
.qvalitet-measurement__prompt,
.qvalitet-measurement__note {
  margin: 0;
  color: var(--qv-muted, #66736d);
  font-size: 0.88rem;
  line-height: 1.5;
}

.qvalitet-measurement__metrics {
  display: grid;
  padding: 0;
  margin: 0;
  gap: 1px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, currentColor 12%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, currentColor 12%, transparent);
}

.qvalitet-measurement__metrics > div {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(120px, auto);
  padding: 12px 14px;
  gap: 16px;
  background: var(--qv-white, #fff);
}

.qvalitet-measurement__metrics dt {
  color: var(--qv-muted, #66736d);
  font-size: 0.82rem;
}

.qvalitet-measurement__metrics dd {
  margin: 0;
  font-weight: 750;
  text-align: right;
}

.qvalitet-room-calculator {
  margin-top: 18px;
  border: 1px solid color-mix(in srgb, currentColor 16%, transparent);
  background: var(--qv-white, #fff);
}

.qvalitet-room-calculator[hidden],
.qvalitet-order-logistics[hidden] {
  display: none;
}

.qvalitet-room-calculator__heading {
  padding: 16px;
  border-bottom: 1px solid color-mix(in srgb, currentColor 12%, transparent);
}

.qvalitet-room-calculator__heading h3 {
  margin: 0 0 4px;
  font-size: 1rem;
}

.qvalitet-room-calculator__heading p {
  margin: 0;
  color: var(--qv-muted, #66736d);
  font-size: 0.76rem;
  line-height: 1.45;
}

.qvalitet-room-calculator__fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 14px;
  gap: 10px;
}

.qvalitet-room-calculator__fields label {
  display: grid;
  gap: 5px;
  color: var(--qv-muted, #66736d);
  font-size: 0.68rem;
}

.qvalitet-room-calculator__fields input {
  width: 100%;
  min-height: 43px;
  padding: 8px 10px;
  border: 1px solid var(--qv-line, #d9d7d0);
  border-radius: 2px;
  background: var(--qv-cream, #f4f2ed);
  color: var(--qv-ink, #17231f);
  font: inherit;
  font-size: 0.8rem;
}

.qvalitet-room-calculator__result {
  padding: 0;
  margin: 0;
  border-top: 1px solid color-mix(in srgb, currentColor 12%, transparent);
}

.qvalitet-room-calculator__result > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 10px 14px;
  gap: 14px;
  border-bottom: 1px solid color-mix(in srgb, currentColor 10%, transparent);
}

.qvalitet-room-calculator__result dt {
  color: var(--qv-muted, #66736d);
  font-size: 0.75rem;
}

.qvalitet-room-calculator__result dd {
  margin: 0;
  font-family: inherit;
  font-size: 0.77rem;
  font-weight: 650;
}

.qvalitet-room-calculator__result .is-total {
  color: var(--qv-forest, #174e40);
}

.qvalitet-room-calculator__apply {
  width: calc(100% - 28px);
  margin: 14px;
  justify-content: center;
}

.qvalitet-order-logistics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 1px;
  margin: 16px 0 0;
  gap: 1px;
  background: color-mix(in srgb, currentColor 13%, transparent);
}

.qvalitet-order-logistics > div {
  padding: 11px;
  background: var(--qv-white, #fff);
}

.qvalitet-order-logistics dt {
  color: var(--qv-muted, #66736d);
  font-size: 0.64rem;
  line-height: 1.35;
}

.qvalitet-order-logistics dd {
  margin: 5px 0 0;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 650;
}

.qvalitet-measurement__total {
  display: grid;
  padding: 17px 0 9px;
  margin: 0;
  gap: 3px;
}

.qvalitet-measurement__total span {
  color: var(--qv-muted, #66736d);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.qvalitet-measurement__total output {
  font-size: clamp(1rem, 2vw, 1.25rem);
  font-weight: 800;
  line-height: 1.35;
}

@media (max-width: 520px) {
  .qvalitet-measurement__metrics > div {
    grid-template-columns: 1fr;
    gap: 3px;
  }

  .qvalitet-measurement__metrics dd {
    text-align: left;
  }

	.qvalitet-room-calculator__fields,
	.qvalitet-order-logistics {
		grid-template-columns: 1fr;
	}
}