.kayna-ar-panel {
  display: none;
  margin: .75rem 0 0;
  padding: .75rem;
  border: 1px solid #d8c6ae;
  border-radius: 8px;
  background: #f8f3ea;
  color: #3f2a18;
}

.kayna-ar-panel.is-visible {
  display: block;
}

.kayna-ar-panel__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}

.kayna-ar-panel__text {
  min-width: 0;
}

.kayna-ar-panel__text strong {
  display: block;
  margin-bottom: .15rem;
  color: #3f2a18;
}

.kayna-ar-panel__text span {
  display: block;
  color: #6f4b2a;
  font-size: .9rem;
}

.kayna-ar-panel__button,
model-viewer [slot="ar-button"].kayna-ar-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: .55rem .85rem;
  border: 0;
  border-radius: 7px;
  background: #8f2d25;
  color: #fff;
  font: inherit;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}

.kayna-ar-panel__button:focus,
.kayna-ar-panel__button:hover,
model-viewer [slot="ar-button"].kayna-ar-button:focus,
model-viewer [slot="ar-button"].kayna-ar-button:hover {
  background: #6f211b;
  outline: 3px solid rgba(143, 45, 37, .25);
}

.kayna-ar-panel__note {
  margin: .55rem 0 0;
  color: #776653;
  font-size: .82rem;
}

model-viewer.kayna-ar-enabled {
  min-height: 420px;
}

@media (max-width: 760px) {
  .kayna-ar-panel {
    display: block;
  }

  .kayna-ar-panel__row {
    display: block;
  }

  .kayna-ar-panel__button {
    width: 100%;
    margin-top: .65rem;
  }

  model-viewer.kayna-ar-enabled {
    min-height: 62vh;
  }
}